JavaScript的this详解

原创于 2021-01-28 11:12:54 发布 · 3.7k 阅读

18 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#javascript

JavaScript 专栏收录该内容

9 篇文章

订阅专栏

本文详细介绍了JavaScript中this关键字的四种常见情况：1) 在方法中，this指向方法所属的对象；2) 单独使用时，this表示全局对象；3) 在函数中，this同样表示全局对象；4) 使用new构造函数时，this指向新创建的对象。通过实例代码展示了this的用法，帮助理解this在不同上下文中的变化。

在 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 表示全局对象。

var A = {value: 100};
A.getValue = function () {
 var func = function () {
  console.log("函数中this表示全局对象，this.value未定义:",this.value) // => undefined
  console.log("函数中this表示全局对象:",this);// 输出全局对象 Windows 
 };
console.log("方法中，getValue所属的对象为A，this表示A，this.value:",this.value); // 100
console.log("方法中，getValue所属的对象为A，this表示A，this:",this);// A
func();
return this.value;
};
console.log("getValue的返回值:",A.getValue()); // 100

输出如注释所示，这里需要注意的是，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

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