一、普通作用域下的 this
1.函数内this
this 指向 上层 对象。
1.1 函数在 最外层
- web 浏览器下 指向的是 window
- node 环境下 指向的是 global
例如:
1 | function foo(){ |
1.2 函数在 内层
示例1:
1 | const obj = { |
示例2:
1 | function foo(){ |
2.字面变量声明的对象下的 this
*指向 全局 *
- web 浏览器下 指向的是 window
- node 环境下 指向的是 global
例如:
1 | const obj = { |
3.构造函数内this
指向实例,注意只有 new 的 function 才叫做 构造函数,只有new 之后的对象才是 实例。
例如:
1 | function Person() { |
4.原型链上内的this
指向实例,等同于构造函数内this
例如:
1 | function Person(){ |
二、改变 this 指向
call、apply、bind ** 是函数对象的 方法, **call、apply、bind 绑定的 this,均指向 第一个参数
1.call
function.call(thisArg, arg1, arg2, …) ,第一个参数是 this,后面是 函数对象 本身的参数。
作用有两个:① 执行当前函数 ② 绑定 一个 对象 作为 当前 this。
更多详情
示例1:
1 | function foo(age){ |
示例2:
1 | const p = { |
2.apply
function.apply(thisArg, [argsArray])
call() 方法的作用 和 apply() 方法类似,区别就是call()方法接受的是参数列表,而apply()方法接受的是一个参数数组。
更多详情
示例:
1 | function foo(age,hobby){ |
3.bind
function.bind(thisArg[, arg1[, arg2[, …]]])
bind() 方法创建并返回一个新的函数, ,在 bind() 被调用时,这个新函数的 this 被指定为 bind() 的第一个参数,而其余参数将作为新函数的参数。
更多详情
示例:
1 | function foo(age,hobby){ |
三、箭头函数
箭头函数是 ES6 加入的,作用几乎等同于 普通 函数,其中一点重要不同的是 箭头函数内没有 this,也可以说指向的是外层的 this。 箭头函数 更多用法详情
所以在箭头函数内,要小心的使用 this。
1.箭头函数没有this
示例2:
1 | const person = { |
say 函数的 this 指的是 全局下的 window 或 global
2.箭头函数不可作为 构造函数,不存在 this 问题
示例1:
1 | const Person = (name)=>{ |
四、总结:万能大法
- 非箭头函数:谁调用 this 就指向谁,没有对象调用 默认指向 全局 window 或 gobal。
- 构造函数或原型链的函数: 永远指向 实例。
- call、apply、bind 情况下 this 永远指向 第一个 参数。
- 箭头函数:没有this,或指向 外层作用域下的 this。