javascript伪经典继承与原型继承示例混淆

Question

我真的不明白伪经典和原型继承之间的区别。看看下面的代码 sn-p。

原型：我能够理解这段代码（Douglas Crockford）。我有 更改了类名并添加了实现以便更好地理解，因为他的代码块在presentaiton中不完整。

var baseObject = {
    a : "old",
    firstMethod: function () {alert("First method");},
    secondMethod: function () {alert("Second method");}
};
var derivedObject = Object(baseObject);
alert(derivedObject.a);

derivedObject.thirdMethod = function () {alert("Third method");};
var derivedChildObject = Object(derivedObject);

derivedChildObject.firstMethod();
derivedChildObject.secondMethod();
derivedChildObject.thirdMethod();

伪经典：

由于方法不完整，我在他的演示文稿中没有从相同的代码 sn-p 中获得清晰，我去了互联网上的其他链接

http://javascript.info/tutorial/pseudo-classical-pattern

function Animal(name) {
  this.name = name
}

Animal.prototype = {
  canWalk: true,
  sit: function() {
    this.canWalk = false
    alert(this.name + ' sits down.')
  }
}

var animal = new Animal('Pet') // (1)

alert(animal.canWalk) // true

animal.sit()             // (2)

alert(animal.canWalk) // false

伪类的方案：

方法和默认属性在原型中。 原型中的方法使用 this ，它是当前对象，因为 this 的值只取决于调用上下文，所以 animal.sit() 会将 this 设置为 animal。

你能帮我提供正确的例子吗？您可以将 - Animal 用例或 baseObject 用例作为参考或提出您自己的示例

Answer 1

这是一个原型继承的例子

var Mammal = function() {
   this.isMammal = true;
};

var Cat = function() {
   this.meow = function() {
      alert('Cat says: MEOW!');
   };
};

Cat.prototype = new Mammal();
Cat.prototype.constructor = Cat;

var kitty = new Cat();
if(kitty.isMammal) {...}       // evaluates to true
kitty.meow();

原型继承是通过将原型重新分配给基类的实例来实现的。这将导致原型链总是以 Object.prototype 结尾

如果您正在寻找方法或成员，则从实例开始，然后沿着原型链向下走，直到找到方法/成员（或者您没有找到）。

我们示例中的 toString() 和 kitty 示例：

kitty.toString();

1. kitty instance doesn't have toString() method
2. Cat.prototype doesn't have toString() method
3. Mammal.prototype doesn't have toString() method
4. Object.prototype has toString() method, which will be called in the context of kitty

Answer 2

您在对象原型级别定义canwalk 属性，这就是为什么在您实例化对象时您会在警报(animal.canWalk) 上得到true。在第二个警报中您收到false 的原因是同时您调用了将canWalk 设置为false 的sit 函数。

这就是为什么严格遵循原型继承模式并不是很好的做法：通常，实例希望拥有自己的所有属性副本。这就是为什么原型模式很少单独使用的原因。

最推荐的是使用寄生组合继承：

组合继承是 JavaScript 中最常用的继承模式，尽管它并非没有效率低下。该模式最低效的部分是超类型构造函数总是被调用两次：一次是创建子类型的原型，一次是在子类型构造函数内部。

本质上，子类型原型以超类型对象的所有实例属性结束，只是在子类型构造函数执行时被覆盖。

function SuperType(name){
    this.name = name;
    this.colors = ["red", "blue", "green"];
}

SuperType.prototype.sayName = function(){
    alert(this.name);
};

function SubType(name, age){
    SuperType.call(this, name); //second call to SuperType()

    this.age = age;
}

SubType.prototype = new SuperType(); //first call to SuperType()
SubType.prototype.constructor = SubType;
SubType.prototype.sayAge = function(){
    alert(this.age);
};

为了克服超类型构造函数总是被调用两次的问题，我们可以使用以下技巧进行调整：我们不需要调用超类型构造函数来分配子类型的原型，而只需要一个超类型原型的副本：

function inheritPrototype(subType, superType){
    var prototype = object(superType.prototype); //create object
    prototype.constructor = subType; //augment object
    subType.prototype = prototype; //assign object
}

那么我们可以替换：

SubType.prototype = new SuperType(); //first call to SuperType()
SubType.prototype.constructor = SubType;

与

inheritPrototype(SubType, SuperType);

伪经典继承：

使用此模式，您可以定义对象级别的属性和对象原型级别的方法：

function SuperType(name){
    this.name = name;
    this.colors = ["red", "blue", "green"];
}

SuperType.prototype = {
    constructor: SuperType,
    sayName : function() {
        alert(this.name);
    }
}

如果在实例化调用instanceof 的对象时没有将构造函数指向SuperType，Object 和SuperType 仍然返回true，但构造函数属性现在等于Object的SuperType。

var superType = new SuperType();
alert(superType instanceof Object); //true
alert(superType instanceof SuperType); //true
alert(superType.constructor == Person); //false
alert(superType.constructor == SuperType); //true

继承示例：

function SuperType() {
    this.property = true;
}

SuperType.prototype.getSuperValue = function() {
    return this.property;
};

function SubType() {
    this.subproperty = false;
}

//inherit from SuperType
SubType.prototype = new SuperType();

SubType.prototype.getSubValue = function () {
    return this.subproperty;
};

//override existing method
SubType.prototype.getSuperValue = function () {
    return false;
};

这里有两个关于 Javascript 继承的非常有力的参考：

http://addyosmani.com/resources/essentialjsdesignpatterns/book/ http://www.allitebooks.com/professional-javascript-for-web-developers-3rd-edition/