JavaScript 方法链接和 this 对象

javascript method chaining and the this object

本文关键字：this 对象 链接 方法 JavaScript      更新时间：2023-09-26

给定一个链式函数，声明如下：

Something.prototype.method1.method2 = function(){
    return this === Something.prototype.method1; // true
}

如何(如果可能(访问调用实例对象？

instance.method1.method2() // access to instance and method1?

如果你真的想滥用JS，请忽略我的回答。

否则，让我展示一下链接函数的想法是关于什么的。原型函数可以相互使用，因为它们始终返回this指针。因此，链中的下一个函数将在同一对象上调用：

Animal = function Animal(name) {
  this.food = 0;
  this.name = name;
  return this;
}
Animal.prototype.eat = function eat() {
  this.food--;
  return this; 
}
Animal.prototype.hunt = function hunt() {
  this.food++;
  return this;
}

现在，您可以执行以下操作：

// Lets create Jack the cat.
var cat = new Animal('Jack');
// Let him hunt and eat with some chained function calls.
cat.hunt().hunt().eat();
// Check how much food does Jack got.
console.log(cat.food) // => 1
// Some explanation about this return values.
var anotherPointerOnCat = cat.hunt();
console.log(anotherPointerOnCat === cat) // => true
// True because they point on the same object in memory.
// So I can call the chained functions on that as well.
anotherPointerOnCat.eat().eat();

您需要在构造过程中定义它：

function Thing() {
  var _t = this;
  this.method1 = function() {
    console.log('method1', _t);
  }
  this.method1.method2 = function() {
    console.log('method1.method2', _t);
  }
}

在 Chrome 控制台中工作：

var t1 = new Thing();
t1.a = 1;
t1.method1();
t1.method1.method2();
var t2 = new Thing();
t2.b = 2;
t2.method1();
t2.method1.method2();

收益 率：

method1 "Thing {method1: function, a: 1}"
method1.method2 "Thing {method1: function, a: 1}"
method1 "Thing {method1: function, b: 2}"
method1.method2 "Thing {method1: function, b: 2}"

您可以将对象设置为链对象，即将对象设置为接受一个可以是父级的参数，并让它返回一个不同的对象，但具有相同的链。

偷@burninggramma的例子：

function buildChain(parent, method){
   var child = {};
   child.prototype = parent;
   child.parentage = function(){
     var chain = [];
     if (child.prototype.parentage) {
       chain = child.prototype.parentage();
     }
     chain.push({obj:this, method:method});
     return chain;
   }
}
function Animal(name){
  this.food = 0;
  this.name = name;
  return this;
}
Animal.prototype.eat = function eat() {
  this.food--;
  return buildChain(this, this.eat); 
}
Animal.prototype.hunt = function hunt() {
  this.food++;
  return buildChain(this, this.hunt);
}

并使用：

var cat = new Animal('Tom');
var mouse = new Animal('Jerry');
cat.hunt().hunt().eat().parentage(); // [{obj: cat, method: hunt}, {obj: chain1, method: hunt}, {obj: chain2, method: eat}]
mouse.eat().eat().parentage(); // [{obj: mouse, method: eat}, {obj: chain1, method: eat}]
var chainer = cat.hunt().eat();
chainer.parentage(); // [{obj: cat, method: hunt}, {obj: chain1, method: eat}]
chainer.hunt().parentage(); // [{obj: cat, method: hunt}, {obj: chain1, method: eat}, {obj: chain2, method: hunt}]
chainer.eat().parentage(); // [{obj: cat, method: hunt}, {obj: chain1, method: eat}, {obj: chain2, method: eat}]

Something.prototype.method1.method2 = function(){
    return this === Something.prototype.method1; // true
}

您声称此函数将始终返回 true。但是，这不是真的。举个例子：

var jsIsFun = Something.prototype.method1.method2;
jsIsFun(); //false
jsIsFun.call(Something.prototype.method1); //true

这是因为 this 关键字在函数执行时绑定。但是，使用call()方法，我们可以更改绑定到this的内容。

发生这种情况是因为函数的上下文在执行时应用。

但是，您希望访问不直接在对象/函数中的变量。

我们对此也有一个词：范围。

您遇到的问题是不了解 Scope 及其在 JS 中的工作方式。

相关文章：