失去“`this`”关键字的显式绑定

Question

this关键字如何丢失显式绑定并使用默认绑定进行平铺的示例/场景是什么？下面是一个示例代码片段，它使用this方法显式地将call关键字绑定到对象。在这个代码中有什么理论上的添加可以改变this的值？当硬绑定this关键字时，我们保护代码的具体考虑是什么？

function foo(){
  console.log(this.bar); // outputs: 9
}

var obj = {
  bar: 9
};

foo.call(obj);

Answer 1

通常，this没有“显式”绑定。每当根据调用的性质调用函数时，就会确定this的值。这与该职能“诞生”的情况无关。

在通过对象属性查找发现其引用之后调用函数时，如：

obj.someFunction();

然后所涉及的对象引用(obj，上面)将是this在函数的特定调用中的值。但是，函数引用可以很容易地复制到另一个对象：

var otherObj = { someFunction: obj.someFunction };
otherObj.someFunction();

现在，this的值(在特定的调用中)将是对otherObj的引用，而不是obj。

如果将对函数的引用复制到普通变量：

var func = obj.someFunction;

func();

如果代码恰好处于“严格”上下文中，则该调用中this的值将是对window或undefined的引用。

通过所有这些，请注意，函数最初可能已声明为对象文本中的属性值，这与调用中的this值无关。

创建显式“绑定”的一种方法是利用每个函数实例可用的内置.call()或.apply()方法：

function whatever() { /* ... */ }

var objWhatever = function() {
  whatever.call(obj);
};

该设置显式地强制将对obj的引用用作函数whatever()调用中的this值。您还可以使用内置(在现代环境中) .bind()函数来创建这样一个“绑定”函数：

var objWhatever = whatever.bind(obj);

我个人认为这是一个“绑定”函数，因为在幕后，它只是一个通过.call()的显式调用，但是术语不是我太担心的事情。:)

Answer 2

正如Pointy提到的this的值，或者上下文取决于函数的调用方式，本文理解Javascript中的范围和上下文很好地解释了它是如何工作的。

Answer 3

添加此代码将覆盖“显式”绑定，this关键字现在返回8，这是由otherObj对象创建的“隐式”绑定造成的。函数在该对象的空间内调用。

var otherObj = {
  foo: foo,
  bar: 8
};
otherObj.foo();

进一步添加此代码，因为函数是在全局空间中调用的，没有任何修饰，“隐式”绑定将被“默认”绑定覆盖，该绑定返回全局bar变量，结果是7。

var secondObj = otherObj.foo;
var bar = 7;
secondObj();

在使用call方法调用函数之前添加此代码，将导致将this关键字锁定到secondObj对象上，并导致6的输出。

var thirdObj = {
  bar: 6
};

var foo = foo.bind(thirdObj);