Question

我有一个JavaScript＆＃34; class＆＃34;其中包含一个方法bar()，我希望根据其上下文采取不同的行为。

换句话说，根据我实例化blah的页面，我希望bar()做不同的事情。

你在这里建议什么方法？我的第一个想法是blah构造函数中的依赖注入。

function blah(){
}

blah.prototype.foo = function(){
    bar(arguments);
};

以下是同一方法https://jsfiddle.net/7ht8dud6/

中bar的不同实现的示例

Answer 1

更新

通过阅读你的小提琴，在我看来，你没有错......在构造函数中使用注入可以被认为是一种很好的做法。

顺便说一句，还有其他方法可以满足您的需求。例如，如果仅bar方法需要foo依赖关系，您可以考虑将其作为回调传递，这会使事物更加封装并隐藏依赖关系课程背景的其余部分：

function Blah() {};

Blah.prototype.foo = function(cb, data) {
  console.count('foo');
  console.log(cb);
  return cb(data);
};

var example = new Blah();

// and use it in this way:
example.foo(
  function(data) { return 1 + data; },
  55
);

// or
example.foo = example.foo.bind(example, function(data) { return data + 1; });
example.foo(4);
example.foo(3);

正如我在上述评论中所提到的那样等待更多信息，您可以考虑bind对象的Function方法，该方法允许您为其传递不同的上下文执行时间处理时间。

Function.prototype.bind - Mozilla开发者网络

一个简单的例子：

function printName() {
  return document
    .getElementById('result')
    .innerText = this.name
  ;
};


function prepareButtons() {
  var list = [
    { name: 'Hitmands', selector: '#btn1' },
    { name: 'Foo', selector: '#btn2' },
    { name: 'Bar', selector: '#btn3' }
  ];
  
  function attach(element, context) {
    element = document.querySelector(element);
    
    return element && element.addEventListener('click', printName.bind(context));
  }
  
  list.forEach(function(item) {
    attach(item.selector, item);
  });
  
}

document.addEventListener('DOMContentLoaded', prepareButtons);

<h1 id="result">result</h1>

<button id="btn1">Hitmands</button>
<button id="btn2">Foo</button>
<button id="btn3">Bar</button>

根据上下文使原型方法的行为不同

1 个答案:

更新