关于this 关于this

关于this this 是我们在开发中常常用到的关键字，在全局环境中，也就是代码最外层，this 对象始终指向全局对象，在浏览器中就是 window ，而在函数内，this 的指向取决于函数被调用的方式，函数通常有以下几种调用情况：

作为普通函数调用
作为对象的方法调用
作为构造函数调用
call 和 apply 调用
bind 方法
作为 Function.prototype 上添加的自定义方法调用
作为 dom事件处理函数调用
作为内联事件处理函数调用

作为普通函数调用

window.a = 1 function f(){ let a = 2 console.log(this.a) } f() // 1

当函数直接调用时，此时函数中的 this 指向的是全局对象，在浏览器环境中就是 window 对象，因此打印的 this.a 就是 window.a 。
【关于this】而在严格模式下，作为普通函数调用中的 this 则为 undefined

window.a = 1 function f(){ "use strict" let a = 2 console.log(this) } f() // undefined

作为对象的方法调用当函数作为对象的方法被调用时，this 指向调用该函数的对象。

let o = { a:1, f(){ console.log(this.a) } } o.f() //1

作为构造函数调用

let Con = function(){ this.a = 1 } let instance = new Con() console.log(instance.a) //1

在使用 new 操作符调用构造函数 Con 创建实例时，会经历四个步骤：

创建一个空对象 {}
将这个空对象链接到构造函数(空对象的 __proto__ 链接到 Con的 prototype)
绑定 this 到新创建的对象并执行构造函数
如果构造函数没有返回对象，则返回 this 也就是新创建的对象

但是如果上面的第4步中构造函数返回了一个对象的话，那么最终就不会返回 this

const Con = function(){ this.a = 1 return {b : 1} } const instance = new Con() console.log(instance.a) //undefined console.log(instance.b) //1

call和apply调用如果函数通过 call 与 apply 调用的话，那么该函数指定一个 this对象

const a1 = { a:1, f(){ return this.a } } const a2 = { a:2 } console.log(a1.f()) //1 console.log(a1.f.call(a2)) //2 console.log(a1.f.apply(a2)) //2

bind 函数调用 bind 时，会创建一个新的函数，这个新的函数的 this 指向调用bind时传入的第一个参数。

const a1 = { a:1, f(){ return this.a } } const a2 = { a:2 } console.log(a1.f()) //1 console.log(a1.f.bind(a2)()) //2

要注意的是，多次 bind的情况下，永远只会指向第一次 bind 指定的 this

const a1 = { a:1, f(){ return this.a } } const a2 = { a:2 } const a3 = { a:3 } console.log(a1.f()) //1 console.log(a1.f.bind(a2).bind(a3)()) //2

bind 可以理解为返回了一个包含了 apply 的函数，类似下面这样：

// 忽略传入arguments等实现细节 Function.prototype.likeBind = function(context){ let _this = this return function f(){ return _this.apply(context) } }

那么多次 bind 就可以理解为下面这样：

// a1.f.bind(a2).bind(a3)() 相当于如下 const f2 = function(){ return a1.f.apply(a2) } const f3 = function(){ return f2.apply(a3) } f3()//合并两个函数相当于 const f4 = function(){ return function(){ return a1.f.apply(a2) }.apply(a3) } f4()

我们可以发现，多次bind最终执行的始终是 a1.f.apply(a2)，所以多次 bind 永远只会指向第一次 bind 指定的 this。
作为Function.prototype上添加的自定义方法调用在模拟 bind 时，向 Function.prototype 添加了一个自定义方法 likeBind ，当它作为函数原型链上的方法被调用时，this指向调用它的那个函数

Function.prototype.likeBind = function(context){ let _this = this console.log(_this) //这里指向 a 函数 return function f(){ return _this.apply(context) } } const a = function(){ } const b = function(){ } a.likeBind(b)

作为dom事件处理函数调用在dom事件处理函数里，this 指向这个处理函数所绑定的dom节点

1 2

document.getElementById('ul').addEventListener('click',function(e){ console.log(e.target) console.log(e.currentTarget) console.log(this) console.log('--------------------') })

文章图片
chrome调试作为内联事件处理函数调用在内联事件的处理函数中，跟dom事件类似，this 指向绑定该处理函数的 dom。

1 2

箭头函数箭头函数和一般的函数不同，它没有自己单独的 this，在箭头函数中的 this 取决于该箭头函数定义时的外部函数的 this。因为没有 this指针，所以对箭头函数使用bind，apply，call 这些修改 this 指向的方法是无效的。

const a1 = { a:1, f:()=>{ return this.a } } const a2 = { a:2 } console.log(a1.f()) //undefined console.log(a1.f.call(a2)) //undefined console.log(a1.f.apply(a2)) //undefined console.log(a1.f.bind(a2)()) //undefined

因为其 this 指向无法修改的问题，通常不太适合作为对象的方法来调用。
原文地址
参考