JS中改变this指向的六种方法

大家肯定为this指向的问题感到烦恼，接下来让我为大家介绍六种改变this指向的方法吧！

1、在指定位置定义this存为变量

    // 在指定位置定义this存为变量
    // 我们可以自己存一个变量
    let _this = this
    const obj = {
        fun(){
            console.log(_this) //window
        }
    }
    obj.fun()
1
2
3
4
5
6
7
8
9

2.箭头函数

    // 箭头函数
    // 获取按钮，添加点击事件
    document.querySelector("button").onclick = ()=>{
        // 在我们普通函数下的事件this指向调用者
        console.log(this) //window
    }
1
2
3
4
5
6

3.使用setTimeout

    // 使用setTimeout，this指向window
    // 获取按钮，添加点击事件
    document.querySelector("button").onclick = function(){
        setTimeout(function(){
            console.log(this) //window
        },1000)
    } 
1
2
3
4
5
6
7

4.call( )方法改变this指向

作用：调用函数 改变this指向
语法：fun.call(thisArg，arg1，arg2，…)
thisArg：在fun函数运行时指定的this值
arg1，arg2：传递的其他参数
返回值就是函数的返回值，因为它就是调用函数

    const obj = {
        uname: "张三"
    }
    function fun(a, b) {
        //正常情况下指向window
        // 这里我们使用了call方法改变了this指向，指向了obj
        console.log(this) //指向obj {uname : "张三"}
        // 这里我们传了2个值 1 2
        console.log(a + b) //3
    }
    fun.call(obj, 1, 2)
1
2
3
4
5
6
7
8
9
10
11

5.apply( )方法改变this指向

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

    const obj = {
        uname: "张三"
    }
    function fun(a, b) {
        //正常情况下指向window
        // 这里我们使用了apply方法改变了this指向，指向了obj
        console.log(this) //指向obj {}
        // 这里我们传了2个值 1 2
        console.log(a + b) //3
    }
    fun.apply(obj, [1, 2])
1
2
3
4
5
6
7
8
9
10
11

6、bind( )方法改变this指向(重要)

bind()方法不会调用函数。但是能改变函数内部this指向
语法：fun.bind(thisArg，arg1，arg2，…)
thisArg：在fun函数运行时指定的this值
arg1，arg2：传递的其他参数
返回由指定的this值和初始化参数改造的 原函数拷贝(新函数)
因此当我们只是想改变this指向，并且不想调用这个函数的时候，可以使用 bind ，比如改变定时器内部的this指向

不调用函数：

    function fun() {
        console.log(this) //不打印
    }
    fun.bind()
1
2
3
4

原函数拷贝(新函数)

    const obj = {
        uname: "张三"
    }
    function fun() {
        console.log(this)
    }
    // 相当于拷贝
    // function fun() {
    //     console.log(this)
    // }
    fun.bind(obj)
1
2
3
4
5
6
7
8
9
10
11

如果想要使用：

    const obj = {
        uname: "张三"
    }
    function fun() {
        console.log(this) //指向obj {uname:"张三"}
    }
    // 加()
    fun.bind(obj)()
1
2
3
4
5
6
7
8

感谢大家的阅读，如有不对的地方，可以向我指出，感谢大家！