实例对象与new命令

原文地址: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

扫描二维码关注公众号,回复: 4504249 查看本文章
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);

猜你喜欢

转载自www.cnblogs.com/chris-jichen/p/10119682.html