《You don't know JS》 上（入门&作用域&对象）

发表于 更新于 分类于 Disqus： 本文字数： 10k 阅读时长 ≈ 17 分钟

原作：You-Dont-Know-JS
本文的99.9%的内容都来自《You dont know JS》的电子中文版

传送门：《You don’t know JS》 下（类型文法&异步&ES6与未来）

入门与进阶

值和类型

JavaScript只有带类型的值，没有带类型的变量。大家都知道JS的基本类型共6类：

  • undefined
  • null
  • boolean
  • number
  • string
  • object

但是在ES6之后，需要新增一类symbol。另外，对null使用typeof将得到“object”的结果。

JavaScript中对“falsy”的定义包括：

  • “”
  • 0, -0, NaN
  • null, undefined
  • false

除此之外的值都是truthy。

关于JavaScript中的==和===，作者的看法是在必要的时候==会很好地改善程序。然而==的判断规则比较复杂，可以总结出一些情况便于我们选择是否使用==：

  • 如果一个比较的两个值之一可能是true或false，避免==而使用===。
  • 如果一个比较的两个值之一可能是0/""/[]，避免==而使用===。
  • 其他情况下，放心使用==。不仅安全，在许多情况下它可以简化你的代码并改善可读性。

变量

一个变量标识符必须以a-z，A-Z，$，或_开头。它可以包含任意这些字符外加数字0-9，但不能使用保留字。

变量作用域提升（var定义）和嵌套就不多说了。

Strict模式

让代码更严谨，同样可以选择用在全局或是函数中。

函数作为值

IIFE（立即执行函数）和闭包是JS中值得玩味的特性。除了使用()包裹，还可以用void打头开始一个IIFE。

闭包经常用来包装模块。

this指代和prototype

略

新的特性

填充（polyfill）和转译（transpile）

作用域与闭包

作用域

作用域与LHS，RHS。在非Strict模式下，如果到全局作用域还找不到变量，会在作用域内创建一个新的同名变量。在Strict模式下，不允许这种行为（意外地创建全局变量），此时会抛出ReferenceError，即找不到变量。如果找到了值，但是并不能对它做一些事情，就会抛出TypeError。

词法作用域

JavaScript使用词法作用域，即变量和作用域在编写代码阶段已经确定。JS引擎也可以在这个阶段针对作用域和变量对代码进行优化，但是eval()和with()会在代码中动态改变作用域，从而使得引擎无法进行优化，使代码运行得更慢。在strict模式下，eval()的不安全用法（修改作用域）以及with()都是不允许使用的。

词法作用域是编写时的，而动态作用域（和this）是运行时的。词法作用域关心的是函数在何处被声明，但是动态作用域关心的是函数从何处被调用。

this在JS中始终是运行时的，即根据运行时的调用情况有不同的值。在箭头函数中则是词法this的，即声明时决定。

块作用域

封装、匿名函数、IIFE。

for循环、if、while、switch等流程控制语句的{}，都是假的块作用域，其中的内容都依附于外部的函数作用域。with（不建议使用），try catch，let，const可以形成新的块作用域。

在ES6到ES5的转译时，具有块作用域的代码，会采用try catch来实现：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
// ES6
{
    let a = 1;
    console.log(a);
}


// ES5
try {
    throw undefined;
} catch(a) {
    a = 1;
    console.log(a);
}

提升

  • 在代码被执行前，所有的声明，变量和函数，都会首先被处理。处理的只有“声明”，而没有“赋值”。
  • 函数提升优先于变量的提升
  • 后续的提升会覆盖此前的同名提升

闭包

闭包就是函数能够记住并访问它的词法作用域，即使当这个函数在它的词法作用域之外执行时。

循环加闭包会出现面试中的经典问题：

1
2
3
4
5
for (var i=1; i<=5; i++) {
    setTimeout( function timer(){
        console.log( i );
    }, i*1000 );
}

上面的代码为啥不好用？

从之前关于作用域的讨论来看，每次setTimeout只是完成了函数声明，并丢进队列里而已。当定时器函数在其词法作用域外执行时，因为闭包的特点会保留有父级的作用域。而这5个函数都定义在同一个父级函数作用域内，对变量i的引用自然是同一个了。

1
2
3
4
5
6
7
for (var i=1; i<=5; i++) {
    (function(j){
        setTimeout( function timer(){
            console.log( j );
        }, j*1000 );
    })( i );
}

有IIFE的加持，父级作用域现在变成了每个IIFE而非for循环所在的作用域。即每个变量i来自不同的独立作用域，自然就可以得到理想的效果了。

1
2
3
4
5
6

