理解JS中的new

Author : lovecicy

上个月居然一篇文章都没发,罪过罪过,先补上一篇。

先来两句玩笑话:

JavaScript和Java的关系就好像雷锋和雷峰塔的关系
我对JavaScript既爱又恨,它的优秀之处并非原创,它的原创之处并不优秀…… Brendan Eich

先来理解下第一句话:JS不是一门面向对象的语言,它是一种弱类型的脚本语言。但是它却采用了面向对象的思想,使用了new这个关键字。

第二句话,纯属好玩 ~(≧▽≦)/~

好吧,言归正传,我们来聊一聊new的时候,到底发生了什么。先来看看下面这段代码:

var obj = new Base();

总结来说,可以分为三个步奏,如下所示:

var obj  = {};
obj.__proto__ = Base.prototype;
Base.call(obj);

1. 创建一个空对象

首先,JS会创建一个空对象,将我们的变量指向这个空对象。这一步很简单,也很容易理解。

2. 修改proto属性

接着,将新对象的__proto__属性指向构造方法的prototype属性。这样,就可以通过原型链的方式访问原型对象中的属性和方法了。如果构造方法的prototype属性不是对象,那么就用Object.prototype对象替代。

3. 执行构造函数

最后一步,执行构造函数即Base()方法,并通过.call()方法,将新的对象传入,作为构造函数的this对象。在这一步,正常情况下,构造函数要么返回this,要么返回原始类型,要么不返回,这样,新建的对象被返回,赋值给obj变量,顺利运行结束。

但是,如果在构造函数里面,如果return的是其他对象,那么,返回的就不是我们新建的对象了,而是我们返回的那个值,呵呵,要注意哦。

standard

Have your say