【问题标题】:How to assume a nested map as a prototype?如何假设嵌套地图作为原型?
【发布时间】:2019-07-22 10:50:48
【问题描述】:

const Box = {
  pick: function(...fruits) {
    this.fruits = "You've picked the fruits " + fruits;
  $('span[data-count]').text(this.fruits);
  }
}
var Box2 = Object.create(Box);
Box2.prototype.newMethod = function() {
  $('span[data-count]').text(this.fruits);
}
Box2.pick('Apple'); // Prototype?
Box.pick('Orange', 'Mango', 'Blueberry'); // Original
* {
  background-color: lightblue;
}
span {
  font-size: 2rem;
  font-family: 'Helvetica';
}
<span data-count></span>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

https://codepen.io/o22/pen/bZVWOJ

我无法通过使用prototype 属性来获取const Box 内部的函数pick

假设 pickBox2 直接工作正常。但是当我在代码中输入Box2.prototype.newMethod 时,浏览器会触发错误。

我的目标是使用prototype 属性来创建新方法和访问pick 函数。

我该怎么做?

【问题讨论】:

    标签: javascript html data-structures struct prototype


    【解决方案1】:

    prototype 属性是特定于构造函数的,它不是对象本身的原型。 (如果你想获得对象的原型,你可以使用Object.getPrototypeOf [你可能还会看到使用已弃用的__proto__ 访问器属性的代码;不要在新代码中使用它]。)

    您的Box2 不是构造函数,它只是一个对象。所以如果你想添加一个新方法,你只需直接这样做:

    const Box = {
      pick: function(...fruits) {
        this.fruits = "You've picked the fruits " + fruits;
      $('span[data-count]').text(this.fruits);
      }
    }
    var Box2 = Object.create(Box);
    Box2.newMethod = function() {
    //  ^---- no .prototype here *********************************
      $('span[data-count]').text(this.fruits);
    }
    Box2.pick('Apple'); // Prototype?
    Box.pick('Orange', 'Mango', 'Blueberry'); // Original
    

    Box2 将拥有自己的 newMethod,并将从其原型 (Box) 继承 pick

    更简单的例子:

    const a = {
      method1() {
        console.log("this is method1");
      }
    };
    const b = Object.create(a);
    b.method2 = function() {
      console.log("this is method2");
    };
    
    b.method1();
    b.method2();

    作为一个小的改进,当定义一个具有特定原型和一些你想添加的方法的对象时,Object.assign 相当方便:

    const a = {
      method1() {
        console.log("this is method1");
      }
    };
    const b = Object.assign(Object.create(a), {
      method2() {
        console.log("this is method2");
      }
    });
    
    b.method1();
    b.method2();

    由于这些不是构造函数,因此在 JavaScript 中非常普遍的约定是不将它们大写。所以boxbox2,而不是BoxBox2

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 2015-10-22
      • 1970-01-01
      • 1970-01-01
      • 2020-05-05
      • 1970-01-01
      • 1970-01-01
      • 2021-05-25
      • 1970-01-01
      相关资源
      最近更新 更多