for (let i=1; i<=5; i++) {
    setTimeout( function timer(){
        console.log( i );
    }, i*1000 );
}

不就是想要个块作用域嘛，使用let关键字后变量将不是只为循环声明一次，而是为每次迭代声明一次。每次都能得到一个新的块作用域，自然得到和IIFE一样的效果。

this与对象

this是什么

也许JS已经入门的前端程序员们早就对this在不同环境下的不同值烂熟在心。但可能没有想过这种情况的本质：上一部分提到的JS中的this是运行时的，和作用域完全不一样。

对比一下按照传统OOP理解下的JS代码，从不同的角度看，能进一步得到对this的认识：

1
2
3
4
5
6
7
8
9
10
function foo() {
    var a = 2;
    this.bar();
}

function bar() {
    console.log( this.a );
}

foo(); //undefined
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
function foo(num) {
    console.log( "foo: " + num );

    // 追踪 `foo` 被调用了多少次
    this.count++;
}

foo.count = 0;

var i;

for (i=0; i<10; i++) {
    if (i > 5) {
        foo( i );
    }
}
// foo: 6
// foo: 7
// foo: 8
// foo: 9

// `foo` 被调用了多少次？
console.log( foo.count ); // 0 -- 这他妈怎么回事……？

虽然看上去很愚蠢，但是从词法作用域的角度去理解，是不是能更清楚看到JS中this的特殊之处。

this豁然开朗

根据上面的描述，this是根据调用点确定含义的。下面的4个规则，在准备JS面试的时候肯定都见过：

  • 默认绑定，独立函数调用。可以认为这种this规则是在没有其他规则适用时的默认规则。此时this指向全局对象，在strict mode下，this指向undefined。
  • 隐含绑定，调用点有一个环境对象，即作为函数方法，但是下面的情况下会回退到默认绑定，因为调用点实际位于独立函数内
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    function foo() {
            console.log( this.a );
        }
    var obj = {
        a: 2,
        foo: foo
    };

    var bar = obj.foo; // 函数引用！

    var a = "oops, global"; // `a`也是一个全局对象的属性

    bar(); // "oops, global"

    function foo() {
        console.log( this.a );
    }

    ========

    function doFoo(fn) {
        // `fn` 只不过 `foo` 的另一个引用

        fn(); // <-- 调用点!
    }

    var obj = {
        a: 2,
        foo: foo
    };

    var a = "oops, global"; // `a`也是一个全局对象的属性

    doFoo( obj.foo ); // "oops, global"
  • 显式绑定，call与apply可以显式attach context到函数上，使用bind可以避免前面那种this丢失的情况。
  • new绑定，函数作为构造函数调用时，this指向即将返回的新对象。

从优先级上看，new > 硬绑定 > 隐含绑定 > 默认绑定。其中“new > 硬绑定”有趣的一点是，使用bind在第一个后的参数实际上会作为函数的默认入参（类似于函数柯里化），如下：

1
2
3
4
5
6
7
8
9
10
11
function foo(p1,p2) {
    this.val = p1 + p2;
}

// 在这里使用 `null` 是因为在这种场景下我们不关心 `this` 的硬绑定
// 而且反正它将会被 `new` 调用覆盖掉！
var bar = foo.bind( null, "p1" );

var baz = new bar( "p2" );

baz.val; // p1p2

除了上面的规则，还有一些特例：

传递null或undefined给call，apply或bind时，那么这些值会被忽略掉，取而代之的是默认绑定规则将适用于这个调用。单纯使用apply数组化输入参数（现在已经可以用[...foo]了）和bind柯里化函数时常用到。

不过，这么做还是有风险，建议用Object.create(null)创建的对象替代null，既能表示无意义的值，又能避免默认绑定的行为。

作者给出了软绑定的工具方法，提高了硬绑定的灵活性，又避免了默认绑定的问题。逻辑是在绑定时检查this是否是全局对象，如果是才使用输入的this。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
if (!Function.prototype.softBind) {
    Function.prototype.softBind = function(obj) {
        var fn = this,
            curried = [].slice.call( arguments, 1 ),
            bound = function bound() {
                return fn.apply(
                    (!this ||
                        (typeof window !== "undefined" &&
                            this === window) ||
                        (typeof global !== "undefined" &&
                            this === global)
                    ) ? obj : this,
                    curried.concat.apply( curried, arguments )
                );
            };
        bound.prototype = Object.create( fn.prototype );
        return bound;
    };
}

另外，前面提到的箭头函数具有词法this，等同在调用前声明self = this，再把self传入的效果。

对象

内建对象中，只有Date()是必须要使用new创建的。

