JavaScript this关键字

Posted 2022-12-10 「已注销」

在javascript中，this的指向会随着环境的改变而改变。

（1）全局环境：

全局环境下，this指向window对象。

        console.log(this);

 （2）全局函数（非严格模式下）：

全局函数（非严格模式下）中，this指向window对象。全局函数是全局对象window的方法。

        function fun() 
            console.log(this);
        
        fun();   //等价于window.fun()

（3）全局函数（严格模式下）：

全局函数（严格模式下）中，this为undefined。

        "use strict"
        function fun() 
            console.log(this);
        
        fun();

（4）计时器

在计时器中，this指向全局对象window。

        setTimeout(function()
            console.log(this);
        ,1000)
        setInterval(function()
            console.log(this);
        ,1000)

 

（5）箭头函数

箭头函数没有自己的this，它会继承上层作用域的this。

        const cat = 
            name: "小花",
            age: 3,
            sayName() 
                setTimeout(() => 
                    console.log(this);
                    console.log("我叫" + this.name);
                , 1000);
            
        
        cat.sayName();();

 

 

（6）事件

在事件中，this 表示绑定事件的元素。

    <button>按钮</button>

        const btn = document.querySelector("button");
        btn.addEventListener("click",function()
            console.log(this);
        )

 （7）对象的方法

在方法中，this 表示该方法所属的对象。

示例1：

        const andy = 
            name: "andy",
            age: 3,
            sayName () 
                console.log(this);
                console.log("我叫" + this.name + "，今年" + this.age + "岁了。");
            
        
        andy.sayName();

 

 示例2：

        const dog = 
            name: "旺财",
            sayName() 
                return "我叫" + this.name;
            
        
        console.log(dog.sayName());

（8）构造函数

在构造函数中，this指向新创建出来的对象。

        function Person(name, age) 
            this.name = name;
            this.age = age;
        
        let andy = new Person("andy", 3);
        console.log(andy);