this的指向问题及改变this指向

概念：

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

1,在全局作用域下，this默认指向window（前端运行环境），{}（后端运行环境）.

2,在事件函数中，this指向绑定事件的目标

3,在构造函数中，this指向构造函数将要创建的对象

4,在对象中，this指向对象本身

特殊情况：（1） 有函数嵌套时，内层的函数this不会继承外层函数的this的值，会被还原成window

如果像让内层函数的this和外层函数this统一指向, 内层函数请使用箭头函数（因为箭头函数没有自己的this，会在上下文查找）

（2）在ajax回调函数中, this指向window

 

修改this指向

修改this指向:   三种方法    call   apply    bind

 

function add(a, b) {

            console.log(8, this, a + b)

        }

        add(3, 4)

1, 通过call函数修改this指向, 用函数直接调用call(),

第一个参数是this修改后的指向(支持引用类型,如果传入值类型会自动装箱),

后边的参数是函数add的原始参数, 调用call时会直接执行add函数。

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

 

2,通过apply函数修改this指向, 用函数直接调用apply(),

第一个参数是this修改后的指向(支持引用类型,如果传入值类型会自动装箱),

后边的参数是函数add的原始参数所在的数组,

调用apply时会直接执行add函数

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

 

3,通过bind函数修改this指向,用函数不会直接调用bind(),

第一个参数是this修改后的指向(支持引用类型,如果传入值类型会自动装箱),

后边的参数是函数add的原始参数, 调用bind时不会直接执行add函数

　　var obj = { name: "思聪", age: 10 }
      调用bind后会返回一个新的函数
   var newAdd = add.bind(obj, 5, 6)
      调用新的函数得到修改后的this
   newAdd()

 

3，call和apply和bind的异同点：
            (一), call和apply 修改this指向时会立即调用函数, bind修改指向不会立即调用函数会, 返回一个新函数
            (二), call,bind的第二个参数是函数的原始参数写法, apply的第二个参数必须是数组, 数组中放的是原始参数
 4，使用场景：

    　　　　(一), call 适合在调用函数时修改this指向, 直接使用call或apply修改即可
            (二), bind 适合在修改this指向时, 不立即调用函数, 而是时机成熟时在调用的情况,  如: 计时器, ajax请求等异步回调函数的修改

注意：事件函数修改this时，一定要用bind

btn6.onclick = function () {
            console.log(9, this)
        }.bind(document.body)