JavaScript中this的四个绑定规则总结

前言

如果要问javascript中哪两个知识点容易混淆，作用域查询和this机制绝对名列前茅。所以这篇文章开始将介绍javascript中this的四个绑定规则，下面来一起看看吧。

绑定规则

1. 默认绑定

独立函数调用时，this 指向全局对象，如果使用严格模式，那么全局对象无法使用默认绑定， this绑定至 undefined。

function foo() { console.log(this.a);}var a = 2;foo(); // 2

严格模式时：

function foo() { "use strict"; console,log(this.a);}var a = 2;foo(); // TypeError: this is undefined

2. 隐式绑定

当函数引用有上下文对象时（即函数作为引用属性被添加到对象中），隐式绑定规则会把函数调用中的 this 绑定到这个上下文对象。

function foo() { console.log( this.a);}var obj = { a: 2, foo: foo};obj.foo(); // 2

对象属性引用链中只有最顶层或者说最后一层会影响调用位置：

obj1.obj2.foo(); // foo 中的 this 与 obj2 绑定

2.1 隐式丢失

隐式丢失指的是函数中的 this 丢失绑定对象，即它会应用第 1 条的默认绑定规则，从而将 this 绑定到全局对象或者 undefined 上，取决于是否在严格模式下运行。以下情况会发生隐式丢失：

绑定至上下文对象的函数被赋值给一个新的函数，然后调用这个新的函数时：

function foo() { console.log( this.a);}var obj = { a: 2, foo: foo};var bar = obj.foo; //函数别名var a = "这是全局变量喔";bar(); // "这是全局变量喔"

传入回调函数时：

function foo() { console.log( this.a);}function doFoo(fn) { fn(); // <-- 调用位置}var obj = { a: 2, foo: foo};var a = "这是全局变量喔";doFoo( obj.foo ); // "这是全局变量喔"

其实这就是第一种情况的变种，实际上参数传递就是一种隐式赋值。除了开发人员自定义的函数，在将函数传入语言内置的函数比如 setTimeout 时，同样会发生隐式丢失的情况。

3. 显式绑定

显式绑定的核心是 JavaScript 内置的 call(..) 和 apply(..) 方法，这两个方法在 JavaScript 提供的绝大多数函数以及开发者自己创建的所有函数上都可以使用。

call(..) 和 apply(..)的第一个参数是一个对象（二者区别在后面传入的参数形式，这里不是重点，不讨论），他们会将 this 绑定到这个对象上。因为你可以直接指定 this 绑定的对象，所以这条规则被称为显式绑定。

function foo() { console.log( this.a);}var obj = { a: 2};foo.call(obj); // 2