我正在创建两个对象(继承)，它们都继承自 Base。 第二个对象的属性分配覆盖第一个对象中的值。

有什么想法吗？如何进行适当的继承，以便基类将包含其继承后代的公共(public)成员，但后代可以在不相互干扰的情况下分配自己的值。

var testParams1 = { title: "john" };
var testParams2 = { title: "mike" };

Function.prototype.inheritsFrom = function (baseClass)
{
    this.prototype = new baseClass;
    this.prototype.constructor = this;
    this.prototype.base = baseClass.prototype;
    return this;
};

function Base() {
    this.viewModel = {};
    this.viewModel.title = (function ()
    {
        var savedVal = "";
        return function (newVal)
        {
            if (typeof (newVal) === "undefined")
            {
                return savedVal;
            }
            savedVal = newVal;
        };
    })();
}
function Inherits(params) {
    this.viewModel.title(params.title);
}

Inherits.inheritsFrom(Base);

///// preparing code:
var testObj1 = new Inherits(testParams1);
var testObj2 = new Inherits(testParams2);

///// testing code:
equals(testObj1.viewModel.title(), testParams1.title, "first instance ok"); // returns "john"
equals(testObj2.viewModel.title(), testParams2.title, "second instance ok");  // also returns "john"

最佳答案

问题

• Base 类构造函数被调用一次且仅调用一次。
  this.prototype = new baseClass;
• 特权方法将跨实例引用相同的 this 对象，因为这些方法是在构造函数中创建的(仅调用一次)。

基于个人意见的问题

• 如果您计划使用不属于您的 JavaScript，您应该尽量避免修改 native 原型(prototype)(即 Function.prototype)。

解决方案

• 为创建的每个新实例调用构造函数和父构造函数。
• 继承父原型(prototype)链(不是父类的实例)。
• 在原型(prototype)链中创建的实例数量与调用构造函数的数量保持 1:1 的比例。

Max问题的最终解

请特别注意 inherits 函数和 ParentClass.call(this, title); 行。 要查找的构造函数是 ParentClass 和 ChildClass

/**
 * Allows a child constructor to safely inherit the parent constructors prototype chain.
 * @type {Function}
 * @param {!Function} childConstructor
 * @param {!Function} parentConstructor
 */
function inherits(childConstructor, parentConstructor){
    var TempConstructor = function(){};
    TempConstructor.prototype = parentConstructor.prototype; // Inherit parent prototype chain

    childConstructor.prototype = new TempConstructor(); // Create buffer object to prevent assignments directly to parent prototype reference.
    childConstructor.prototype.constructor = childConstructor; // Reset the constructor property back the the child constructor
};

//////////////////////////////////////
/** @constructor */
function ParentClass(title) {
    this.setTitle(title);

    var randId_ = Math.random();
    /** @return {number} */
    this.getPrivlegedRandId = function()
        {return randId_;};
};

/** @return {string} */
ParentClass.prototype.getTitle = function()
    {return this.title_;};

/** @param {string} value */
ParentClass.prototype.setTitle = function(value)
    {this.title_ = value;};

//////////////////////////////////////    
/**
 * @constructor
 * @param {string} title
 * @param {string} name 
 */
ChildClass = function (name, title) {
    ParentClass.call(this, title); // Call the parent class constructor with the required arguments

    this.setName(name);
}
inherits(ChildClass, ParentClass); // Inherit the parent class prototype chain.

/** @return {string} */
ChildClass.prototype.getName = function()
    {return this.name_;};

 /** @param {string} value */
ChildClass.prototype.setName = function(value)
    {this.name_ = value;};

进入兔子洞

对于那些好奇为什么它有效而不是简单地记住 inherits 函数的人。

如何使用原型(prototype)链解析属性

当在实例级别找不到属性时，JavaScript 将尝试通过搜索实例构造函数原型(prototype)链来解析丢失的属性。如果在第一个原型(prototype)对象中没有找到该属性，它将搜索父原型(prototype)对象，依此类推，一直搜索到 Object.prototype。如果在 Object.prototype 中找不到它，则会抛出错误。

从子构造函数调用父构造函数:尝试 #1

// Bad
var ChildConstructor = function(arg1, arg2, arg3){
    var that = new ParentConstructor(this, arg1, arg2, arg3);
    that.getArg1 = function(){return arg1};
    return that;
}

任何使用 new ChildConstructor 创建的变量都将返回 ParentConstructor 的实例。 ChildConstructor.prototype 将不会被使用。

从子构造函数调用父构造函数:尝试#2

// Good
var ChildConstructor = function(arg1, arg2, arg3){
    ParentConstructor.call(this, arg1, arg2, arg3);
}

现在构造函数和父构造函数被正确调用。但是，只有在构造函数中定义的方法才会存在。不会使用父原型(prototype)上的属性，因为它们尚未链接到子构造函数原型(prototype)。

继承父原型(prototype):尝试 #1

// Bad
ChildConstructor.prototype = new ParentConstructor();

根据是否使用 ParentConstructor.call(this)，父构造函数将只被调用一次或多次。

继承父原型(prototype)尝试 #2

// Bad
ChildConstructor.prototype = ParentConstructor.prototype;

尽管这在技术上是可行的，但对 ChildConstructor.prototype 的任何赋值也将被赋值给 ParentConstructor.prototype，因为对象是通过引用传递的，而不是通过复制传递的。

继承父原型(prototype)尝试#3

// Almost there
var TempConstructor = function(){};
TempConstructor.prototype = ParentConstructor.prototype;
ChildConstructor.prototype = new TempConstructor();

这允许您将属性分配给 ChildConstructor.prototype，因为它是一个临时匿名函数的实例。 在 TempConstructor 的实例上找不到的属性随后将检查其属性的原型(prototype)链，因此您已成功继承父原型(prototype)。唯一的问题是 ChildConstructor.prototype.constructor 现在指向 TempConstructor。

继承父原型(prototype)尝试#4

// Good
var TempConstructor = function(){};
TempConstructor.prototype = ParentConstructor.prototype;
ChildConstructor.prototype = new TempConstructor();
ChildConstructor.prototype.constructor = ChildConstructor;

齐心协力

var ParentConstructor = function(){
};


var ChildConstructor = function(){
    ParentConstructor.call(this)
};

var TempConstructor = function(){};
TempConstructor.prototype = ParentConstructor.prototype;
ChildConstructor.prototype = new TempConstructor();
ChildConstructor.prototype.constructor = ChildConstructor;

你已经成功继承了父类!让我们看看是否可以做得更好。

继承函数

function inherits(childConstructor, parentConstructor){
    var TempConstructor = function(){};
    TempConstructor.prototype = parentConstructor.prototype; // Inherit parent prototype chain

    childConstructor.prototype = new TempConstructor(); // Create buffer object to prevent assignments directly to parent prototype reference.
    childConstructor.prototype.constructor = childConstructor; // Reset the constructor property back the the child constructor (currently set to TempConstructor )
};


var ParentConstructor = function(){
};


var ChildConstructor = function(){
    ParentConstructor.call(this)
};
inherits(ChildConstructor, ParentConstructor);

关于Javascript 原型(prototype)继承——后代相互覆盖，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/14564155/