阮一峰JS教程读后感（九）new命令、this关键字

一、实例对象与new命令

About

面向对象编程（Object Oriented Programming，缩写为 OOP）是目前主流的编程范式。它将真实世界各种复杂的关系，抽象为一个个对象，然后由对象之间的分工与合作，完成对真实世界的模拟。

在其他语言中，我们总是将一种或者一类实例抽象出一个模型，称之为“类”，类中包含属性和方法，将类实例化后得到类的实例，称之为对象，该对象继承了类的属性和方法，但是在JS中，我们主要使用“构造函数”来充当类的角色，作为对象的模板。

1. 构造函数的特点有哪些？

声称对象时必须使用new命令
函数体内部使用了this关键字用来指向要生成的实例。

2. 如果使用构造函数时忘记使用new命令会造成什么后果？

这里先阐述new命令的工作原理：

先创建一个空对象；
将这个空对象的原型指向构造函数的prototype；
将this指向这个空对象；
执行构造函数函数体的代码
返回生成的对象

如果没有使用new命令，那么首先没有生成新的空对象，并且也不会改变this的指向，this默认指向window，所以如果执行了构造函数，那么本来要为对象初始化的属性会变成全局变量。

3. new.target的作用

当调用一个函数时，如果使用了new命令，那么new.target则指向当前函数，如果没有使用new命令则为undefined。可以用该方法来判断是否使用new命令。

function f() {
  if (!new.target) {
    throw new Error('请使用 new 命令调用！');
  }
  // ...
}

f() // Uncaught Error: 请使用 new 命令调用！

4. 如果想以某对象为模板生成新的对象，但是没有该对象的构造函数时应该怎么办？

使用Object.create(obj)可以以obj为模板创建新的对象，新的对象继承了obj的属性和方法。

5. 如何保证调用构造函数时就算不使用new命令也不会出错？

结合new.target指向来判断返回值

function Constructor(param) {
    if ( new.target === Constructor){  // 判断出使用了new命令，那么执行构造函数
        this.name = dog
        this.age = 24
    } else {  // 如果没有使用new命令，那么重新调用构造函数并且使用new命令
        return new Constructor(param)
    }
}

二、this关键字

this关键字是一个非常重要的语法点。毫不夸张地说，不理解它的含义，大部分开发任务都无法完成。

前面提到过，this可以用在构造函数之中，表示实例对象。除此之外，this还可以用在别的场合。但不管是什么场合，this都有一个共同点：它总是返回一个对象。个人感觉this的用法和python中的self比较类似，但是显然JS中this更复杂，并且后面还会提到如何更改this的指向。

1. 为什么要使用this？

我们要弄清楚this的含义就需要先搞清楚为什么要使用this，因为在JavaScript中，函数执行时会有一个执行环境，即执行上下文，这个是什么意思呢，就是比方说我在全局环境下调用该函数，那么该函数的执行环境就是window，该函数可以直接访问window上的属性，那如果是在一个对象obj里调用该方法，如果不修改this 的指向，那么this默认是指向obj的，这时候该函数可以访问obj里的属性。所以this就是用来指明一个函数或者方法的运行环境，来确定当前函数能够访问的空间。

总结一下，JavaScript 语言之中，一切皆对象，运行环境也是对象，所以函数都是在某个对象之中运行，this就是函数运行时所在的对象（环境）。这本来并不会让用户糊涂，但是 JavaScript 支持运行环境动态切换，也就是说，this的指向是动态的，没有办法事先确定到底指向哪个对象，这才是最让初学者感到困惑的地方。

2. this的使用场合有哪几种？

（1）全局环境

如果在全局环境下使用this或者在全局环境下调用函数体内有this的函数，那么此时的this指向window。

（2）构造函数

在构造函数中使用this，this指向的是新生成的实例对象。

（3）对象的方法中

如果在对象的方法中使用了this，this就指向了该方法运行时所在的对象，那么如果把该方法赋值给另一变量，那么this的指向就会改变。

为什么会这样呢，我们可以这样理解，obj和foo存在地址一和地址二中，如果通过obj去调用foo就相当于从地址一中调用地址二的方法，那么该方法的this指向地址一，但是如果把obj.foo赋值给其他变量直接调用，那就相当于直接从地址二中调用该方法，那么此时this就指向window。

并且需要注意的是如果this所在的方法不在对象的第一层，这时this只是指向当前一层的对象，而不会继承更上面的层。

var a = {
  p: 'Hello',
  b: {
    m: function() {
      console.log(this.p);
    }
  }
};

a.b.m() // undefined

3. 使用this应该注意避免什么情况？

（1）避免多层使用this

一般来说第一层this指向当前对象，第二层this直接指向window了

（2）避免数组处理方法中的this

数组的map和foreach方法，允许提供一个函数作为参数。这个函数内部不应该使用this。

（3）避免回调函数中使用this

回调函数中的this往往会改变指向，最好避免使用。

4. call的用法？

Function.prototype.call()可以接受多个参数，其中第一个参数为对象，即调用该方法绑定的对象，后面的参数为传入该方法的参数。如果第一个参数是null，undefined或者空，那么默认传入window，如果是原始值则传入该原始值的包装对象。

func.call(obj, arg1, arg2, ...)

5. call/apply/bind 的区别？

这三者都可以接受多个参数，但是apply接受的第二个参数为数组，另外，bind和前两者不同的是，bind返回的是一个新的函数，该函数已经绑定了一个this，之后无论谁调用都不会改变其this指向。