JavaScript中new运算符的实现

  废话不多说直接进入正题,首先我们需要先知道new运算符到底做了哪些事情,再来模拟它实现这一功能。

    1. 建立一个空的Object对象;

    2. 把这个空对象用__proto__链接到原型

    3. 用apply绑定对象的this指向

    4. 返回新的对象

  知道了new的具体过程之后,我们就可以来试一下用代码实现这一过程。

 1 // 传参 New(obj, ...args)
 2 function New() {
 3     let obj = new Object();
 4     // 提取第一个参数并作为构造函数;
 5     let construction = [].shift.call(arguments);
 6     // 新对象的__prop__要链接到原型链
 7     obj.__proto__ = construction.prototype;
 8     // 改变this指向
 9     construction.apply(obj, arguments);
10     // 返回新对象
11     return obj;
12 }

  下面对自定义的New方法进行验证:

 1 function People(name,age){
 2     this.name = name;
 3     this.age = age;
 4 }
 5 People.prototype.say = function () {
 6     console.log(`My name is ${this.name}.`);
 7 }
 8 //通过new创建构造实例
 9 let people1 = new People('Jack',20);
10 console.log(people1.name)   // Jack
11 console.log(people1.say())  // My name is Jack.
12 
13 //通过New方法创造实例
14 let people2 = New(People,'Rose',18);
15 console.log(people2.name)   //Rose
16 console.log(people2.say())    //My name is Rose.

  通过输出结果可以看出来,我们自己定义的New方法,是可以实现跟new运算符同等作用的。

posted @ 2019-10-15 11:26  卑微小陈的随笔  阅读(192)  评论(0编辑  收藏  举报