改变this指向

改变this指向

js中允许改变函数中this的指向，有3个方法可以动态指定普通函数中this的指向

call

使用call方法调用函数，同时指定被调用函数中this的指向

fun.call(thisArg,arg1,arg2....)
thisArg 在fun函数运行时指定的this值
arg1，arg2 传递的其他参数
返回值就是函数的返回值，因为它就是调用函数

使用场景：Object.prototype.toString.call(数据) 检测数据类型

 // 使用场景：Object.prototype.toString.call(数据)  检测数据类型

        // typeof 检测数据类型不够精确
        console.log(typeof '123');  //string
        console.log(typeof [])   //object
        console.log(typeof null)  //object

        // Object.prototype.toString.call(数据)  返回的结果是[object xx类型]
        console.log(Object.prototype.toString.call('123'));  //[object String]
        console.log(Object.prototype.toString.call(123))   //[object Number]
        console.log(Object.prototype.toString.call([]))  //[object Array]
        console.log(Object.prototype.toString.call(null))  //[object Null]

apply

使用apply方法调用函数,同时指定被调用函数中this的值

fun.apply(thisArg,[argsArray])
thisArg 在fun函数运行时指定的this值
argsArray 传递的值，必须包含在数组里面
返回值就是函数的返回值，因为它就是调用函数

使用场景： 求数组的最大值/最小值

// 使用场景： 求数组的最大值/最小值
console.log(Math.max(...[1,2,4]))  //4

// apply 或者call 如果不需要改变this指向 写null
console.log(Math.max.apply(null,[8,45,1,34]))  //45

使用举例

        // 改变this指向 apply
        const obj = { name: "佩奇" }
        function fun(x, y) {
            console.log(this)
            return x + y
        }
        fun()  // window
        // fun.apply() 1.调用函数
        // fun.apply(obj,[1,2]) 2.改变this指向
        fun.apply(obj, [3, 4])  // 参数必须是数组
        console.log(fun.apply(obj, [3, 4]))

        // 使用场景：求数组的最大值/最小值
        console.log(Math.max(...[1, 2, 4]))  //4

        // apply 或者call 如果不需要改变this指向 写null
        console.log(Math.max.apply(null, [8, 45, 1, 34]))  //45
        console.log(Math.min.apply(null, [8, 45, 1, 34]))  //1

bind

bind()方法不会调用函数，但是能改变函数内部this的指向

fun.bind(thisArg,arg1,arg2,...)
thisArg 在fun函数运行时指定的this值
arg1，arg2 传递的其他参数
返回由指定的this值和初始化参数改造的原函数拷贝(新函数)

代码

    <button class="code">发送验证码</button>
    <script>
        const obj = {name:"佩奇"}
        function fun(x,y,z){
            console.log(this)
            return x+y+z
        }

        // fun.bind()  //不会调用函数
        // const fn=fun.bind()
        // console.log(fn)
        // console.log(fn===fun)  //false

        // const fn = fun.bind(obj)  //bind可以改变this指向
        // fn()

        const fn = fun.bind(obj,3,4,5)  //bind可以改变this指向
        console.log(fn())


        // 使用场景 不需要调用函数，但是又想改变函数内部this的指向
        const codeBtn = document.querySelector('.code')
        let flag = true
        codeBtn.addEventListener('click',function(){
            if(flag){
                let i = 5
                this.innerHTML =`05秒后重新获取`
                let timerId = setInterval(function(){
                    // this----window-----codeBtn
                    i--
                    this.innerHTML = `0${i}秒后重新获取`
                    if(i===0){
                        this.innerHTML = `重新获取`
                        clearInterval(timerId)
                        flag = true
                    }
                }.bind(this),1000)
                flag =false
            }
        })

    </script>

this指向整理

  this的取值 不取决于函数的定义 ，而是取决于怎么调用(this指向调用者)
1.全局调用   window
2.对象内的方法调用 obj.sing()  指向调用对象
3.构造函数调用 new Person() 指向实例对象
4.事件处理函数调用  指向触发事件的dom元素

特殊调用 比如 call  apply bind 可以改变this的指向，fun.call(obj)  指向obj