Javascript 继承:调用超级构造函数还是使用原型链?

IT技术 javascript inheritance call chaining prototype-programming
2021-01-22 04:41:16

最近我读到 MDC 中的 JavaScript 调用用法

https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Function/call

下面显示的示例的一个链接,我仍然不明白。

为什么他们在这里像这样使用继承

Prod_dept.prototype = new Product();

这是必要的吗?因为里面有超构造函数的调用

Prod_dept()

反正像这样

Product.call

这只是出于常见行为吗?什么时候用调用超级构造函数好还是用原型链好?

function Product(name, value){
  this.name = name;
  if(value >= 1000)
    this.value = 999;
  else
    this.value = value;
}

function Prod_dept(name, value, dept){
  this.dept = dept;
  Product.call(this, name, value);
}

Prod_dept.prototype = new Product();

// since 5 is less than 1000, value is set
cheese = new Prod_dept("feta", 5, "food");

// since 5000 is above 1000, value will be 999
car = new Prod_dept("honda", 5000, "auto");

谢谢你让事情更清楚

3个回答

真正问题的答案是您需要同时执行以下两项操作:

  • 将原型设置为父对象的实例会初始化原型链(继承),这只进行一次(因为原型对象是共享的)。
  • 调用父的构造函数初始化对象本身,这是在每次实例化时完成的(每次构造它时都可以传递不同的参数)。

因此,在设置继承时不应调用父级的构造函数。仅当实例化从另一个继承的对象时。

Chris Morgan 的回答几乎是完整的,缺少一个小细节(构造函数属性)。让我建议一种设置继承的方法。

function extend(base, sub) {
  // Avoid instantiating the base class just to setup inheritance
  // Also, do a recursive merge of two prototypes, so we don't overwrite 
  // the existing prototype, but still maintain the inheritance chain
  // Thanks to @ccnokes
  var origProto = sub.prototype;
  sub.prototype = Object.create(base.prototype);
  for (var key in origProto)  {
     sub.prototype[key] = origProto[key];
  }
  // The constructor property was set wrong, let's fix it
  Object.defineProperty(sub.prototype, 'constructor', { 
    enumerable: false, 
    value: sub 
  });
}

// Let's try this
function Animal(name) {
  this.name = name;
}

Animal.prototype = {
  sayMyName: function() {
    console.log(this.getWordsToSay() + " " + this.name);
  },
  getWordsToSay: function() {
    // Abstract
  }
}

function Dog(name) {
  // Call the parent's constructor
  Animal.call(this, name);
}

Dog.prototype = {
    getWordsToSay: function(){
      return "Ruff Ruff";
    }
}    

// Setup the prototype chain the right way
extend(Animal, Dog);

// Here is where the Dog (and Animal) constructors are called
var dog = new Dog("Lassie");
dog.sayMyName(); // Outputs Ruff Ruff Lassie
console.log(dog instanceof Animal); // true
console.log(dog.constructor); // Dog

有关创建类时的更多语法糖,请参阅我的博客文章。http://js-bits.blogspot.com/2010/08/javascript-inheritance-done-right.html

从 Ext-JS 和http://www.uselesspickles.com/class_library/复制的技术以及来自https://stackoverflow.com/users/1397311/ccnokes的评论

@elad.chen 我在答案中描述的方法链接原型,mixin 通常将所有属性复制到实例,而不是原型。参见stackoverflow.com/questions/7506210/...
2021-03-27 04:41:16
在 EcmaScript5+(所有现代浏览器)中,如果您像这样定义它,则可以使其不可枚举Object.defineProperty(sub.protoype, 'constructor', { enumerable: false, value: sub }); 这样您将获得与 javascript 创建函数的新实例时完全相同的“行为”(构造函数设置为可枚举=false 自动)
2021-04-07 04:41:16
你不能把扩展方法简化为两行吗?即: sub.prototype = Object.create(base.prototype); sub.prototype.constructor = sub;
2021-04-08 04:41:16
因此,如果我只想向子对象及其实例添加方法,在这种情况下为“Dog”对象,您是否会像这样在扩展函数中合并两个原型:jsfiddle.net/ccnokes/75f9P
2021-04-08 04:41:16
@Steve 是的,你可以,当我第一次写这篇文章时,Object.create并没有得到很好的支持......更新它。请注意,大多数Object.createpolyfill 是使用我最初展示的技术实现的。
2021-04-11 04:41:16

理想的方式来做到这一点是这样做Prod_dept.prototype = new Product();,因为这将调用Product构造函数。所以理想的方法是克隆它,除了构造函数,像这样:

function Product(...) {
    ...
}
var tmp = function(){};
tmp.prototype = Product.prototype;

function Prod_dept(...) {
    Product.call(this, ...);
}
Prod_dept.prototype = new tmp();
Prod_dept.prototype.constructor = Prod_dept;

然后在构造时调用超级构造函数,这正是您想要的,因为这样您也可以传递参数。

