你不知道的JS(上卷)笔记
JavaScript 既是一门充满吸引力、简单易用的语言,又是一门具有许多复杂微妙技术的语言,即使是经验丰富的 JavaScript 开发者,如果没有认真学习的话也无法真正理解它们.
上卷包括俩节:
- 作用域和闭包
- this 和对象原型
作用域和闭包
希望 Kyle 对 JavaScript 工作原理每一个细节的批判性思 考会渗透到你的思考过程和日常工作中。知其然,也要知其所以然。
提升
作用域同其中的变量声明出现的位置有某种微妙的联系
案例1
a = 2;
var a;
console.log( a ); // 在不了解声明提升的情况下,你可能得出结果是undefined? 实际是2
案例2
console.log( a ); // 你可能由于案例1的影响,得出2,或者未声明便使用,ReferenceError异常,实际上输出 undefined
var a = 2;
看看编译器怎么说:
正确的思考思路是,包括变量和函数在内的所有声明都会在任何代码被执行前首先 被处理。
编译 -> 解释js代码 -> 执行
只有声明本身会被提升,而赋值或其他运行逻辑会留在原地。如果提升改变了代码执行的顺序,会造成非常严重的破坏。
函数声明会被提升,但是函数表达式却不会被提升。
foo(); // 不是 ReferenceError, 而是 TypeError!
var foo = function bar() { // ...
};
foo()调用执行时,foo 此时并没有赋值(如果它是一个函数声明而不 是函数表达式,那么就会赋值)。foo() 由于对 undefined 值进行函数调用而导致非法操作, 因此抛出 TypeError 异常。
函数优先
函数声明和变量声明都会被提升,但是函数会首先被提升,然后才是变量。
一个普通块内部的函数声明通常会被提升到所在作用域的顶部,这个过程不会像下面的代 码暗示的那样可以被条件判断所控制:
foo(); // "b"
var a = true;
if (a) {
function foo() { console.log("a"); }
}
else {
function foo() { console.log("b"); }
}
小结
我们习惯将var a = 2;看作一个声明,而实际上JavaScript引擎并不这么认为。它将var a
和 a = 2 当作两个单独的声明,第一个是编译阶段的任务,而第二个则是执行阶段的任务。
这意味着无论作用域中的声明出现在什么地方,都将在代码本身被执行前首先进行处理。 可以将这个过程形象地想象成所有的声明(变量和函数)都会被“移动”到各自作用域的 最顶端,这个过程被称为提升。
声明本身会被提升,而包括函数表达式的赋值在内的赋值操作并不会提升。 要注意避免重复声明,特别是当普通的 var 声明和函数声明混合在一起的时候,否则会引起很多危险的问题!