你真的了解 JavaScript 里的 new 了吗？

发布于 2021-11-23 12:43:39 字数 4061 浏览 1098 评论 0

今天就来说一说这个 new。关于 JavaScript 的 new 关键字的内容上网搜一搜还真不少，大家都说 new 干了3件事：

创建一个空对象
将空对象的 __proto__ 指向构造函数的 prototype
使用空对象作为上下文调用构造函数

文字比较难懂，翻译成 JavaScript：

function Base() {
    this.str = "aa";
}

// new Base()干了下面的事
var obj  = {};
obj.__proto__ = Base.prototype;
Base.call(obj);

想想是这么回事哈，那就赶快试试：

var b = new Base();
console.dir(b); // Base {str: 'aa', __proto__: Base}

好像是正确的，但是真的正确吗？

真的就 3 件事？

每个对象都有一个 constructor 属性，那么我们来试试看 new 出来的实例的 constructor 是什么吧。

console.dir(b.constructor); // [Function: Base]

可以看出实例b的 constructor 属性就是 Base，那么我们可以猜测 new 是不是至少还做了第4件事：

b.constructor = Base;

以上结果看似正确，下面我们进行一点修改，这里我们修改掉原型的constructor属性：

Base.prototype.constructor = function Other(){ };
var b = new Base();
console.dir(b.constructor); // [Function: Other]

情况就不一样了，可以看出，之前的猜测是错误的，第4件事应该是这样的：

b.constructor = Base.prototype.constructor;

这里犯了一个错误，那就是没有理解好这个constructor的实质：当我们创建一个函数时，会自动生成对应的原型，这个原型包含一个constructor属性，使用new构造的实例，可以通过原型链查找到constructor。如下图所示：

如果构造函数有返回值呢？

一般情况下构造函数没有返回值，但是我们依旧可以得到该对象的实例；如果构造函数有返回值，凭直觉来说情况应该会不一样。我们对于之前的构造函数进行一点点修改：

function Base() {}
var b = new Base();
console.dir(b); // { str: 'aa'}
function Base() {
}
var b = new Base();
console.dir(b); // [1] or {a: 1}
// new Base();

// 1.创建一个空对象 obj
var obj = {};
// 2.设置obj的__proto__为原型
obj.__proto__ = Base.prototype;
// 3.使用obj作为上下文调用Base函数
var ret = Base.call(obj);
// 4.如果构造函数返回的是原始值，那么这个返回值会被忽略，如果返回的是对象，就会覆盖构造的实例
if(typeof ret == 'object'){
} else {
}
function F(){ }
F.prototype.fa1 = "fa1";

console.log(F.fa1);       // undefined
console.log(new F().fa1); // fa1
function foo(){   
  // 如果忘了使用关键字，这一步骤会悄悄帮你修复这个问题
  if ( !(this instanceof foo) )
  // 构造函数的逻辑继续……
}

可以看出new并不是一个很好的实践，道格拉斯将这个问题描述为：

This indirection was intended to make the language seem more familiar to classically trained programmers, but failed to do that, as we can see from the very low opinion Java programmers have of JavaScript. JavaScript’s constructor pattern did not appeal to the classical crowd. It also obscured JavaScript’s true prototypal nature. As a result, there are very few programmers who know how to use the language effectively.

简单来说，JavaScript是一种prototypical类型语言，在创建之初，是为了迎合市场的需要，让人们觉得它和Java是类似的，才引入了 new 关键字。JavaScript 本应通过它的 Prototypical 特性来实现实例化和继承，但 new 关键字让它变得不伦不类。