1. 首页
  2. SEO百科
  3. Web前端

new运算符的原理小白教程_原理入门攻略

关于 new 运算符的原理: 1、红宝书上解释:(1)创建一个新对象(2)将构造函数的作用域赋给新对象(3)执行构造函数中的代码(4)返回新对象 2、MDN上的解释:(1)一个继承自 Foo.prototype 的新对象被创建(2)使用指定的参数调用构造函数 Foo,并将 this 绑定到新创建的对象。new Foo 等同于 new Foo(),也就是没有指

new运算符的原理小白教程

关于 new 运算符的原理:

new运算符的原理小白教程_原理入门攻略

new运算符的原理小白教程_原理入门攻略

 

1、红宝书上解释:

(1)创建一个新对象

(2)将构造函数的作用域赋给新对象

(3)执行构造函数中的代码

(4)返回新对象

 

2、MDN上的解释:

(1)一个继承自 Foo.prototype 的新对象被创建

(2)使用指定的参数调用构造函数 Foo,并将 this 绑定到新创建的对象。new Foo 等同于 new Foo(),也就是没有指定参数时,Foo 不带任何参数调用的情况

(3)如果构造函数返回了一个“对象”,那么这个对象会取代整个 new 出来的结果。如果构造函数没有返回对象,那么 new 出来的结果为步骤(1)创建的对象

 

3、总结:

使用 new 运算符时,其实就做了这三件事:


1
2
3
4
5
6
7
8
9
10
11
// 创建了一个空对象 obj,并将这个空对象的__proto__成员指向 Foo 函数对象 prototype 成员对象
var obj  = {};
obj.__proto__ = Foo.prototype;

// 将 Foo 函数对象的 this 指针替换成 obj,然后再调用Foo函数
Foo.call(obj);// 判断实例类型是否为对象,是则返回实例,否则返回构造函数
if (typeof obj === 'object') {
    return obj;
} else {
    return Foo;
}

也就是说,函数内部发生了以下变化:

(1)创建一个新对象,并继承构造函数 Foo 的原型对象 Foo.prototype

(2)构造函数 Foo 被执行,执行时传入相应的参数,并将 this 指定为新的实例

(3)判断实例是否为对象,是则返回实例,否则返回构造函数

海计划公众号