原理

  1. 新生成了一个对象
  2. 链接到原型
  3. 绑定 this
  4. 返回新对象

new 实现

  1. function create() {
  2. // 创建一个空的对象
  3. let obj = new Object()
  4. // 获得构造函数
  5. let Con = [].shift.call(arguments)
  6. // 链接到原型
  7. obj.__proto__ = Con.prototype
  8. // 绑定 this,执行构造函数
  9. let result = Con.apply(obj, arguments)
  10. // 确保 new 出来的是个对象
  11. return typeof result === 'object' ? result : obj
  12. }

对于实例对象来说,都是通过 new 产生的,无论是 function Foo() 还是 let a = { b : 1 }

对于创建一个对象来说,更推荐使用字面量的方式创建对象(无论性能上还是可读性)。因为你使用 new Object() 的方式创建对象需要通过作用域链一层层找到 Object,但是你使用字面量的方式就没这个问题。

对于 new 来说,还需要注意下运算符优先级。

  1. function Foo() {
  2. return this;
  3. }
  4. Foo.getName = function () {
  5. console.log('1');
  6. };
  7. Foo.prototype.getName = function () {
  8. console.log('2');
  9. };
  10. new Foo.getName(); // -> 1
  11. new Foo().getName(); // -> 2
  12. // 对于第一个函数来说,先执行了 Foo.getName() ,所以结果为 1;对于后者来说,先执行 new Foo() 产生了一个实例,然后通过原型链找到了 Foo 上的 getName 函数,所以结果为 2。

附:js优先级

优先级 运算类型 关联性 运算符
20 圆括号 n/a(不相关) ( … )
19 成员访问 从左到右 … . …
需计算的成员访问 从左到右 … [ … ]
new (带参数列表) n/a new … ( … )
函数调用 从左到右 … ( … )
可选链(Optional chaining) 从左到右 ?.
18 new (无参数列表) 从右到左 new …
17 后置递增(运算符在后) n/a … ++
后置递减(运算符在后) … --
16 逻辑非 从右到左 ! …
按位非 ~ …
一元加法 + …
一元减法 - …
前置递增 ++ …
前置递减 -- …
typeof typeof …
void void …
delete delete …
await await …
15 从右到左 … ** …
14 乘法 从左到右 … * …
除法 … / …
取模 … % …
13 加法 从左到右 … + …
减法 … - …
12 按位左移 从左到右 … << …
按位右移 … >> …
无符号右移 … >>> …
11 小于 从左到右 … < …
小于等于 … <= …
大于 … > …
大于等于 … >= …
in … in …
instanceof … instanceof …
10 等号 从左到右 … == …
非等号 … != …
全等号 … === …
非全等号 … !== …
9 按位与 从左到右 … & …
8 按位异或 从左到右 … ^ …
7 按位或 从左到右 `… …`
6 逻辑与 从左到右 … && …
5 逻辑或 从左到右 `… …`
4 条件运算符 从右到左 … ? … : …
3 赋值 从右到左 … = …
… += …
… -= …
… *= …
… /= …
… %= …
… <<= …
… >>= …
… >>>= …
… &= …
… ^= …
`… = …`
2 yield 从右到左 yield …
yield* yield* …
1 展开运算符 n/a ...
0 逗号 从左到右 … , …