理解js中的new

如果在一个函数前面带上new来调用该函数,那么将创建一个隐藏连接到该函数的prototype成员的新对象,同时this将被绑定到那个新对象上。

new的过程

var Person = function(){};
var p = new Person();

new的过程拆分成以下三步:

  1. var p={}; 也就是说,初始化一个对象p
  2. p.proto = Person.prototype;
  3. Person.call(p); 也就是说构造p,也可以称之为初始化p

prototype和__proto__的概念

prototype是函数的内置属性,__proto__是对象的内置属性。

prototype是函数的一个属性,这个属性是一个指针,指向一个对象。它是显示修改对象的原型的属性。

上例子中:

p.__proto__ === Person.prototype  // true

示例

var Person = function(){};
Person.prototype.sayName = function() {
    alert("My Name is Jacky");
};

Person.prototype.age = 27;
var p = new Person();
p.sayName();

p是一个引用指向Person的对象。我们在Person的原型上定义了一个sayName方法和age属性,当我们执行p.age时,会先在this的内部查找(也就是构造函数内部),如果没有找到然后再沿着原型链向上追溯。

这里的向上追溯是怎么向上的呢?这里就要使用__proto__属性来链接到原型(也就是Person.prototype)进行查找。最终在原型上找到了age属性。

  1. 如果就一个函数,没有返回值,没有prototype成员,然后使用new,会是什么结果呢?如果一个函数没有返回值,那么如果不使用new来创建变量,那么该变量的值为undefined.如果用了new,那么就是Object.说明一个函数的默认的Prototype是Object.

    function A(a) { this.a = a; this.b = b; } var a = new A(“abc”); var b = A(“abc”); console.log(a); // abc console.log(b); // undefined

  2. 如果函数有返回值,但是返回值是基本类型。那么new出来的a1还是object.因为基本类型的prototype还是Object. 而如果不使用new,那么返回值就是string的值。

    function B(a) { this.a = a; return this.a } var a1 = new B(“abc”); var b1 = B(“abc”); console.log(a1); // {a: “abc”} console.log(b1); // abc

  3. 如果函数的返回值为new出来的对象,那么c1的值根据new出来的对象的prototype而定。

    function C(a) { this.a = a; return new String(this.a); } var c1 = new C(“test”); console.log(c1); // object

  4. 接下来我们开始讨论new中的this。如果我们给E的prototype中加入一个方法叫s(),那么s()中的this指的就是这个新对象。能够得到在new时候赋予该对象的属性值

    var E = function(a) { this.a = a; }

    E.prototype.s = function () { return this.a; };

    var e = new E(“test2”); console.log(e.s()); //“test2”

    var F = function(a) { this.a = a; }

    F.prototype.s = function () { return this.a; };

    var f = F(“test2”); console.log(f);//undefined

  5. 如果我们修改了函数的prototype,又会发生什么样的情况呢? 那么就会发生类似继承的功能,其实就是js的伪类实现。

    var E = function(a) { this.a = a; }

    E.prototype.s = function () { return this.a; };

    var F = function(b) { this.b = b; }

    F.prototype = new E(“test1”);

    F.prototype.x = function () { return this.b; };

    var f = new F(“test2”);

    console.log(f); //object console.log(f.s()); //test1 console.log(f.x()); //test2