一、什么是this？
this是JavaScript语言的一个关键字，它是函数运行时在函数体内部自动生成的一个对象，只能在函数体内部使用。函数的不同使用场合，this的指向不同。
在ES5中，this永远指向最终调用它的对象。
例1：这里最终调用函数a的对象是全局window,相当于window.a()。 所以this指向window，this.name的值为全局变量name的值 ‘windowsName’。
|
1 2 3 4 5 6 7 8 |
var name = "windowsName"; function a () { var name = "Cherry"; console.log(this.name); // windowsName console.log(this); // [object Window] } a(); console.log(this) // [object Window] |
例2： a.fn()调用函数fn的最终对象是a，this指向对象a，所以最终的name值是’skillnull’。 window.a.fn()调用函数fn的最终对象是a，this指向a，所以最终的name值是’skillnull’。 注：由于window下的变量和方法访问和调用的时候可以省略window，所以a.fn() === window.a.fn()。 b()调用函数fn的最终对象是window，this指向window，所以最终的name值是’windowsName’。 这里将a.fn赋值给变量b的时候并没有调用fn。
|
1 2 3 4 5 6 7 8 9 10 11 12 |
var name = "windowsName"; var a = { name: "skillnull", fn: function () { console.log(this.name); } } a.fn(); // skillnull window.a.fn(); // skillnull var b = a.fn; b(); // windowsName |
二、如何改变this的指向？
使用 ES6 的箭头函数
箭头函数的 this 始终指向函数定义时的 this，而非执行时。
例3：注：若setTimeout推迟执行的函数是某个对象的方法，那么该方法中的this关键字将指向全局环境。 由此可以看出a.fn2()中被setTimeout推迟执行的函数的最终调用对象是window，this指向window， 而window中没有fn1方法，所以最终结果为错误信息：this.fn1 is not a function。 a.fn3()中被setTimeout推迟执行的函数使用了箭头函数，此时的this指向函数定义时的this，即a，结果为：skillnull。 a.fn4()中的函数没有被setTimeout推迟执行，最终对象仍为a，此时的this指向a，所以最终结果为：skillnull。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
var name = "windowsName"; var a = { name: "skillnull", fn1: function () { console.log(this.name) }, fn2: function () { // console.log(this) // a setTimeout(function () { // console.log(this) // [object Window] this.fn1() }, 100); }, fn3: function () { setTimeout(() => { // console.log(this) // a this.fn1() }, 100); }, fn4: function () { this.fn1() } }; a.fn2() // this.fn1 is not a function a.fn3() // skillnull a.fn4() // skillnull |
在函数内部使用 that = this
如果上面例子中的fn2中使用that = this改变一下this的指向,此时that属于fn2的内部变量，指向a，结果为：skillnull
|
1 2 3 4 5 6 7 |
fn2: function () { var that = this; setTimeout(function () { // console.log(that) // a that.fn1() }, 100); } |
new 实例化一个对象
如果函数调用前使用了 new 关键字, 则是调用了构造函数。这看起来就像创建了新的函数，
但实际上 JavaScript 函数是重新创建的对象。new实例化一个对象的过程如下：
1.创建一个空对象 obj;
2.将新创建的空对象的隐式原型指向其构造函数的显示原型。
3.使用 call 改变 this 的指向
4.如果无返回值或者返回一个非对象值，则将 obj 返回作为新对象；
如果返回值是一个新对象的话那么直接直接返回该对象。
|
1 2 3 4 5 6 7 8 |
伪代码表示： var a = new myFunction("Li", "Yafei"); new myFunction { var obj = {}; obj.__proto__ = myFunction.prototype; var result = myFunction.call(obj, "Li", "Yafei"); return typeof result === 'obj' ? result : obj; } |
使用 apply、call、bind
例4：call、apply、bind都可以更改this的指向，三者作用相同。 由于a.fn赋值给全局变量b的时候没有执行，上面已经说过，此时的this指向widnow， 调用b(‘skill’, ‘null’)的结果为：i am skillnull 而在调用方法b的时候使用call、apply或bind，将此时的this指向a，所以最终结果是：i am not skillnull
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
var name = 'i am ' var a = { name: "i am not ", fn: function (a, b) { console.log(this.name + a + b) } } var b = a.fn; b('skill', 'null') // i am skillnull b.call(a, 'skill', 'null') // i am not skillnull b.apply(a, ['skill', 'null']) // i am not skillnull b.bind(a, 'skill', 'null')() // i am not skillnull |
三、call、apply、bind 和 this 的关系
从上面的文章可以看出来，其实call、apply、bind最常用的用途是更改this指向。
四、call、apply、bind三者的区别
call和apply不同之处主要在于参数的形式，call参数是一个列表，apply参数是一个数组。
而bind会创建一个新函数，需要手动调用，bind的参数形式和call相同。
注：如果当前函数处于非严格模式下，则指定为 null 或 undefined 时会自动指向全局对象
（浏览器中就是window对象）。
