如何扩展Javascript原型

How to extend Javascript Prototype?

本文关键字：Javascript 原型 扩展 何扩展      更新时间：2023-09-26

>我用

new Product.Image({
        "title": document.querySelector('#image-title')
    });

但是现在我需要扩展"Product.Image"，例如"Product.BetterImage"

new Product.BetterImage({
        "title": document.querySelector('#better-image-title')
    });

我原来的课是这样开始的：

Product.Image = function (options) {
  //do something
}
Product.Image.prototype = new Product.Data();

现在我尝试复制它以扩展"产品图像"：

Product.BetterImage = function (options) {
  //do something
}
Product.BetterImage.prototype = new Product.Image();

但是当我调用我的模板来启动它时，我收到以下错误：

Uncaught TypeError: Product.BetterImage is not a constructor

我在这里错过了什么或做错了什么？谁能解释一下这里出了什么问题？

这与javascript继承和原型委托有关 - 请参阅这个好的MDN页面：https://developer.mozilla.org/en-US/docs/Web/JavaScript/Inheritance_and_the_prototype_chain

这部分代码不是必需的，会导致问题：

Product.Image = function (options) {
  //do something
}
Product.Image.prototype = new Product.Data();

正确的方法是创建"产品"类，然后直接添加到其原型中，如下所示：

var Product = function(data) {
  this.data = data;
}
Product.prototype.image = function() {
   // return data here
}
Product.prototype.better = function(){
  // add stuff here
}
Product.prototype.betterImage = function(){
  // add more stuff here
}

然后，要创建实例或实例化您使用的类，可以使用"new"关键字

var myProduct = new Product(data);
相关文章：