在 Javascript 中绑定已绑定函数的更多参数

Question

我尝试整理一下我对 javascript 的 bind() 工作原理的想法。

如果我这样做，我会看到

var f = function (a) { ... }
var g = f.bind(obj);
g(1)

然后用obj 作为this 和1 作为a 调用f。

我认为 g 是 f 的包装函数。

但是当我这样做时

var f = function (a) { ... }
var g = f.bind(obj);
g.call(1)

然后用1 作为this 和a undefined 调用f。

所以看起来 g 不仅仅是一个简单的包装器，而且call 以某种方式区分了普通函数和绑定函数。

还有一件事是我不能多次应用一个函数。

var f = function (a) { ... }
var g = f.bind(obj);
var h = g.bind(1);
h();

然后用obj 调用f 作为this 和a undefined。

这种行为的原因是什么？

编辑

这个问题中的构造实际上是错误的，请参阅公认的答案，了解它们应该是什么样子（通常我没有注意到call 和bind 总是需要上下文参数作为第一个参数）。

Answer 1

你从来没有传递过任何参数——你只是设置了上下文。 call 的第一个参数作为上下文 (this) 接收，参数 2 之后的参数作为被调用函数的参数 1 和之后的参数接收。同时，bind 创建了一个具有新上下文的新函数——在调用它时传递参数。

以下是将1 作为函数f 的参数a 从您的第一个代码块开始传递的方法：

f( 1 );
g( 1 );
g.call( this, 1 );
g.apply( this, [ 1 ] );

Answer 2

一旦使用bind 将对象绑定到函数，就无法覆盖它。正如您在MDN documentation 中看到的那样，它清楚地写在规范中：

“bind() 函数创建一个新函数（绑定函数），其函数体（ECMAScript 5 术语中的内部调用属性）与被调用的函数（绑定函数的目标函数）相同this 值绑定到 bind() 的第一个参数，不能被覆盖。"

这意味着，如果你这样做：

g.call(1);

在遵循规范的浏览器上，您将获得 obj 和 this，而不是 1。

你当然可以绑定多个参数，所以：

var sum = function(a, b, c) { return a + b + c };
var sumAB = sum.bind(null, 1, 5);
var sumC = sumAB.bind(null, 2);

console.log(sumC());

但上下文对象将始终是第一个bind 指定的对象，因为它不能被覆盖。

为了避免混淆，call 的第一个参数是上下文对象（this），然后您将拥有其余的参数。

意思是：

var obj = { foo: function(bar) { console.log(bar) } };

obj.foo('hello');

// equivalent to:
var foo = obj.foo;

foo.call(obj, 'hello');

希望对你有帮助。

Answer 3

Function.prototype.call()

使用 call() 方法，您可以编写可用于不同对象的方法。换句话说，使用 call()，一个对象可以使用属于另一个对象的方法。 More information

const person = {
  fullName: function() {
    return this.firstName + " " + this.lastName;
  }
}
const person1 = {
  firstName:"John",
  lastName: "Doe"
}
const person2 = {
  firstName:"Mary",
  lastName: "Doe"
}

// This will return "John Doe":
console.log(person.fullName.call(person1));

call() 允许分配属于一个对象的函数/方法并为不同的对象调用。

call() 为函数/方法提供了 this 的新值。使用 call()，你可以编写一次方法，然后在另一个对象中继承它，而无需为新对象重写方法。

> 使用调用链接对象的构造函数

您可以使用调用来链接对象的构造函数（类似于 Java）。

在以下示例中，Product 对象的构造函数使用两个参数定义：名称和价格。

另外两个函数，Food 和 Toy，调用 Product，传递 this、name 和 price。产品初始化属性名称和价格，两个专用函数定义类别。

function Product(name, price) {
  this.name = name;
  this.price = price;
}

function Food(name, price) {
  Product.call(this, name, price);
  this.category = 'food';
}

function Toy(name, price) {
  Product.call(this, name, price);
  this.category = 'toy';
}

const cheese = new Food('feta', 5);
const fun = new Toy('robot', 40);
console.log(cheese);
console.log(fun);

> 使用 call 调用匿名函数

在本例中，我们创建了一个匿名函数，并使用 call 在数组中的每个对象上调用它。

这里匿名函数的主要目的是给每个对象添加一个打印函数，可以打印出该对象在数组中的正确索引。

const animals = [
  { species: 'Lion', name: 'King' },
  { species: 'Whale', name: 'Fail' }
];

