修改this指向的方法

总结this的指向

• 函数直接调用，this就是window
• 函数如果被对象调用，谁调用，this就是谁

• 函数绑定到事件里，被事件触发调用，this就是绑定这个事件的元素
• 函数被new调用，那么函数里的this就是new创建出来的对象

• 函数被定时器调用，那么this就是window
• 如果是箭头函数，当前this是什么，箭头函数里的this就是什么

修改this指向之 call

• 语法

函数.call(要修改的this指向, 实参列表)

• • 其实以前该怎么给函数传参，现在依然怎么传，只不过相当于在前面多了一个参数，多的这个参数是用来传递要修改的this指向

function getSum (n1, n2) {

            console.log(n1, n2, this)
        }

        getSum(10, 20) // 10 20 window
        // 既想修改this指向，又想传值
        // call的参数1就是修改的this指向
        // 参数2就是给第一个形参传递的实参
        // 参数3就是给第二个形参传递的实参
        // 以此类推

        // 换句话说，使用call以后，以前该怎么传参还怎么传，只不过在最开始多了一个要修改的this指向
        getSum.call(p1, 10, 20) // 10 20 p1对象

        getSum.call(p1, 99) // 99 undefinned p1对象

• call细节

• • 如果传递的是null、undefined或者不传，那么this就是window
  • 如果传递的是基本类型，那么this就是这个基本数据对应的包装类型

修改this指向之 apply

• apply特点跟call是一样的，区别只是在于传参不同
• 语法

函数.apply(要修改的this指向, 数组或伪数组)

• 例：

  function fn(n1, n2) {

            console.log(this, n1, n2)
        }

        fn(10, 20) // window 10 20

        let p1 = {
            name: 'jack',
            age: 16
        }

        // 用数组或伪数组里的元素跟形参一一对应
        // 第一个元素给第一个形参，第二个元素给第二个形参，以此类推
       fn.apply(p1, [10,20]) // p1 10 20
       fn.apply(p1, [10]) // p1 10 undefined

• 它相当于可以把数组一一铺开，变成 10,20，所以有如下妙用

        // 妙用
        // 这个是可以求最大值
        let arr = [10, 20, 102, 32, 54, 9]
        // 我怎么才能把把arr给一一铺开？
        // Math.max 这个max是由Math对象来调用的
        // 所以里面的this默认就是Math
        // 而此时我们用apply的目的不是为了修改this指向
        // 只是为了把数组一一铺开，所以修改的this指向还是传入Math，代表不修改
        let res = Math.max.apply(Math, arr)
        console.log(res)

修改this指向之bind

• 跟call、apply的区别在于：

• • call和apply会立即调用函数
  • 而bind不会立即调用函数，而是产生一个修改了this指向的新函数

• 语法

let 新函数 = 函数.bind(this指向)

• • 例

            function fn () {
    
                console.log('fn被调用',this)
            }
    
            let p1 = {name:'jack', age: 16}
    
            // fn.call(p1)
            // fn.apply(p1)
    
            // 把里面的this改成p1对象，返回一个修改了this指向后的新函数
            let newFn = fn.bind(p1)
            newFn() // 它调用里面的this就是p1
    
            fn() // window，bind不会影响原来函数的this

• 如果bind时，没绑定实参，那么后面调用新函数还能继续传参
• 如果bind时，绑定了实参，那么后面新函数怎么调用它都是原来绑定的实参

• 例

        let p1 = {name: 'jack'}
        // // bind时如果仅仅只是修改this指向，没有传参
        // let newFn = fn.bind(p1)
        // // 那么新函数调用时就可以传参
        // newFn(10,15) //p1 10 15
        // newFn(10) // p1 10 undefined
        // newFn() // p1 undefined undefined


        // bind时如果既修改了this指向，又传递了实参
        // 产生的新函数的this绑定到p1，且参数1绑定到15，参数2绑定到18
        let newFn = fn.bind(p1, 15, 18)
        newFn() // p1 15 18

        // 因为它之前绑定了参数，那么你后面调用新函数
        // 不管怎么传，它都是之前绑定的函数
        newFn(33,65) // p1 15 18