this指向小总结

this指向总结

概念：this是运行环境下的一个系统变量，由于this在不同的执行环境下有不同的值，所以在使用this时，多加注意（使用this之前，先打印）

1. 在全局作用域下，this默认指向window（前端运行环境下）
   • 后端运行环境是空对象
2. 在事件函数中，this指向绑定事件的目标
3. 在对象中，this指向它所在的对象本身
4. 在构造函数中，this指向构造函数创建的对象
5. 特殊情况：在函数嵌套时
   • 内层的函数this不会继承外层函数this的值，会被还原成window
   • 如果想让内层函数的this和外层函数的this统一指向，内层函数请使用箭头函数
6. 在ajax回调函数中，this指向window

修改this指向的三种方法

function add(a, b) {
    console.log(this, a+b )
}
add(3, 4)

1. 通过call函数修改：用函数直接调用call()，第一个参数是this修改后的指向（支持引用类型，如果传入值类型会自动装箱），后边的参数是函数add的原始参数，调用call时会直接执行add函数。

   add.call('李四', 5, 6)

2. 通过apply函数修改：用函数直接调用apply()，第一个参数是this修改后的指向（支持引用类型，如果传入值类型会自动装箱），后边的参数是函数add的原始参数所在数组，调用apply时会直接执行add函数。

   add.apply(false, [5, 6])

3. 通过bind函数修改：用函数直接调用bind()，第一个参数是this修改后的指向（支持引用类型，如果传入值类型会自动装箱），后边的参数是函数add的原始参数，调用bind时不会直接执行add函数。

   var obj = { name: '王二', age: 20 }

   调用bind后会返回一个新的函数

   var newAdd = add.bind( obj, 5, 6)

   newAdd()

call、apply和bind的使用场景

1. call适合在调用函数时修改this指向，直接使用call或apply修改即可
2. bind适合在修改this指向时，不立即调用函数，而是等时机成熟时再调用的情况，如：计时器、ajax请求登录异步回调函数的修改

再次声明：在函数潜逃的情况下，如果内层函数中的this指向的是外层函数中的this时，更建议使用箭头函数，因为箭头函数没有自己的this，箭头函数中的this指向其上下文中的this