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

问题描述

考虑以下代码.

function a() {}函数 b() {}函数 c() {}b.prototype = new a();c.prototype = new b();console.log((new a()).constructor);//一个()console.log((new b()).constructor);//一个()console.log((new c()).constructor);//一个()

• 为什么没有为 b 和 c 更新构造函数?
• 我是否在继承错误?
• 更新构造函数的最佳方法是什么?

此外，请考虑以下事项.

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

• 鉴于 (new c()).constructor 等于 a() 和 Object.getPrototypeOf(new c())是 a{ }，instanceof 怎么可能知道 new c() 是 c 的一个实例>?

<块引用>

上的解释，它只需执行以下操作:

function instanceOf(object, constructor) {而(对象！= null){if (object == constructor.prototype) {//object is instanceof constructor返回真；} else if (typeof object == 'xml') {//XML 对象的解决方法返回constructor.prototype == XML.prototype;}object = object.__proto__;//遍历原型链}返回假；//对象不是构造函数的实例}

简单地说，如果Foo继承自Bar，那么Foo实例的原型链为:

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 函数简单地遍历实例对象(第一个操作数)的原型链，并将每个对象的内部[[proto]] 属性与<构造函数(第二个操作数)的 code>prototype 属性.如果匹配，则返回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屋！