JavaScript Mixin函数

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了JavaScript Mixin函数相关的知识,希望对你有一定的参考价值。

函数框架位于mixin.js的顶部。它接收一个目标对象(o)和另一个要混合属性的对象(mixin)。

您应该从此函数返回一个Proxy对象。覆盖“获取”陷阱,以便:

1)如果对象已经具有属性,则返回该对象的属性。

2)如果对象不具有该属性,它将从mixin对象返回该属性。

3)如果属性是“ __original”,它将返回原始对象“ o”。 (此设计提供了一种“解混” mixin的方法。)

4)如果没有其他情况,则应返回undefined作为结果。

您不应在addMixin函数定义之外对此文件进行任何更改。

这是我到目前为止所拥有的,

function addMixin(o, mixin) {

  let oldValue = {};
 return new Proxy(o, {
   get: function(target, property) {
       if(target.hasOwnProperty(property) === true) {
         return target[property];
       } else if (target.hasOwnProperty(property) === false) {
         oldValue[property] = target[property];
         return mixin[property];
       } else if (property === '__original') {
         return target[property] = oldValue[property];
       } else {
         return undefined;
       }
   }
 })
// A sample mixin.
let PlayableMixin = {
  // Plays a system bell 3 times
  play: function() {
    console.log("u0007");
    console.log("u0007");
    console.log("u0007");
  },
  duration: 100,
};

function Song(name, performer, duration) {
  this.name = name;
  this.performer = performer;
  this.duration = duration;
}
Song.prototype = addMixin(Song.prototype, PlayableMixin);

Song.prototype.display = function() {
  console.log(`Now playing "${this.name}", by ${this.performer}. (${this.duration})`);
}

let s = new Song("Gun Street Girl", "Tom Waits", "4:17");
s.display();
s.play();

console.log(s.duration);

s = s.__original;

console.log(s.play);

预期输出现在播放汤姆·怀特(Tom Waits)的“枪街女孩” (4:17)

4:17未定义

给我一个错误,而不是打印未定义的内容。

答案

您实际上并不需要if else链。 return已经中断了功能。应该首先检查__original,因为无论它是否作为属性存在,它都应返回原始对象。它本质上是计算属性的保留符号名称。您的代码也缺少右括号。

function addMixin(o, mixin) {

  let oldValue = {};
  return new Proxy(o, {
    get: function(target, property) {
      if (property === '__original') {
        return o;
      }
      if (target.hasOwnProperty(property) === true) {

        return target[property];
      } else if (target.hasOwnProperty(property) === false) {
        oldValue[property] = target[property];
        return mixin[property];
      } else {
        return undefined;
      }
    }
  })
}
// A sample mixin.
let PlayableMixin = {
  // Plays a system bell 3 times
  play: function() {
    console.log("u0007");
    console.log("u0007");
    console.log("u0007");
  },
  duration: 100,
};

function Song(name, performer, duration) {
  this.name = name;
  this.performer = performer;
  this.duration = duration;
}
Song.prototype = addMixin(Song.prototype, PlayableMixin);

Song.prototype.display = function() {
  console.log(`Now playing "${this.name}", by ${this.performer}. (${this.duration})`);
}

let s = new Song("Gun Street Girl", "Tom Waits", "4:17");
s.display();
s.play();

console.log(s.duration);

s = s.__original;

console.log(s, s.play);

以上是关于JavaScript Mixin函数的主要内容,如果未能解决你的问题,请参考以下文章

常用Javascript代码片段集锦

使用 ES.later 的装饰器作为 mixin

如何将此 JavaScript 代码片段翻译成 Parenscript?

10个JavaScript代码片段,使你更加容易前端开发。

10个JavaScript代码片段,使你更加容易前端开发。

设计模式:混入模式