FED

©FrontEndDev.org
2015 - 2024
web@2.22.0 api@2.20.0

你真的了解 javascript 里的 new 了吗

今天就来说一说这个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。如下图所示:

img.png

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

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

function Base() {
œ5mHab49NVH201505082251259384209223721431096685938œœR23EslTcjm201505082251259384209755911431096685938œœYf9ISHTCmQ201505082251259384210275521431096685939œœqf0PXpkgl7201505082251259394210644581431096685939œ}
var b = new Base();
console.dir(b); // { str: 'aa'}
œvi5ZY0LffG201505082251259384206601981431096685938œ
function Base() {
œoiab01hH4Y201505082251259394210893451431096685939œœI68POgphC0201505082251259394211138151431096685939œœ7C2M1pQ6j9201505082251259394211364241431096685939œ}
var b = new Base();
console.dir(b); // [1] or {a: 1}
œJ5WZBfdrc3201505082251259384206841061431096685938œ
// 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'){
œsdcHg6WwgI201505082251259394211552031431096685939œ} else {
œarQYwVmpko201505082251259394211741041431096685939œ}
œdJMw0FjzKB201505082251259384207071531431096685938œ
function F(){ }
F.prototype.fa1 = "fa1";

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

可以看出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关键字让它变得不伦不类。

再说一点关于constructor的

虽然使用new创建新对象的时候用讨论了这个constructor属性,但是这个属性似乎并没有什么用,也许设置这个属性就是一种习惯,能够让其他人直观理解对象之间的关系。

欢迎光临小弟博客:Superlin's Blog
我的博客原文:你真的弄明白new了吗

参考