this指向及强制性修改this指向的三种方法详解

原创已于 2023-09-26 15:05:57 修改 · 806 阅读

CC 4.0 BY-SA版权

文章标签：

于 2022-05-07 19:41:31 首次发布

15 篇文章

订阅专栏

本文详细解析JavaScript中this在不同场景下的行为，涵盖普通函数、对象方法、构造函数、定时器、事件绑定及箭头函数，并介绍call/apply/bind修改this指向的方法、格式和应用场景，特别关注在Vue中的使用和实例演示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

this指向: 永远指向它的调用者; 官方说法:执行上下文(执行环境)

1、普通函数this指向--->Window

function fn1() {
    console.log(this);
}

fn1();

2、在对象中this指向--->当前对象

var obj = {
    a : 1,
    b : function () {
        console.log(this);
    }
}

obj.b();

3、在构造函数中this指向--->实例对象

function Person(name) {
    this.name = name;
    console.log(this);
}

var p1 = new Person('王憨憨');

4、在定时器中this指向--->Window

setInterval(() => {
    console.log(this);
}, 1000)

5、在绑定事件中this指向--->当前事件对象

document.onclick = function () {
     console.log(this);
}

6、箭头函数不会改变this指向

在vue中我平常使用的时候;一般情况下都会 let vm = this

methods: {

add(){

let vm = this;

}

但是在写代码的过程中，难免会遇到需要修改this指向的情况，这个时候就需要使用我们修改this指向的三种方法了。

var obj = {
     a: 1,
     b: 2
}

function fn1(a, b) {
    console.log(this, a, b);
}

修改this指向三张方法的格式以及注意事项：

强制修改this指向的调用格式：

fn1.call(obj);

fn1.apply(obj);

fn1.bind(obj)();

强制修改this指向的传参语法：

fn1.call(obj, 1, 2);

fn1.apply(obj, [3, 4]);

fn1.bind(obj)(5, 6);    // bind传参在react框架用的比较多些