实例对象与new命令

Posted 2020-08-18

原文地址：https://wangdoc.com/javascript/

构造函数

javascript语言的对象体系不是基于类的，而是基于构造函数和原型链。JavaScript语言使用构造函数作为对象的模板。所谓构造函数就是专门用来生成实例对象的函数。构造函数就是一个普通的函数，但是有自己的特征和用法。

var Vehicle = function () {
    this.price = 1000;  
};

上面代码中，Vehicle就是构造函数。为了与普通函数区别，构造函数名字的第一个字母通常大写。
构造函数的特点有两个。

• 函数体内部使用了this关键字，代表了所要生成对象的实例。

• 生成对象的时候，必须使用new命令。

  new命令

  基本用法

  new命令的作用就是执行构造函数，返回一个实例对象。

var v = new Vehicle();
v.price() // 1000

使用new命令时，根据需要，构造函数也可以接受参数。

var Vehicle = function (p) {
    this.price = p;
};

var v = new Vehicle(500);

如果忘了使用new命令，直接调用构造函数，构造函数就变成普通函数，并不会生成实例对象。而且由于后面会说到的原因，this这时代表全局对象，将造成一些意想不到的结果。
为了保证构造函数与new命令一起使用，一个解决办法是，构造函数内部使用严格模式，即第一行加上use strict。这样的话，一旦忘了使用new命令，直接调用构造函数就会报错。

function Fubar(foo, bar) {
    "use strict";
    this._foo = foo;
    this._bar = bar;
}

Fubar() // TypeError: Cannot set property "_foo" of undefined

由于严格模式中，函数内部的this不能指向全局对象，默认等于undefined，导致不加new调用会报错。
另一个解决方法，构造函数内部判断是否使用new命令，如果发现没有使用，则直接返回一个实例对象。

function Fubar(foo, bar) {
    if (!(this instanceof Fubar)) {
        return new Fubar(foo, bar);
    }
    
    this._foo = foo;
    this._bar = bar;
}

Fubar(1, 2)._foo // 1
(new Fubar(1, 2))._foo // 1

new命令的原理

使用new命令时，它后面的函数依次执行下面的步骤。

• 创建一个空对象，作为将要返回的对象实例。
• 将这个空对象的原型指向构造函数的prototype属性。
• 将这个空对象赋值给函数内部的this关键字。
• 开始执行构造函数内部的代码。
  也就是说，构造函数内部，this指的是一个新生成的空对象，所以针对this的操作，都会发生在空对象上。
  如果构造函数内部有return语句，而且return后面跟着一个对象，那么new命令会返回return语句指定的对象；否则，就会不管return语句，返回this对象。
  但是如果return语句返回一个跟this无关的新对象，new命令会返回这个新对象，而不是this对象。这一点需要特别引起注意。

var Vehicle = function () {
    this.price = 1000;
    return {price: 2000};
};
(new Vehicle()).price // 2000

另一方面，如果对普通函数（内部没有this关键字的函数）使用new命令，则会返回一个空对象。

function getMessage() {
    return ‘this is a message‘;
}

var msg = new getMessage();

msg // {}
typeof msg // "object"

new命令简化的内部流程，可以用下面的代码表示。

function _new(constructor, params) {
    // 将arguments对象转为数组
    var args = [].slice.call(arguments);
    // 取出构造函数
    var constructor = args.shift();
    // 创建一个空对象，继承构造函数的prototype属性
    var context = Object.create(constructor.prototype);
    // 执行构造函数
    var result = constructor.apply(context, args);
    // 如果返回结果是对象，就直接返回，否则返回 context对象
    return (typeof result === "object" && result != null) ? result : context;
}

new.target

函数内部可以使用new.target属性。如果当前函数是new命令调用，new.target指向当前函数，否则为undefined。

function f() {
    console.log(new.target === f);
}
f() // false
new f() // true

使用这个属性，可以判断函数调用的时候，是否使用new命令。

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

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

Object.create()创建实例对象

构造函数作为模板，可以生成实例对象。但是有时候拿不到构造函数，只能拿到一个现有的对象。我们希望以这个现有的对象为模板，生成新的实例对象，这时就可以使用Object.create方法。

var person1 = {
    name: "zhang san",
    age: 38,
    greeting: function () {
        console.log("hello world");
    }
};

var person2 = Object.create(person1);