JS中的this-优快云博客

文章详细阐述了JavaScript中不同场景下this的指向规则，包括对象方法、箭头函数、事件绑定、全局函数和构造函数。并介绍了如何通过箭头函数以及函数的call、apply、bind方法来改变this的指向，提供了相关代码示例进行解释。

this的指向

对象方法中的this：被谁调用就指向谁

箭头函数中的this：与上下文一致

事件绑定函数中的this：指向事件触发的元素

全局普通函数中的this：指向window

构造函数中的this：指向实例化对象

this指向改变的方法

1.使用箭头函数

箭头函数无自身this指向，根据这一特性可以改变this指向。下面用代码演示：

    document.addEventListener('click',function(){
        console.log(this);//控制台输出#document

        setTimeout(()=>{
            console.log(this)//控制台输出#document
        },1000);

        setTimeout(function(){
            console.log(this)//控制台输出window对象
        },2000);
    })

2.使用函数内置的call，apply，bind方法

不妨设对象obj为希望绑定的this指向，则有：

名称

call

apply

bind

语法

fn.call(obj,参数1，参数2，参数3...);

fn.apply(obj,[参数1，参数2，参数3...]);

fn1=fn.bind(obj);

fn1(参数1，参数2，参数3...);

简介

绑定新的this对象后立即调用

绑定新的this对象后返回新函数，不会立即调用，新函数较原函数仅this指向发生改变

以上提到的参数1，参数2，参数3...为fn的实参，若fn无参数，则不必设置。下面用代码演示：

    obj1={
        a:2,
        b:3,
        fn(c,d){
            return this.a+this.b+c+d;
        }
    }
    obj2={
        a:4,
        b:5
    }
    console.log(obj1.fn(4,5))//此时fn中this指向obj1，所以结果为2+3+4+5=14

    console.log(obj1.fn.call(obj2,4,5))//此时fn中this指向obj2，所以结果为4+5+4+5=18

    console.log(obj1.fn.apply(obj2,[5,6]))//此时fn中this指向obj2，所以结果为4+5+5+6=20

    fn2=obj1.fn.bind(obj2)
    console.log(fn2(4,5))//此时fn中this指向obj2，所以结果为4+5+4+5=18