如果您查看诸如 Google Closure Library 之类的东西,您会发现它们就是这样做的。

@LasseChristiansen-sw_lasse:Prod_dept.prototype将用作new Prod_dept(). (通常,原型可用作instance.__proto__,尽管这是一个实现细节。)至于为什么constructor- 它是语言的标准部分,因此应该提供以保持一致性;默认情况下它是正确的,但是因为我们要完全替换原型,所以我们必须再次分配正确的值,否则某些事情将不合理(在这种情况下,这意味着Prod_dept实例将具有this.constructor == Product,这很糟糕)。
2021-03-19 04:41:16
@Juan:好的,更新添加Prod_dept.prototype.constructor = Prod_dept;
2021-03-23 04:41:16
@ChrisMorgan我无法理解你的样品中的最后一行:Prod_dept.prototype.constructor = Prod_dept;首先,为什么需要它,为什么它指向Prod_dept而不是Product
2021-04-02 04:41:16
我将用于设置继承的构造函数称为代理构造函数。您的示例在设置继承后仍然忘记重置构造函数属性,以便您可以正确检测构造函数
2021-04-04 04:41:16

如果你在 JavaScript 中做过面向对象编程,你就会知道你可以创建一个类,如下所示:

Person = function(id, name, age){
    this.id = id;
    this.name = name;
    this.age = age;
    alert('A new person has been accepted');
}

到目前为止,我们的类 person 只有两个属性,我们将给它一些方法。一个干净的方法是使用它的“原型”对象。从 JavaScript 1.1 开始,原型对象被引入 JavaScript。这是一个内置对象,可简化向对象的所有实例添加自定义属性和方法的过程。让我们使用其“原型”对象向我们的类添加 2 个方法,如下所示:

Person.prototype = {
    /** wake person up */
    wake_up: function() {
        alert('I am awake');
    },

    /** retrieve person's age */
    get_age: function() {
        return this.age;
    }
}

现在我们已经定义了我们的类 Person。如果我们想定义另一个名为 Manager 的类,它继承了 Person 的一些属性,该怎么办?当我们定义我们的 Manager 类时,重新定义所有这些属性是没有意义的,我们可以将它设置为从类 Person 继承。JavaScript 没有内置继承,但我们可以使用一种技术来实现继承,如下所示:

Inheritance_Manager = {};//我们创建一个继承管理器类(名字随意)

现在让我们给我们的继承类一个名为 extend 的方法,它接受 baseClass 和 subClassas 参数。在extend 方法中,我们将创建一个称为继承函数inheritance() { } 的内部类。我们使用这个内部类的原因是为了避免 baseClass 和 subClass 原型之间的混淆。接下来,我们使继承类的原型指向 baseClass 原型,如下代码所示:inheritance.prototype = baseClass。原型; 然后我们将继承原型复制到子类原型中,如下: subClass.prototype = new inherit(); 接下来是为我们的子类指定构造函数,如下所示: subClass.prototype.constructor = subClass; 完成子类原型设计后,我们可以指定接下来的两行代码来设置一些基类指针。

subClass.baseConstructor = baseClass;
subClass.superClass = baseClass.prototype;

这是我们的扩展功能的完整代码:

Inheritance_Manager.extend = function(subClass, baseClass) {
    function inheritance() { }
    inheritance.prototype = baseClass.prototype;
    subClass.prototype = new inheritance();
    subClass.prototype.constructor = subClass;
    subClass.baseConstructor = baseClass;
    subClass.superClass = baseClass.prototype;
}

现在我们已经实现了我们的继承,我们可以开始使用它来扩展我们的类。在这种情况下,我们要将 Person 类扩展为 Manager 类,如下所示:

我们定义了Manager类

Manager = function(id, name, age, salary) {
    Person.baseConstructor.call(this, id, name, age);
    this.salary = salary;
    alert('A manager has been registered.');
}

我们让它继承形式 Person

Inheritance_Manager.extend(Manager, Person);

如果您注意到,我们刚刚调用了 Inheritance_Manager 类的扩展方法,并在我们的例子中传递了子类管理器,然后是基类 Person。请注意,这里的顺序非常重要。如果您交换它们,继承将不会按您的预期工作,如果根本没有。另请注意,在实际定义我们的子类之前,您需要指定此继承。现在让我们定义我们的子类:

我们可以添加更多方法,如下所示。我们的 Manager 类将始终具有 Person 类中定义的方法和属性,因为它继承自它。

Manager.prototype.lead = function(){
   alert('I am a good leader');
}

现在为了测试它,让我们创建两个对象,一个来自类 Person,一个来自继承的类 Manager:

var p = new Person(1, 'Joe Tester', 26);
var pm = new Manager(1, 'Joe Tester', 26, '20.000');

请随时在以下位置获取完整代码和更多评论:http : //www.cyberminds.co.uk/blog/articles/how-to-implement-javascript-inheritance.aspx