对象的属性有两种访问方法：.操作符或[ ]操作符。不同的是.操作符后只能使用标识符兼容的属性名，[...]操作符后可以使用任何合理的UTF-8的字符串。另外，对象的属性名总是字符串，如果使用了其他类型值，会进行强制转换：

1
2
3
4
5
6
7
8
9
var myObject = { };

myObject[true] = "foo";
myObject[3] = "bar";
myObject[myObject] = "baz";

myObject["true"];               // "foo"
myObject["3"];                  // "bar"
myObject["[object Object]"];    // "baz"

计算型属性名

ES6中新增了计算型属性名，允许使用表达式作为一个键名称，表达式用[ ]括起来。像下面这样：

1
2
3
4
5
6
7
8
9
var prefix = "foo";

var myObject = {
    [prefix + "bar"]: "hello",
    [prefix + "baz"]: "world"
};

myObject["foobar"]; // hello
myObject["foobaz"]; // world

深、浅复制与对象属性描述符（description），writable和configurable，getOwnPropertyDescriptor()与defineProperty()。在JS中，delete仅用于直接从目标对象移除该对象的（可以被移除的）属性，与释放内存并无直接关系。

Immutability

注意：所有这些方法创建的都是浅不可变性。也就是，它们仅影响对象和它的直属属性的性质。如果对象拥有对其他对象（数组、对象、函数等）的引用，那个对象的内容不会受影响，任然保持可变。

属性描述符里的writable和configuratable限制了对属性和属性值的修改。preventExtensions()方法可以防止对象被添加新属性。

  • seal() = configuratable: false + preventExtensions()
  • freeze() = seal() + writable: false

getter与setter

除了使用defineProperty外，可以直接用字面量的形式，通过get prop1()或set prop1(val)的形式设置getter和setter。

for in和for of。

混合（淆）“类”的对象

有些语言（比如Java）不给你选择，所以这根本没什么 选择性 —— 一切都是类。其他语言如C/C++或PHP同时给你过程式和面向类的语法，在使用哪种风格合适或混合风格上，留给开发者更多选择。

类意味着拷贝。

当一个传统的类被实例化时，就发生了类的行为向实例中拷贝。当类被继承时，也发生父类的行为向子类的拷贝。多态也是拷贝行为的结果。

但是：

  • 第一，JavaScript并不会自动地 （像类那样）在对象间创建拷贝；
  • 第二，显式mixin只能复制函数或对象的引用，而不是自身。

正如我们在第四章讲解的，在 JavaScript 中，对于对象来说没有抽象模式/蓝图，即没有面向类的语言中那样的称为类的东西。JavaScript 只有 对象。

实际上，在所有语言中，JavaScript 几乎是独一无二的，也许是唯一的可以被称为“面向对象”的语言，因为可以根本没有类而直接创建对象的语言很少，而 JavaScript 就是其中之一。

在 JavaScript 中，类不能（因为根本不存在）描述对象可以做什么。对象直接定义它自己的行为。这里 仅有 对象。

总之，JavaScript中面向对象的部分和大多数OOP语言不完全一样。这使得在JS中模拟类编程将既累又会埋下很多坑。

原型

使用[[get]]查询属性时，也会在[[prototype]]链上寻找，因此修改对象属性的时候，应该注意属性遮蔽（即在[[prototype]]中找到）的情况。它会增加代码的复杂度和可读性，如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
var anotherObject = {
    a: 2
};

var myObject = Object.create( anotherObject );

anotherObject.a; // 2
myObject.a; // 2

anotherObject.hasOwnProperty( "a" ); // true
myObject.hasOwnProperty( "a" ); // false

myObject.a++; // 噢，隐式遮蔽！

anotherObject.a; // 2
myObject.a; // 3

myObject.hasOwnProperty( "a" ); // true

在for in循环中，同样注意用hasOwnProperty()排除[[prototype]]上的属性。

所有用constructor构建的对象都有所指向的prototype，而在prototype中的.constructor又会指回constructor。但是这个关系是可以被覆盖的。

原型继承

作者认为，JS中的对象是通过链接组织起来的。说是原型继承，实际上就是在两个原型间建立了[[prototype]]的关系。这个关系的建立方法很多，各有优劣。最简单的还是用ES5提供的Object.create()方法，对__proto__和constructor等视而不见。它的polyfill像下面这样：

1
2
3
4
5
6
7
if (!Object.create) {
    Object.create = function(o) {
        function F(){}
        F.prototype = o;
        return new F();
    };
}

另外，Object.create()第一个后面的参数可以用来声明对象属性描述符，不过用得不多。

总结

