深入聊一聊JS中new的原理与实现

kangel2 · 发表于 2021-11-12 08:27:17

定义
$ z/ n* l( G- T" G6 j% f
构造函数体不同
, ]0 {- V- U# H3 P9 H8 w
- 无返回值
  " H% v2 l6 q9 G4 w5 U9 a! [$ w
- 返回对象1 C4 {6 q( i7 a8 K3 y
- 返回非对象( V) R% L+ H# J- |& X4 d
- 没有属性绑定+返回非对象" A. ~6 }1 T; Y; o' N
% J& Z9 u) |9 B& V4 H
构造函数类型不同
, k R% d! M7 o. D6 i2 E
- 构造函数为普通函数2 p, {9 n2 l3 ]
- 构造函数为箭头函数, @3 ^/ G: K8 P# g \* S
$ q$ b: o# e0 c
手写new9 T" |* W" r9 n8 ^* s2 O% T2 N A
总结
4 |. m' m; w6 M2 M, z* B

定义

new 运算符创建一个用户定义的对象类型的实例或具有构造函数的内置对象的实例。
使用new [constructor]的方式来创建一个对象实例，但构造函数的差异会导致创建的实例不同。

构造函数体不同

构造函数也是函数，其唯一的区别就是调用方式不同，任何函数只要使用 new 操作符调用就是构造函数，而不使用 new 操作符调用的函数就是普通函数。
因此构造函数也可以带有返回值，但是这会导致new的结果不同。

无返回值

function Person(name) { this.name = name;}let obj = new Person("Jalenl");console.log(obj);

复制代码

显然，打印的是{name:'Jalenl'}

返回对象

function Person(age) { this.age = age; return { name: "Jalenl" };}let obj = new Person(18);console.log(obj);

复制代码

打印的是{name:'Jalenl'}，也就是说return之前的定义都被覆盖了。这里return的是一个对象，那返回的是个基本类型呢？

返回非对象

function Person(age) { this.age = age; return 1;}let obj = new Person(18);console.log(obj);

复制代码

返回{age:21},这么说return失效了，跟没有return一样的结果，那如果没有this绑定内部属性，再返回基本数据类型呢？

没有属性绑定+返回非对象

function Person(){ return 1}new Person()

复制代码

返回的是一个空对象{}，意料之中。
综上，只有构造函数return返回的是一个对象类型时，才能改变初始结果。

构造函数类型不同

构造函数为普通函数

ECMA-262 3rd. Edition Specification中的说明了对象实例的创建过程：

13.2.2 [[Construct]]+ S% h$ B- y/ X+ D0 F5 D
When the [[Construct]] property for a Function object F is called, the following steps are taken:/ ~9 U O4 o! J

- q" Y, s# s1 ?+ T

Create a new native ECMAScript object. ) B" d1 e) z3 v4 K" E$ v

Set the [[Class]] property of Result(1) to "Object".
5 Q8 m6 `. h7 U* B( m' R
Get the value of the prototype property of F.
9 O3 b% I- ?5 d/ v
If Result(3) is an object, set the [[Prototype]] property of Result(1) to Result(3).
$ F6 S% j+ B) r2 C! H5 F0 ?( {& O
If Result(3) is not an object, set the [[Prototype]] property of Result(1) to the original Object prototype object as described in 15.2.3.1.
2 X" L r; n1 b
Invoke the [[Call]] property of F, providing Result(1) as the this value and providing the argument list passed into [[Construct]] as the argument values.
4 E. [0 a" \" I% k) E
If Type(Result(6)) is Object then return Result(6).
9 B: @8 |: l& F. O5 F* l0 w; X
Return Result(1)., Y8 y! J9 c: ]- ?

总结下来就是：

在内存中创建一个新对象。
/ e$ Z8 c3 j' T# d( U6 x8 O
这个新对象内部的[[Prototype]]特性被赋值为构造函数的 prototype 属性。
8 x: n1 Q- ?; d
构造函数内部的 this 被赋值为这个新对象（即 this 指向新对象）。
; j j/ a7 I' g/ }
执行构造函数内部的代码（给新对象添加属性）。
+ I4 z/ y6 F" B3 A; t; F
如果构造函数返回对象，则返回该对象；否则，返回刚创建的新对象(空对象)。% d; [1 F7 |* p( }& e

第五步就已经说明了构造函数不同导致new结果不同的原因。
以下摘自MDN的解释：

当代码 new Foo(…) 执行时，会发生以下事情：
& z, \% R6 q+ D; F7 C
& n0 q# V$ m8 e

一个继承自 Foo.prototype 的新对象被创建。 ; \' O5 X. a8 C# a+ d* ?. E2 x

使用指定的参数调用构造函数 Foo，并将 this 绑定到新创建的对象。new Foo 等同于 new Foo()，也就是没有指定参数列表，Foo 不带任何参数调用的情况。
" o7 _% X1 B! y- C: D- Y
由构造函数返回的对象就是 new 表达式的结果。如果构造函数没有显式返回一个对象，则使用步骤1创建的对象。（一般情况下，构造函数不返回值，但是用户可以选择主动返回对象，来覆盖正常的对象创建步骤）
$ N& D! B; A: ]; z+ b; s* h3 S

构造函数为箭头函数

普通函数创建时，引擎会按照特定的规则为这个函数创建一个prototype属性（指向原型对象）。默认情况下，所有原型对象自动获得一个名为 constructor 的属性，指回与之关联的构造函数。

function Person(){ this.age = 18;}Person.prototype/**{ constructor: ƒ Foo() __proto__: Object}**/

复制代码

创建箭头函数时，引擎不会为其创建prototype属性，箭头函数没有constructor供new调用，因此使用new调用箭头函数会报错！

const Person = ()=>{}new Person()//TypeError: Foo is not a constructor

复制代码

手写new

综上，熟悉了new的工作原理后，我们可以自己实现一个低配版的new，实现的关键是：

让实例可以访问到私有属性；
0 u& }0 d. Q/ ?8 ~
让实例可以访问构造函数原型（constructor.prototype）所在原型链上的属性；
: |% F2 f! A' f2 o) H
构造函数返回的最后结果是引用数据类型。
0 D7 B; ^1 e( e0 ]) B

function _new(constructor, ...args) { // 构造函数类型合法判断 if(typeof constructor !== 'function') { throw new Error('constructor must be a function'); } // 新建空对象实例 let obj = new Object(); // 将构造函数的原型绑定到新创的对象实例上 obj.__proto__ = Object.create(constructor.prototype); // 调用构造函数并判断返回值 let res = constructor.apply(obj, args); let isObject = typeof res === 'object' && res !== null; let isFunction = typeof res === 'function'; // 如果有返回值且返回值是对象类型，那么就将它作为返回值，否则就返回之前新建的对象 return isObject || isFunction ? res : obj;};

复制代码

这个低配版new实现可以用来创建自定义类的实例，但不支持内置对象，毕竟new属于操作符，底层实现更加复杂。

总结

到此这篇关于JS中new的原理与实现的文章就介绍到这了,更多相关JS中new原理与实现内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

来源：http://www.jb51.net/article/227135.htm
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！

账号		自动登录	找回密码
密码			立即注册