Javascript原型化继承和对象属性

javascript prototyped inheritance and object properties

本文关键字：对象 属性 继承 原型 Javascript      更新时间：2023-09-26

我试图将原型继承应用于Javascript中的函数。这一切都很简单，甚至在维基百科的javascript引理中也有描述。它工作，如果我的属性是简单的javascript类型:

function Person() {
    this.age = 0;
    this.location = {
        x: 0,
        y: 0,
        absolute: false
    };
};
function Employee() {};
Employee.prototype = new Person();
Employee.prototype.celebrate = function () {
    this.age++;
}
var pete = new Employee();
pete.age = 5;
pete.celebrate();
var bob = new Employee();
bob.celebrate();
console.log("bob is " + bob.age + " pete is " + pete.age);

对于Employee.prototype = new Person();，所有Person的属性和(原型化的)方法都由Employee继承，这是继承的基础。

按预期工作:bob is 1 pete is 6

现在我开始摆弄pete的位置(庆祝之后)

pete.celebrate();
pete.location.absolute=true;

显示bob.location.absolute显示:true，这是违反直觉的(我没有触摸bob的位置，所以我希望它具有在Person中声明的初始值)，并且破坏了我的解决方案。

在我最初的理解中这应该是错误的。我确实意识到我可能应该从最初的Person克隆location对象，但我不确定在哪里或如何做到这一点。如果有更好的继承技术呢?

实例化新Employee时，复制Person的所有属性。由于这是一个浅拷贝，pete和bob共享同一个location对象。对于你的问题，似乎没有一个很好的解决办法。你既可以使用框架，也可以像这样做:

function Employee() { Person.apply(this); };

在This对象的上下文中调用Person构造函数。

MDC对此有更多信息:https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Function/apply

继承时不要运行Person构造函数，Employee不应该运行甚至没有.location，因为它不在Person.prototype中。

function createObject( fn ){
    function f(){}
    f.prototype = fn.prototype;
    return new f;
}

: 

Employee.prototype = createObject( Person );

这将正确继承，没有副作用(运行构造函数)。

你只能在子构造函数中运行父构造函数:

function Employee() {
Person.apply( this, arguments );
}

我遇到了类似的问题。最后，我为内部对象使用了一个单独的构造函数。

function engine(cc, fuel) {
       this.cc = cc; 
       this.fuel = fuel
}
function car(type, model, cc, fuel) {
       this.type = type; 
       this.model = model;
       this.engine = new engine(cc, fuel);
}

var mycar = new car("sedan", "toyota corolla", 1500, "gas");
console.log(mycar.type);
//sedan
console.log(mycar.engine.cc);
//1500

如果我有任何关于"引擎"或"汽车"构造器原型的方法，它们仍然是可用的。但是，我并没有从OOP意义上的"引擎"类派生出"汽车"类。我不需要。"发动机"被用作"汽车"的一个部件。

同时，对于继承，我更喜欢使用ECMAScript 5中包含的新方法，这意味着使用Object。create、Object.defineProperties等。即使在IE9中也支持它们。在此之前，我使用了Kosta建议的相同的"apply()"方法。

相关文章：