虽然这些JavaScript机制看起来和传统面向类语言的“初始化类”和“类继承”类似，而在JavaScript中的关键区别是，没有拷贝发生。取而代之的是对象最终通过[[Prototype]]链链接在一起。

相反，“委托”是一个更确切的术语，因为这些关系不是拷贝而是委托链接。

从这个角度去看new Foo()过程中发生的事，除了返回一个新的对象外，Foo()还会将这个对象和Foo.prototype链接起来（通过指定[[prototype]]），Foo.prototype和别的对象并没有本质区别。

行为委托

在上面一章提到，[[prototype]]是存在于对象内部的引用另一个对象的内部连接。当一个属性/方法引用在一个对象上发生，而这样的属性/方法又不存在时，这个链接就会被使用。在这种情况下，[[Prototype]]链接告诉引擎去那个被链接的对象上寻找该属性/方法。接下来，如果那个对象也不能满足查询，就沿着它的[[Prototype]]查询，如此继续。这种对象间的一系列链接构成了所谓的“原形链”。

其重要的实质全部在于被连接到其他对象的对象。

下面是一段OLOO（链接到其他对象的对象）风格的例子：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
var Task = {
    setID: function(ID) { this.id = ID; },
    outputID: function() { console.log( this.id ); }
};

// 使 `XYZ` 委托到 `Task`
var XYZ = Object.create( Task );

XYZ.prepareTask = function(ID,Label) {
    this.setID( ID );
    this.label = Label;
};

XYZ.outputTaskDetails = function() {
    this.outputID();
    console.log( this.label );
};
// ...

它的特点在于：

  • 状态保留在委托者上
  • 避免[[prototype]]链上的重复命名
  • 行为委托用在内部实现，避免暴露在API的设计上

思维的转变

放弃传统OO思路在JS中的蹩脚实现（像下面这样），抓住[[prototype]]链接对象以及“原型链”的特殊性，可以让思路更加自然且符合JS的特点（像下面的下面那样）。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
function Foo(who) {
    this.me = who;
}
Foo.prototype.identify = function() {
    return "I am " + this.me;
};

function Bar(who) {
    Foo.call( this, who );
}
Bar.prototype = Object.create( Foo.prototype );

Bar.prototype.speak = function() {
    alert( "Hello, " + this.identify() + "." );
};

var b1 = new Bar( "b1" );
var b2 = new Bar( "b2" );

b1.speak();
b2.speak();
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
var Foo = {
    init: function(who) {
        this.me = who;
    },
    identify: function() {
        return "I am " + this.me;
    }
};

var Bar = Object.create( Foo );

Bar.speak = function() {
    alert( "Hello, " + this.identify() + "." );
};

var b1 = Object.create( Bar );
b1.init( "b1" );
var b2 = Object.create( Bar );
b2.init( "b2" );

b1.speak();
b2.speak();

在这种委托的思路下，不存在严格的父子关系，甚至不存在继承和类的说法。全程通过Object.create()建立起对象和对象的联系，连new也是不建议使用的。

但是这种思路也有个明显的问题，“子类”没法定义“父类”的同名方法，因为整个程序建立在[[prototype]]联系的基础上，重复命名将会隔断连接。

作者并不推荐匿名函数的使用，认为：1，追踪调试栈困难；2，难以自引用；3，代码变得不好理解。这点上我是保留意见的。

类型自省

类型自省即instanceof，而这个操作符是依赖于[[prototype]]中的constructor属性的，这个属性除了不可枚举外，相较其他属性并没有特别之处。重写或者[[prototype]]的改变就可以改变它。因此，instanceof在很多情况下可能并不会那么可靠。

使用鸭子类型的类型自省就更加不可靠了。

在作者提出的OLOO范式中，采取isPrototypeOf()和Object.getPrototypeOf()进行类型自省。

新的class关键字

为了便于“类”思维编程者，class可以说是一大福音。

  • 不再有.prototype的困扰
  • extends一键式继承
  • super对多态的支持
  • 语法上使用更加贴近OOP语言

但实际上，这里的class只是语法糖，它还是没实现从类（“蓝图”）到实例（“建筑”）以及从父类到子类的复制，还建立在[[prototype]]的基础上。原文给出了很多例子说明这点。

在传统面向类的语言中，你从不会在晚些时候调整类的定义，所以类设计模式不提供这样的能力。但是JS的一个最强大的部分就是它是动态的，而且任何对象的定义都是（除非你将它设定为不可变）不固定的可变的东西。

换句话说，class 好像在告诉你：“动态太坏了，所以这可能不是一个好主意。这里有看似静态语法，把你的东西静态编码。”

关于 JavaScript 的评论是多么悲伤啊：动态太难了，让我们假装成（但实际上不是！）静态吧。