浅谈this的四种绑定方式浅谈this的四种绑定方式

再一次进行对this知识点的复习，每一次都是温故知新的过程。
这次对于this的学习基于《你所不知道的JavaScript》这本书，算是对于书中的知识做一个总结。

【浅谈this的四种绑定方式】首先要明确的是一般情况下，this不是函数被定义时绑定，而是函数被调用时被绑定

那么函数中的this有四种绑定方式：
1. 默认绑定直接调用函数，使用不带任何修饰的函数进行调用，只能使用默认绑定，无法应用其它规则，代码如下：

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

2. 隐式绑定函数被调用时有上下文对象，那么this会绑定这个上下文对象，代码如下：

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

其实不能讲foo这个函数属于obj对象，但是foo函数被调用时的落脚点的确是指向obj对象，当函数引用有上下文对象时，隐式绑定就会把函数调用中的this绑定到这个上下文对象；
对象属性引用链中只有最顶层或者说最后一层会影响调用位置

var foo = function () { console.log(this.a) } var obj2 = { a: 2 foo: foo } var obj1 = { a: 1 obj2: obj2 } obj1.obj2.foo() // 2

隐式丢失对于应用隐式绑定方式绑定this经常导致的一个情况是隐式丢失this

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

针对这种情况，虽然bar是obj.foo的一个引用，但是实际上它引用的是foo函数本身，此时bar（）其实是一个不带任何修饰的函数调用，应用了默认绑定；
3. 硬绑定使用call，apply或者bind，在调用函数的时候直接指定上下文对象，那么函数中的this会绑定到传入的对象，代码如下：

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

4. new绑定使用new调用某个构造函数，代码如下：

function Foo(a) { this.a = a; console.log(this.a); } var obj = new Foo(2); console.log(obj.a) // 2

浅谈this的四种绑定方式