1、请说说你对执行 JS 代码时产生的执行上下文的理解
答:当执行 JS 代码时,会产生三种执行上下文 全局执行上下文 函数执行上下文 eval 执行上下文
每个执行上下文中都有三个重要的属性 变量对象(VO),包含变量、函数声明和函数的形参,该属性只能在全局上下文中访问 作用域链(JS 采用词法作用域,也就是说变量的作用域是在定义时就决定了) this
var a = 10
function foo(i) {
var b = 20
}
foo()
对于上述代码,执行栈中有两个上下文:全局上下文和函数 foo 上下文。
stack = [
globalContext,
fooContext
]
对于全局上下文来说,VO 大概是这样的
globalContext.VO === globe
globalContext.VO = {
a: undefined,
foo: <Function>,
}
对于函数 foo 来说,VO 不能访问,只能访问到活动对象(AO)
fooContext.VO === foo.AO
fooContext.AO {
i: undefined,
b: undefined,
arguments: <>
}
// arguments 是函数独有的对象(箭头函数没有)
// 该对象是一个伪数组,有 `length` 属性且可以通过下标访问元素
// 该对象中的 `callee` 属性代表函数本身
// `caller` 属性代表函数的调用者
对于作用域链,可以把它理解成包含自身变量对象和上级变量对象的列表,通过 [[Scope]] 属性查找上级变量
fooContext.[[Scope]] = [
globalContext.VO
]
fooContext.Scope = fooContext.[[Scope]] + fooContext.VO
fooContext.Scope = [
fooContext.VO,
globalContext.VO
]
接下来让我们看一个老生常谈的例子,var
b() // call b
console.log(a) // undefined
var a = 'Hello world'
function b() {
console.log('call b')
}
想必以上的输出大家肯定都已经明白了,这是因为函数和变量提升的原因。通常提升的解释是说将声明的代码移动到了顶部,这其实没有什么错误,便于大家理解。但是更准确的解释应该是:在生成执行上下文时,会有两个阶段。第一个阶段是创建的阶段(具体步骤是创建 VO),JS 解释器会找出需要提升的变量和函数,并且给他们提前在内存中开辟好空间,函数的话会将整个函数存入内存中,变量只声明并且赋值为 undefined,所以在第二个阶段,也就是代码执行阶段,我们可以直接提前使用。
在提升的过程中,相同的函数会覆盖上一个函数,并且函数优先于变量提升
b() // call b second
function b() {
console.log('call b fist')
}
function b() {
console.log('call b second')
}
var b = 'Hello world'
var 会产生很多错误,所以在 ES6中引入了 let。let 不能在声明前使用,但是这并不是常说的 let 不会提升,let 提升了声明但没有赋值,因为临时死区导致了并不能在声明前使用。
对于非匿名的立即执行函数需要注意以下一点
var foo = 1
(function foo() {
foo = 10
console.log(foo)
}()) // -> ƒ foo() { foo = 10 ; console.log(foo) }
因为当 JS 解释器在遇到非匿名的立即执行函数时,会创建一个辅助的特定对象,然后将函数名称作为这个对象的属性,因此函数内部才可以访问到 foo,但是这又个值是只读的,所以对它的赋值并不生效,所以打印的结果还是这个函数,并且外部的值也没有发生更改。
specialObject = {};
Scope = specialObject + Scope;
foo = new FunctionExpression;
foo.[[Scope]] = Scope;
specialObject.foo = foo; // {DontDelete}, {ReadOnly}
delete Scope[0]; // remove specialObject from the front of scope chain
2、在一个数组中大部分都是奇数(或偶数),只有1个可能是偶数(或奇数),写一个函数special找到这个不一样的值。
special( [2, 4, 0, 100, 4, 11, 2602, 36] ) // 11 唯一的奇数 special( [160, 3, 1719, 19, 11, 13, -21] ) // 160 唯一的偶数
答:
function special(A){
var evens = A.filter(a=>a%2==0)
var odds = A.filter(a=>a%2!==0)
return evens.length==1? evens[0] : odds[0]
}
3、请说说你对Event loop的理解?浏览器中的Event loop和Node中的Event loop的异同?
4、为什么 0.1 + 0.2 != 0.3
5、什么是Service Worker?如何使用?
答:Service workers 本质上充当Web应用程序与浏览器之间的代理服务器,也可以在网络可用时作为浏览器和网络间的代理。它们旨在(除其他之外)使得能够创建有效的离线体验,拦截网络请求并基于网络是否可用以及更新的资源是否驻留在服务器上来采取适当的动作。他们还允许访问推送通知和后台同步API。
目前该技术通常用来做缓存文件,提高首屏速度,可以试着来实现这个功能。
// // index.js
if
if (f (navigator.serviceWorkerrker) {
navigator.serviceWorkerrker
.register("r("sw.js")
")
.then(function(registration) {
console.log("se("service worker 注册成功");
})
.catch(function(err) {
console.log("se("servcie worker 注册失败");
});
}
// // sw.js
//
// 监听 `install` 事件,回调中缓存所需文件
文件
self.addEventListeistener("install", e => {
e.waitUntil(
(
caches.open("my("my-cache").then(function(cache) {
return rn cache.addAll([".(["./"./index.html", "", "./"./index.js"]);"]);
})
);
});
// 拦截所有请求事件 // 如果缓存中已经有请求的数据就直接用缓存,否则去请求数据 数据 self.addEventListeistener("fetch", e => {
e.respondWith(
th(
caches.match(e.r(ch(e.request).th).then(function(response) {
if (response) {
return response;
}
console.log("fe("fetch source");
})
);
});
打开页面,可以在开发者工具中的 Application 看到 Service Worker 已经启动了 在 Cache 中也可以发现我们所需的文件已被缓存