javascript - 关于 javascript 中原型(prototype)继承的困惑

Question

我想在构造函数上实现扩展方法，并使用它来初始化实例，例如:

var view_instance = View.extend()

所以我尝试了这个:

define(function (require, exports, module) {

    function View(size, color) {
        this.size = size;
        this.color = color;
    };

    View.prototype = {
        show: function () {
            console.log("This is view show");
        }
    }

    View.extend = function (props) {
        var tmp = new this("12", "red");
        console.log(this);
            console.log(tmp instanceof this) //true
        console.log(tmp.prototype); //undefined!
        return tmp
    }

    return View;
})

在上面的extend方法中，我通过new this()初始化了一个实例，但是我无法记录它的原型(prototype)，我检查了this 是对的。

那么我的代码有什么问题吗？为什么原型(prototype)消失了？我怎样才能做到正确？

Answer 1

你的代码没有任何问题。它做了它应该做的事情。 prototype属性仅存在于函数上。

当您在函数调用前加上 new 时关键字 JavaScript 创建一个继承自 prototype 的对象构造函数。

简单来说:

function F() {}                                        // we have a constructor
var o = new F;                                         // we create an instance
console.log(Object.getPrototypeOf(o) === F.prototype); // o inherits from
                                                       // F.prototype

JavaScript 中的对象通过委托(delegate)从其他对象继承。这意味着假设我们尝试访问对象 o 上的属性我们在上面看到的:

1. JavaScript 将首先尝试查找 o 上的属性本身。
2. 如果在 o 上找不到该属性然后它会尝试在 Object.getPrototypeOf(o) 上找到它(或者更简洁地说 o.__proto__ )。 o的原型(prototype)是 F.prototype .
3. 如果在 F.prototype 上找不到该属性然后它会尝试在 F.prototype.__proto__ 上找到它这是 Object.prototype .
4. 如果在 Object.prototype 上找不到该属性那么它就会放弃，因为 Object.prototype.__proto__是 null .

简而言之，这就是您的原型(prototype)继承。

您的代码记录的原因 undefined对于 tmp.prototype是因为tmp没有任何名为 prototype 的属性。只有函数有 prototype属性(property)。试试这个:

console.log(Object.getPrototypeOf(tmp));

上面的内容与下面的内容相同。然而__proto__对象的属性已被弃用。使用它需要您自担风险:

console.log(tmp.__proto__);

如果您想了解有关继承的更多信息，请阅读以下文章:

1. Aadit M Shah | Why Prototypal Inheritance Matters
2. JavaScript inheritance and the constructor property - Stack Overflow