将继承分离为函数

Isolating the Inheritance into a Function

本文关键字：函数 分离 继承      更新时间：2023-09-26

http://jsbin.com/ifoguf/14/edit#javascript

我尝试将继承部分隔离到一个函数中，但当我创建对象时，不会发出任何警报，也不会返回任何错误，所以我不知道如何调试和寻找解决方案。

function Shape(){}
// augment prototype
Shape.prototype.name = 'shape';
Shape.prototype.toString = function() {return this.name;};
function TwoDShape(){}

// augment prototype
TwoDShape.prototype.name = '2D shape';

function Triangle(side, height) {
this.side = side;
this.height = height;
}

// augment prototype
Triangle.prototype.name = 'Triangle';
Triangle.prototype.getArea = function(){return this.side * this.height / 2;};


var myTriangle = new Triangle(5, 10);
function extend(Child, Parent) {
var F = function(){};
F.prototype = Parent.prototype;
Child.prototype = new F();
Child.prototype.constructor = Child;
Child.uber = Parent.prototype;
}

extend(TwoDShape, Shape);
extend(Triangle, TwoDShape);

var myTriangle = new Triangle(5, 10);

alert(myTriangle.getArea());
alert(myTriangle.toString());
var s = new Shape();
alert(s.name);

TIA

您的代码似乎有点复杂。请参阅一个更简单的示例(记得打开调试工具以查看日志消息(。

值得注意的是，JavaScript中的继承是通过遵循原型链来实现的。这意味着每个对象都有一个对原型对象的引用。这个原型对象也是任何普通的对象。关键是，每当在对象中找不到属性(或函数(时，就会检查其原型对象。这遵循原型链接，直到找到值或没有留下原型为止。

每当创建对象时，原型链接都存储在对象中，并指向对象的构造函数的prototype属性中指定的对象。您可以通过检查对象的__proto__属性来检查Firefox中的原型。

在链接的示例中，有3个构造函数：

  • 形状
  • 三角形
  • createPrototype(用于获取具有已定义原型链接的空对象的助手(

在链接的示例中，有两个原型对象：

  • Shape.prototype(包含形状的共享属性(
  • 三角形原型(包含三角形的共享属性(

首先，通过调用new Shape()来创建一个形状。这将创建一个新对象，因为new是在名为Shape的函数前面编写的。对象的原型链接(Firefox中的__proto__(指向Shape.prototype，因为构造函数的这个属性给出了原型链接的目标。链接是在对象实例化时设置的。

因此，每当您尝试访问shape的属性时，都会按如下方式检索该属性。首先，在shape中搜索该属性。如果有，就使用它。如果没有，就检索原型对象shape.__proto__，它引用了与Shape.prototype相同的对象。现在，在原型对象中搜索属性。

对于三角形的情况，事情有点复杂，因为涉及多个原型链接。重要的是，我们需要创建一个空对象来保存三角形的共享属性，该对象还需要将其原型链接设置为指向Shape.prototype。这使得形状的原型成为三角形原型的后备
它由包含createPrototype的匿名函数归档。它需要包含在内，因为对匿名函数的每次调用都需要操作构造函数的prototype属性(在本例中称为createPrototype(。创建了带有原型链的空原型对象后，它会立即返回并分配给Triangle.prototype。之后，new Triangle()创建的任何对象都具有所需的原型链。

设置好后，我们可以将三角形的所有共享属性添加到刚刚创建的Triangle.prototype对象中。这通过重写paint和添加getArea来显示。注意，这种覆盖实际上是有效的，因为三角形的paint函数比形状的paint方法更早找到，并且使用了第一个找到的引用/属性。

总之，对对象的所有属性访问都使用原型链进行回退。在我们的情况下，shape的链是shape→CCD_ 25，用于CCD_ 26的是CCD_→Triangle.prototype→CCD_ 29。

您可能希望为匿名函数(包括createPrototype(指定一个名称，以便拥有一个用于创建对象层次结构的工具。这显示在更新的示例中，并最终得到以下帮助：

function makePrototype(parent){
    // We need a new object whose prototype link points to parent.prototype
    function createPrototype(){
    }
    createPrototype.prototype = parent.prototype;
    return new createPrototype();
}
相关文章：