Javascript函数中 this 指向

•  this 指向

• 改变 this

目录

this 指向

普通函数this指向

箭头函数this指向

改变 this

call()

apply()

bind()

call apply bind 总结

---

---

this 是 JavaScript 最具 “魅惑” 的知识点，不同的应用场合 this 的取值可能会有意想不到的结果，在此对以往学习过的关于【 this 默认的取值】情况进行归纳和总结。

目标： 了解函数中 this 在不同场景下的默认值，知道动态指定函数 this 值的方

this 指向

• 普通函数this指向

普通函数的调用方式决定了 this 的值，即【谁调用 this 的值指向谁】

普通函数没有明确调用者时 this 值为 window，严格模式下没有调用者时 this 的值为 undefined

<button>点击</button>

    <script>

        // 普通函数 
        console.log(this); // window
        function fn() {
            console.log(this); // window
        }
        
        window.fn()// fn()

        // setTimeout()
        window.setTimeout(function() {
            console.log(this); // window
        }, 1000)



        document.querySelector('button').addEventListener('click', function() {
            console.log(this);  // 指向 button
        })

        const obj = {
            sayHi: function () {
                console.log(this);  // 指向 obj
            }
        }
        obj.sayHi()  // 调用

    </script>

严格模式下是这样的

 

• 箭头函数this指向

箭头函数中的 this 与普通函数完全不同，也不受调用方式的影响，事实上箭头函数中并不存在 this 

1. 箭头函数会默认帮我们绑定外层 this 的值，所以在箭头函数中 this 的值和外层的 this 是一样的

2. 箭头函数中的 this 引用的就是最近作用域中的  this

3. 向外层作用域中，一层一层查找 this，直到有this的定义

场景一：

这个箭头函数 this 指向外层 外层是对象 对象里面没有 this 函数作用域内才有 this

所以这个 this 指向 window

 场景二：

此时的 this 不指向 btn 而是指向 window

所以如果需要 btn 则不推荐使用 箭头函数

 场景三：

使用了箭头函数 所以原型对象里面的 this 不指向 p1

 

改变 this

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

• call()

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

语法：

fun.call(thisArg, arg1, arg2, ...)

说明：

• thisArg：在 fun 函数运行时指定的 this 值

• arg1，arg2：传递的其他参数

• 返回值就是函数的返回值，因为它就是调用函数

<script>
        const obj = {
            uname: 'pink'
        }
        function fn(x, y) {
            console.log(this);  // window
            console.log(x + y);
        }
        // 1. 调用函数
        // 2. 改变 this 指向
        fn.call(obj, 1, 2)
</script>

• apply()

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

语法：

fun.apply(thisArg, [argsArray])

说明：

• thisArg：在fun函数运行时指定的 this 值 这个参数不能省略 要是没有指向 写 null 也可以

• argsArray：传递的值，必须包含在数组里面

• 返回值就是函数的返回值，因为它就是调用函数

• 因此 apply 主要跟数组有关系，比如使用 Math.max() 求数组的最大值

<script>
        const obj = {
            age: 18
        }
        function fn(x, y) {
            console.log(this);  // 本来指向 window 改变之后指向 obj
            console.log(x + y);
        }
        // 1. 调用函数
        // 2. 改变 this 指向  改变了 this 指向 obj
        // 3. 返回值  本身就是在调用函数  所以返回值就是函数的返回值
        fn.apply(obj,[1, 2])
</script>

使用场景：

求数组最大值

<script>
    // 使用场景：求数组组最大值
        // const max = Math.max(1, 2, 3)  // 这个是求数字里的最大数值
        const arr = [100, 44, 77]
        const max = Math.max.apply(Math, arr)
        const min = Math.min.apply(Math, arr)
        console.log(max);
        console.log(min);
</script>

• bind()

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

语法：

fun.bind(thisArg, arg1, arg2, ...)

说明：

• thisArg：在 fun 函数运行时指定的 this 值

• arg1，arg2：传递的其他参数

• 返回由指定的 this 值和初始化参数改造的 原函数拷贝 （新函数）， 也就是说返回的是一个新函数，只不

  过里面的 this 已经改过了 (改成指定的 this)

• 因此当我们只是想改变 this 指向，并且不想调用这个函数的时候，可以使用 bind，比如改变定时器内部

  的this指向.

<script>
        const obj = {
            age: 18
        }
        function fn() {
            console.log(this);
        }

        // 1. bind 不会调用函数
        // 2. 能改变 this 指向
        // 3. 返回值是个函数  但是这个函数里面的 this 是更改过的 obj
        const fun = fn.bind(obj)
        fun()
</script>

使用场景：

按钮点击里面就禁用  2秒钟之后开启

 <script>
        const btn = document.querySelector('button')
        btn.addEventListener('click', function() {
            // 禁用按钮
            this.disabled = true
            // setTimeout 调用者是 window  普通函数里面 this 指向调用者
            window.setTimeout(function () {
                // 在这个普通函数里面  我们要 this 原来的 window 改为 btn
                this.disabled = false
            // }.bind(btn), 2000)
            }.bind(this), 2000)  // this 也可以 因为其这里 this 和上一级一样 指向 btn
        })
 </script>

• call apply bind 总结

• 相同点

  1. 都可以改变函数内部的this指向

• 区别点

  1. call 和 apply 会调用函数, 并且改变函数内部this指向.

  2. call 和 apply 传递的参数不一样, call 传递参数 aru1, aru2..形式 apply 必须数组形式[arg]

  3. bind 不会调用函数, 可以改变函数内部this指向.

• 主要应用场景

  1. call 调用函数并且可以传递参数

  2. apply 经常跟数组有关系. 比如借助于数学对象实现数组最大值最小值

  3. bind 不调用函数, 但是还想改变this指向. 比如 改变定时器内部的this指向.