js 中 this 使用详解

最新推荐文章于 2021-03-07 14:06:46 发布

原创最新推荐文章于 2021-03-07 14:06:46 发布 · 189 阅读

0 ·

CC 4.0 BY-SA版权

本文深入解析JavaScript中this关键字的四种绑定模式：方法调用、函数调用、构造函数调用及apply调用，通过实例说明this如何根据调用上下文绑定不同对象。

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

this始终代表的是调用当前函数的那个对象

1.方法调用模式，this被绑定在对象obj上，对象的方法被执行时候，调用的this指向对象的属性，所以输出zyq

    var name=123;
    var obj={
        //对象属性
        name:"zyq",
        //对象方法
        printfName:function(){
            console.log(this.name); //输出zyq
            console.log(name);//输出123
        }
    };
    obj.printfName()//调用对象方法

2.函数调用模式，this是全局对象，浏览器环境下是window

    var name1="zyq";
    function printfName(){
        console.log(this.name1);//输出zyq
        console.log(name1);//输出zyq
    }
    printfName();

3.构造函数调用模式；用new 方法调用函数Obj，这个时候就创建了链接到函数的prototype成员的新对象，这个函数可叫做对象person的构造函数

    function Obj(){
        this.name=234;
    }
    var person = new Obj(); //实例化对象后，this绑定在对象person上了
    console.log(person.name); //输出234

4.apply调用模式; js中函数也是对象，所有的函数有两个方法apply和call，这两个方法可让我们构建一个数组传递给调用函数，可用来改变this的值

    var name3="456";
    var person={
        name3:"hys"
    };
    function printf3Name(){
        console.log(this.name3);
    }
    printf3Name();//tnis代表window，输出456
    printf3Name.apply(person); //this代表对象person，输出hys
    printf3Name.apply(); //this代表window，输出456

综合以上实例
this是在函数执行时绑定的，不要被赋值给搞得眼花缭乱

    var name5="window";
    function showName(){
        console.log(this.name5);
    }
    var person5={
        name5:"kxy",
        sayName:showName
    }
    var person6={
        name5:"jake",
        sayName:function(){
            var fun=person5.sayName;
            fun();
        }
    }
    person5.sayName();  //对象person5的sayName方法调用了函数，所以this指向person5，所以输出kxy 
    person6.sayName();  //对象person6的syaName方法调用函数fun,最后是函数fun调用了函数showName,this指向window,所以输出window