JavaScript继承和构造函数属性 [英] JavaScript inheritance and the constructor property

问题描述

请考虑以下代码。

  function a（）{} 
 function b（）{} 
 function c（）{} 
 
 b.prototype = new a（）; 
 c.prototype = new b（）; 
 
 console.log（（new a（））。constructor）; // a（）
 console.log（（new b（））。constructor）; // a（）
 console.log（（new c（））。constructor） // a（）
  

• 为b没有更新构造函数


• 更新构造函数的最佳方法是什么？

此外，请考虑以下方面。

  console.log a（）instanceof a）; // true 
 console.log（new b（）instanceof b）; // true 
 console.log（new c（）i​​nstanceof c）; // true 
  

• （））。构造函数等于 a（）和 Object.getPrototypeOf（new c（））是 a {} ，如何可能 instanceof 知道 new c（）是 c ？
的实例

中的说明，它只是做以下：

  function instanceOf（object，constructor）{
 while（object！= null）{ 
 if（object == constructor.prototype）{// object is instanceof constructor 
 return true; 
} else if（typeof object =='xml'）{// XML对象的解决方法
 return constructor.prototype == XML.prototype; 
} 
 object = object .__ proto__; //遍历原型链
} 
 return false; // object is not instanceof constructor 
} 
  

c> Foo 继承 Bar ，那么 Foo 实例的原型链be：

1. foo .__ proto__ === Foo.prototype


2. foo .__ proto __.__ proto__ === Bar.prototype


3. foo。 __proto __.__ proto __.__ proto__ === Object.prototype


4. foo .__ proto __.__ proto __.__ proto __.__ proto__ === null



可以看到，每个对象都继承自 Object 构造函数。当内部 [[proto]] 属性指向 null 时，原型链结束。

instanceof 函数简单地遍历实例对象的原型链（第一个操作数），并将内部 [[ （第二个操作数）的原型属性中的每个对象的属性。如果它们匹配，则返回 true ;如果原型链结束，则返回 false 。

Consider the following code.

function a() {}
function b() {}
function c() {}

b.prototype = new a();
c.prototype = new b();

console.log((new a()).constructor); //a()
console.log((new b()).constructor); //a()
console.log((new c()).constructor); //a()

• Why isn't the constructor updated for b and c?
• Am I doing inheritance wrong?
• What is the best way to update the constructor?

Further, please consider the following.

console.log(new a() instanceof a); //true
console.log(new b() instanceof b); //true
console.log(new c() instanceof c); //true

• Given that (new c()).constructor is equal to a() and Object.getPrototypeOf(new c()) is a{ }, how is it possible for instanceof to know that new c() is an instance of c?

http://jsfiddle.net/ezZr5/

解决方案

Okay, let's play a little mind game:

From the above image we can see:

1. When we create a function like function Foo() {}, JavaScript creates a Function instance.
2. Every Function instance (the constructor function) has a property prototype which is a pointer.
3. The prototype property of the constructor function points to its prototype object.
4. The prototype object has a property constructor which is also a pointer.
5. The constructor property of the prototype object points back to its constructor function.
6. When we create a new instance of Foo like new Foo(), JavaScript creates a new object.
7. The internal [[proto]] property of the instance points to the prototype of the constructor.

Now, the question arises that why doesn't JavaScript attach the constructor property to the instance object instead of the prototype. Consider:

function defclass(prototype) {
    var constructor = prototype.constructor;
    constructor.prototype = prototype;
    return constructor;
}

var Square = defclass({
    constructor: function (side) {
        this.side = side;
    },
    area: function () {
        return this.side * this.side;
    }
});

var square = new Square(10);

alert(square.area()); // 100

As you can see the constructor property is just another method of the prototype, like area in the example above. What makes the constructor property special is that it's used to initialize an instance of the prototype. Otherwise it's exactly the same as any other method of the prototype.

Defining the constructor property on the prototype is advantageous for the following reasons:

1. It's logically correct. For example consider Object.prototype. The constructor property of Object.prototype points to Object. If the constructor property was defined on the instance then Object.prototype.constructor would be undefined because Object.prototype is an instance of null.
2. It's treated no differently from other prototype methods. This makes the job of new easier since it doesn't need to define the constructor property on every instance.
3. Every instance shares the same constructor property. Hence it's efficient.

Now when we talk about inheritance, we have the following scenario:

From the above image we can see:

1. The derived constructor's prototype property is set to the instance of the base constructor.
2. Hence the internal [[proto]] property of the instance of the derived constructor points to it too.
3. Thus the constructor property of the derived constructor instance now points to the base constructor.

As for the instanceof operator, contrary to popular belief it doesn't depend on the constructor property of the instance. As we can see from above, that would lead to erroneous results.

The instanceof operator is a binary operator (it has two operands). It operates on an instance object and a constructor function. As explain on Mozilla Developer Network, it simply does the following:

function instanceOf(object, constructor) {
    while (object != null) {
        if (object == constructor.prototype) { //object is instanceof constructor
            return true;
        } else if (typeof object == 'xml') { //workaround for XML objects
            return constructor.prototype == XML.prototype;
        }
        object = object.__proto__; //traverse the prototype chain
    }
    return false; //object is not instanceof constructor
}

To put it simply if Foo inherits from Bar, then the prototype chain for the instance of Foo would be:

1. foo.__proto__ === Foo.prototype
2. foo.__proto__.__proto__ === Bar.prototype
3. foo.__proto__.__proto__.__proto__ === Object.prototype
4. foo.__proto__.__proto__.__proto__.__proto__ === null

As you can see, every object inherits from the Object constructor. The prototype chain ends when an internal [[proto]] property points to null.

The instanceof function simply traverses the prototype chain of the instance object (the first operand) and compares the internal [[proto]] property of each object to the prototype property of the constructor function (the second operand). If they match, it returns true; and else if the prototype chain ends, it returns false.

这篇关于JavaScript继承和构造函数属性的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！