JavaScript的this详解

Bertha 。 2023-01-12 10:17 97阅读 0赞

在 JavaScript 中 this 指向不是固定不变的，它会随着执行环境的改变而改变，主要分为这几种情况。  
1）在方法中，this 表示该方法所属的对象。  
2） 如果单独使用，this 表示全局对象。  
3）在函数中，this 表示全局对象。  
4）用new构造就表示新对象。  
首先辨析一下在JavaScript中函数和方法：  
函数需要通过名字来进行调用。它能将一些数据（参数）传递进去进行处理，然后返回一些数据（返回值），也可以不返回。

function func(a, b) { 
        return a * b;
    }

方法（method）是通过对象调用的javascript函数。也就是说，方法也是函数，只是比较特殊的函数。当将函数和对象和写在一起时，函数就变成了方法。

var A={ 
    people1:'a',
    people2:'b',
    func：function(a, b) { 
        return a * b;
    }
    };

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

<!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>入门JavaScript this</title>
    </head>
    <h2>JavaScript <b>this</b> 关键字</h2>
    <p id="demo"></p>
    </head>
    <body>
    <script language="javascript">
    
    var A = { value: 100,
    getValue:function() { 
     console.log(this),
     console.log(this.value)
    }
    }
    A.getValue();
    
    </script>
    </body>
    </html>

getValue方法所属的对象为A,this就表示A,因此在浏览器中输出为应该是：  
A  
A.value

{ value:100,getValue:f}
    100

2） 如果单独使用，this 表示全局对象，在浏览器中，window 就是该全局对象：为 \[object Window\]  
将body里面的代码加上一行：

var A = { value: 100,
    getValue:function() { 
     console.log(this),
     console.log(this.value)
    }
    }
    A.getValue();
    console.log(this);

则输出为：

{ value:100,getValue:f}
    100
    Window

3）在函数中，this 表示全局对象。

输出如注释所示，这里需要注意的是，getValue是A的方法，func是一个函数，这个地方不要混淆。

如果value事先被定义，则在函数中的this.value就表示该定义过的值：

var x = 2; 
    　　function test(){  
    　　console.log(this.x); //2
    　　}

4）用new构造则表示新对象

var A = function(){ 
     this.value = 100;
    }
    
    var B = new A();
    console.log(B.value); // 输出100

当然还有很多情况没有提及，欢迎大家交流讨论！