浅谈JS中this的指向

this的绑定是动态的，与函数定义的位置无关，与函数的调用方式和调用的位置有关。

---

我们来分析一下，为什么要这么说呢？

因为我们无论在哪里定义了一个函数，只要没有调用这个函数，它的this指向就没有被确定，也就this是没有被绑定。那么什么时候绑定呢？答案就是去要调用这个函数的时候，this才会被绑定。那么这个时候就要去根据函数是怎样被掉用的来判断this到底指向谁

说了这么多，到底this该指向谁呀？

关于调用方式：

函数被单独调用(默认绑定)

function foo(){
    console.log(this)		
}
foo()	//window

const obj = {
    foo() {
        function bar() {
            console.log(this)
        }
        return bar
    }
}

obj.foo()() 	//window

第二个代码片段看似复杂，其实他和第一个代码片段是相同的道理。他们都有一个相似之处：没错，就是调用的方式是一样的，都是直接“单独”的调用函数，并没有最通过对象去调用函数。

也很好理解，第一个代码片段就不用说了，直接看第二个代码片段：obj.foo( )( )。我们分两步看：

let f = obj.foo()
f()				//window

• 先是通过函数调用foo( )函数，返回内存中的bar函数，注意！这里虽然是通过obj调用了foo函数，但是返回的bar函数是”完好无损“的，因为它还没有被调用，此时this没有明确指向

• 这个时候bar函数已经被返回并被变量 f 接受，我们再去以( )的形式调用这个函数就和第一个代码片段中的例子是一个道理。都是在“单独“的调用这个函数，this指向全局

再来一个例子：

const obj = {
    foo() {
        function bar() {
            console.log(this)
        }
        bar()
    }
}

obj.foo() //window

这里我对上面的例子做了稍小的改变，在obj对象的foo函数的内部又定义了一个bar函数，我们通过调用obj对象去调用foo函数，里面的bar函数也会被调用。结果再一次证明了函数被单独调用时this指向window

被对象调用(隐式绑定)

const obj={
    foo(){
        console.log(this)
    }
}
obj.foo()	//	obj

这就很好理解了，这个函数是被obj对象调用的，那么它的this就指向这个obj对象。

创建构造函数(通过new绑定)

function Person() {
    this.name = '张三'
    this.age = 18
    this.say = function() {
        console.log(this)
    }
}
new Person().say()		//Person {name: '张三', age: 18, say: ƒ}

通过new来调用构造函数在内存中创建一个新对象，this会指向这个新对象

---

注意：

关于this的指向，有好多人和作用域分不开，这两个东西完全是两回事！作用域链是定义时就基本确定的，而这个this指向是很灵活的，当函数被调用时才会被绑定，也可以随时改变。

var a = 2333

const obj = {
    foo() {
        var a = 1

        function bar() {
            console.log(a)
            console.log(this.a)
        }
        return bar
    }
}
let Bar = obj.foo()
Bar()

//    1
//    2333

如果上面的内容懂了（如果没懂，那一定是我没讲明白，hhh）打印2333应该是很容易看出来的。还是熟悉的味道，通过obj对象调用foo函数返回一个bar函数，然后“单独”的调用，this指向全局，打印的是全局变量a：2333。这个1是怎么来的呢？没错，就是通过作用域链访问到的父级活动对象AO的a变量，不知道啥是AO也没关系，就理解成去父级作用域取到了值为1的a变量就可以了。

通过作用域链访问是“按部就班”的，一层一层的查找。而this的指向特别灵活，甚至可以直接改变this的指向(下面会说)，所以通过this指向所取得的变量和通过作用域链访问到的变量完全是两个概念。

---

改变this指向(显示绑定)：call，apply ，bind

调用函数时我们可以通过上面的方法去改变函数内部this指向。

以call为例：

var a = 2333

const o={
    a:123
}

const obj = {
    foo() {
        var a = 1

        function bar() {
            console.log(a)
            console.log(this.a)
        }
        return bar
    }
}
let Bar = obj.foo()
Bar.call(0)

//    1
//    123

这里只有微小的变动，在全局又定义了一个对象o里面包含a变量，值为123 调用Bar时通过call函数改变了this的指向，不再指向了全局而是o对象，所以打印的不再是2333而是123。

注意：new的优先级高于显示绑定，显示绑定高于隐式绑定，隐式高于默认绑定

---

关于调用位置：

补充：

• 通过setTimeout定时器调用回调函数他的this指向全局：

setTimeout(function(){
    console.log(this)
},1000)
//		 window

注意：如果是箭头函数的话，this是根据上下文的指向来确定的

• 事件处理程序中函数的this指向为绑定的节点元素对象