深刻理解javascript new的机制

咱们在使用对象的时候,除了一些浏览器内置的单体对象能够直接使用外,都会new一个出来使用。编程

1.最简单的莫过于以下获取一个Object对象实例浏览器

var obj = new Object();

说明:此时的new关键字干了最有用的一件事就是,继承了全部Object.prototype上的方法,这个能够去查看一下es5的参考资料中Object.prototype的方法列表。也就是说此时的obj对象能够使用全部继承而来的方法了!函数

2.然而是构造函数模式让咱们对new有了一个深刻的了解!this

function Person(name,age){
    this.name = name;
    this.age = age;
    this.sayName = function(){
        console.log(this.name);
    }
}
var person1 = new Person("wang",23);
var person2 = new Person("jiang",24);
var person3 = new Person;//当不传参数的时候

咱们很容易知道构造函数使得每一个实例都独自获取了一份属性和方法。可是这是怎么实现出来的呢?es5

new过程当中发生了什么?spa

1).建立一个对象。prototype

2).将构造函数的做用域赋给新对象(所以this就指向了新对象)code

3).执行构造函数中的代码(为新对象添加属性)对象

4).返回新对象blog

值得注意的是它们的继承关系是:person1/person2/person3继承于Person,而Person继承于Object(一切对象皆继承于Object)

若是理解了上面的东西,在一些简单编程中遇到new,基本也够了。

下面继续继续介绍一些有关new的话题

3.模块模式(Moudle模式),下面讲解一个最简单的模块模式例子

var Calculator = function (eq) {
    //这里能够声明私有成员
    var name = 2;
    var eqCtl = document.getElementById(eq);

    return {
        // 暴露公开的成员
        name : name,
        add: function (x, y) {
            var val = x + y;
            eqCtl.innerHTML = val;
        }
    };
};
var c1 = new Calculator('eq');
var c2 = new Calculator('la');
c1.name = 3;//c1的name属性改变了却不会影响c2的name属性
console.log(c1);
console.log(c2);
c1.add(2, 2);

值得注意的是,在Calculator这个构造函数中返回了一个对象!

说明:若是构造函数中返回了一个对象,(第4步)那么new出来的对象将会被返回的对象覆盖。模块模式的结果是c1和c2都从返回的对象copy了一份属性和方法,它们之间互不影响。

继承关系也变了,c1和c2都直接继承于Object

相关文章
相关标签/搜索