Chain自定义javascript函数

Question

经过一段时间的搜索，我仍然没有找到想要的东西。

[有很多示例需要创建一个新实例，或者仅具有不返回任何东西的函数（这意味着可以通过返回this来解决问题。]

我希望以下示例能很好地说明我的观点：

// Say I have these functions
function aNumber(){
    var max = 100, min = 0;
    return (Math.floor(Math.random() * (max - min + 1)) + min);
}
function divideBy(_number, _divider){
    return (_number / _divider);
}
function multiplyBy(_number, _multi){
    return (_number * _multi);
}
function add(_number, _add){
    return (_number + _add);
}
function subtract(_number, _sub){
    return (_number - _sub);
}

// #########################################################

// I can do this with them
var test = aNumber();
test = divideBy(aNumber, 2);
test = add(aNumber, 5);
test = multiplyBy(aNumber, 3);
test = subtract(aNumber, 10);

// I would like to do this however:
var test = aNumber().divideBy(2).add(5).multiplyBy(3).subtract(10);

使最后一行有效的最有效方法是什么？

我是否误导了这可能无需创建新的事物实例？

Answer 1

是，这需要更改Prototype的Object。对象是实例。因此，您需要创建一个对象来执行这种操作。

function MyNum(value) {
  this._val = value;      // Having _variable is for denoting it is a private variable.
}

使用以下方法初始化对象：

var myNum = new MyNum(5);

现在使用它，定义这些：

MyNum.prototype.divideBy = function () {}
MyNum.prototype.multiplyBy = function () {}

不要忘记在这些功能中使用return this;。

Answer 2

尝试使用下面的方法创建没有实例和原型关键字。

这里添加了另一种方法，您可以默认设置数字或随机数。如果未指定数字。

  var Calculator = {

setNumber: function(givenNumber) {
  var max = 100,
      min = 0;

  this.number = (givenNumber) ? givenNumber : (Math.floor(Math.random() * (max - min + 1)) + min);
  return this;
},

divideBy: function(_divider) {
  this.number = (this.number / _divider);
  return this;
},

multiplyBy: function(_multi) {
  this.number = (this.number * _multi);
  return this;
},

add: function(_add) {
  this.number = (this.number + _add);
  return this;
},

subtract: function(_sub) {
  this.number = (this.number - _sub);
  return this;
},

result: function () {
  return this.number;
}
  }

  document.write('<pre>');
  document.writeln(Calculator.setNumber(2).divideBy(2).add(5).multiplyBy(3).subtract(10).result());
  document.writeln(Calculator.setNumber(4).divideBy(2).add(5).multiplyBy(3).subtract(10).number);
  document.writeln(Calculator.setNumber().divideBy(2).add(5).multiplyBy(3).subtract(10).result());
  document.write('</pre>');

Answer 3

是的，您确实需要创建某事物的实例。这可以是简单的对象文字，函数构造函数等...

想法是您的所有方法都存储在某个对象上，对吗？访问这些方法的唯一方法是通过该对象访问它们。考虑到这一点，每个函数都必须返回包含所有这些方法的对象。

一个简单的例子

var myMethods = {
  one: function() {
    console.log('one');
    // You can return 'this' or reference the object by name
    return this;
    // or 
    // return myMethods;
  },

  two: function() {
    console.log('two');
    return this;
  }
};

myMethods.one().two().one().two();
//=> 'one', 'two', 'one', 'two'

当您直接引用该方法时要小心，像这样

var someMethod = myMethods.one;
someMethod() //=> undefined

这是因为'this'现在正在引用全局对象，这又是另一回事。请小心是否以这种方式引用方法。

Answer 4

尽管通常不建议在JavaScript原语的原型中添加函数，但是您可以通过这样做来完成所需的工作。

function aNumber(){
    var max = 100, min = 0;
    return (Math.floor(Math.random() * (max - min + 1)) + min);
}

function divideBy(_number, _divider){
    return (_number / _divider);
}
function multiplyBy(_number, _multi){
    return (_number * _multi);
}
function add(_number, _add){
    return (_number + _add);
}
function subtract(_number, _sub){
    return (_number - _sub);
}

Number.prototype.divideBy = function(_divider){
	return divideBy(this, _divider);
};

Number.prototype.multiplyBy = function(_multi){
	return multiplyBy(this, _multi);
};

Number.prototype.add = function(_add){
	return add(this, _add);
};

Number.prototype.subtract = function(_sub){
	return subtract(this, _sub);
};

var test = aNumber().divideBy(2).add(5).multiplyBy(3).subtract(10);

Answer 5

就像Praveen和Venkatraman所说，我发现了以下有关链接的帖子，但是在访问任何更改方法之前，所有这些都必须声明一个新的实例。method-chaining-in-javascript和beautiful-javascript-easily-create-chainable-cascading-methods-for-expressiveness

或您可以使用此实现https://jsfiddle.net/ayinloya/zkys5dk6/

function aNumber() {
  var max = 100;
  var min = 0;
  this._number = (Math.floor(Math.random() * (max - min + 1)) + min);
  console.log("a init", this._number)
}

aNumber.prototype.divideBy = function(_divider) {
  this._number = (this._number / _divider)
  return this;
}

aNumber.prototype.multiplyBy = function(_multi) {
  this._number = (this._number * _multi);
  return this;
}

aNumber.prototype.add = function(_add) {
  this._number = (this._number + _add);
  return this;
}

aNumber.prototype.subtract = function(_sub) {
  this._number = (this._number - _sub);
  return this;
}
aNumber.prototype.ans = function() {
  return this._number;
}

var a = new aNumber()

alert(a.add(2).subtract(1).ans())