for (let i = 0; i < animals.length; i++) {
  (function(i) {
    this.print = function() {
      console.log('#' + i + ' ' + this.species
                  + ': ' + this.name);
    }
    this.print();
  }).call(animals[i], i);
}

> 使用 call 调用函数并指定 'this' 的上下文

在下面的例子中，当我们调用 greet 时，this 的值会被绑定到对象 obj。

function greet() {
  const reply = [this.animal, 'typically sleep between', this.sleepDuration].join(' ');
  console.log(reply);
}

const obj = {
  animal: 'cats', sleepDuration: '12 and 16 hours'
};

greet.call(obj);  // cats typically sleep between 12 and 16 hours

> 使用 call 调用一个函数并且不指定第一个参数

在下面的示例中，我们调用 display 函数而不传递第一个参数。如果第一个参数没有传递，则 this 的值绑定到全局对象。

var sData = 'Wisen';

function display() {
  console.log('sData value is %s ', this.sData);
}

display.call();  // sData value is Wisen

注意：在严格模式下， this 的值是未定义的。见下文。

'use strict';

var sData = 'Wisen';

function display() {
  console.log('sData value is %s ', this.sData);
}

display.call(); // Cannot read the property of 'sData' of undefined

更多阅读可以访问reference

Function.prototype.bind()

bind() 方法创建一个新函数，在调用该函数时，将其 this 关键字设置为提供的值，并在调用新函数时提供的任何参数之前具有给定的参数序列。

const module = {
  x: 42,
  getX: function() {
    return this.x;
  }
};

const unboundGetX = module.getX;
console.log(unboundGetX()); // The function gets invoked at the global scope
// expected output: undefined

const boundGetX = unboundGetX.bind(module);
console.log(boundGetX());
// expected output: 42

> 创建绑定函数

bind() 最简单的用法是创建一个函数，无论它如何调用，都使用特定的 this 值调用。

新 JavaScript 程序员的一个常见错误是从对象中提取方法，然后调用该函数并期望它使用原始对象作为它的 this（例如，通过在基于回调的代码中使用该方法）。

但是，如果不特别注意，原始对象通常会丢失。从函数中创建一个绑定函数，使用原始对象，巧妙地解决了这个问题：

this.x = 9;    // 'this' refers to global 'window' object here in a browser
const module = {
  x: 81,
  getX: function() { return this.x; }
};

module.getX();
//  returns 81

const retrieveX = module.getX;
retrieveX();
//  returns 9; the function gets invoked at the global scope

//  Create a new function with 'this' bound to module
//  New programmers might confuse the
//  global variable 'x' with module's property 'x'
const boundGetX = retrieveX.bind(module);
console.log(boundGetX());
//  returns 81

> 部分应用函数

bind() 的下一个最简单的用法是使用预先指定的初始参数创建一个函数。

这些参数（如果有）跟随提供的 this 值，然后插入到传递给目标函数的参数的开头，然后是在调用绑定函数时传递给绑定函数的任何参数。

function list() {
  return Array.prototype.slice.call(arguments);
}

function addArguments(arg1, arg2) {
  return arg1 + arg2;
}

const list1 = list(1, 2, 3);
//  [1, 2, 3]

const result1 = addArguments(1, 2);
//  3

// Create a function with a preset leading argument
const leadingThirtysevenList = list.bind(null, 37);

// Create a function with a preset first argument.
const addThirtySeven = addArguments.bind(null, 37);

const list2 = leadingThirtysevenList();
//  [37]

const list3 = leadingThirtysevenList(1, 2, 3);
//  [37, 1, 2, 3]

const result2 = addThirtySeven(5);
//  37 + 5 = 42

const result3 = addThirtySeven(5, 10);
//  37 + 5 = 42
//  (the second argument is ignored)

> 使用 setTimeout()

默认情况下，在 setTimeout() 中，this 关键字将设置为窗口（或全局）对象。当使用需要 this 引用类实例的类方法时，您可以显式地将 this 绑定到回调函数，以维护实例。

function LateBloomer() {
  this.petalCount = Math.floor(Math.random() * 12) + 1;
}

// Declare bloom after a delay of 1 second
LateBloomer.prototype.bloom = function() {
  window.setTimeout(this.declare.bind(this), 1000);
};

LateBloomer.prototype.declare = function() {
  console.log(`I am a beautiful flower with ${this.petalCount} petals!`);
};

const flower = new LateBloomer();
flower.bloom();
//  after 1 second, calls 'flower.declare()'

如果您想了解更多关于绑定方法的信息，请阅读this resource