透彻地搞懂 ES9 的 this 新特性和默认绑定！

在 JavaScript 中，this 是一个非常重要的概念。它用来表示当前执行上下文中的对象。但是，在一些情况下，this 的行为并不是我们所期望的。ES9 中引入了一些新的特性和默认绑定，帮助我们更好地理解和使用 this。

默认绑定

当一个函数被调用时，如果没有明确指定 this 的值，那么 this 将会指向全局对象。这种情况下，我们称之为默认绑定。

function foo() {
  console.log(this);
}

foo(); // window

在上面的例子中，foo 函数被调用时，没有指定 this 的值，因此 this 指向全局对象 window。

硬绑定

硬绑定是一种强制绑定 this 的方法。可以使用 call 或 apply 方法，将函数中的 this 绑定到指定的对象上。

// javascriptcn.com 代码示例
function foo() {
  console.log(this);
}

var obj = {
  name: 'obj'
};

foo.call(obj); // {name: "obj"}

在上面的例子中，foo 函数的 this 被绑定到 obj 对象上。

箭头函数的 this 绑定

箭头函数与普通函数不同，它没有自己的 this 绑定。箭头函数的 this 绑定是在函数定义时确定的，而不是在函数调用时确定的。

// javascriptcn.com 代码示例
var obj = {
  name: 'obj',
  foo: function() {
    setTimeout(() => {
      console.log(this.name);
    }, 100);
  }
};

obj.foo(); // 'obj'

在上面的例子中，箭头函数中的 this 绑定到了 obj 对象，因为箭头函数是在 foo 函数中定义的。

ES9 的 this 新特性

在 ES9 中，有两个新的特性可以帮助我们更好地使用 this。

Function.prototype.toString 方法的改变

在 ES9 之前，Function.prototype.toString 方法返回的字符串中，函数体内部的 this 关键字被替换成了字符串 "undefined"。但是，在 ES9 中，这个问题被修复了。

function foo() {
  console.log(this);
}

console.log(foo.toString());
// ES6 之前输出: 'function foo() {\n  console.log("undefined");\n}'
// ES9 输出: 'function foo() {\n  console.log(this);\n}'

在 ES9 中，foo.toString() 的返回值中，this 关键字被替换成了字符串 "this"，这使得我们更容易理解函数的行为。

Function.prototype.bind 方法的改变

在 ES9 中，Function.prototype.bind 方法被修改，使得它支持更好的默认绑定。

// javascriptcn.com 代码示例
function foo() {
  console.log(this);
}

var obj = {
  name: 'obj'
};

var boundFoo = foo.bind(null);

boundFoo.call(obj); // {name: "obj"}

在上面的例子中，foo 函数被绑定到了 null，但是在调用 boundFoo 函数时，它的 this 被绑定到了 obj 对象上。

总结

this 是 JavaScript 中的一个重要概念，但是它的行为并不总是我们所期望的。ES9 中引入了一些新的特性和默认绑定，帮助我们更好地理解和使用 this。在编写 JavaScript 代码时，我们应该注意 this 的行为，并根据需要使用硬绑定、箭头函数或默认绑定来控制 this 的值。

来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/6584ab2ad2f5e1655df41b8a