JavaScript中的this知多少？

ifeng618

已于 2023-11-27 22:08:37 修改

阅读量42

点赞数

分类专栏： JavaScript知识文章标签： javascript 开发语言 ecmascript

于 2023-10-19 10:15:14 首次发布

本文链接：https://blog.csdn.net/ifeng618/article/details/133920661

版权

JavaScript知识专栏收录该内容

8 篇文章 0 订阅

订阅专栏

1、作为对象的方法调用（this指向该对象）

var obj = {
 a: 'feng',
 getName: function(){
 console.log(this === obj);
 console.log(this.a); }
 };
 obj.getName(); // true feng

2、作为普通函数调用
this总是指向全局对象（在浏览器中，通常是Window对象）
在ES5的严格模式下，this被规定为不会指向全局对象，而是undefined

window.name = 'feng';
 var getName = function(){
 console.log(this.name);
 };
 getName(); // feng

3、作为dom元素事件处理函数调用
this指向这个dom对象

<body>
	<button id="myButton">点击我</button>
	<script>
		// 获取按钮元素
		var myButton = document.getElementById("myButton");
		
		// 添加点击事件处理函数
		myButton.onclick = function() {
			// 在事件处理函数中，this指向触发事件的元素，即按钮元素
			this.innerHTML = "你点击了我";
		};
	</script>
</body>

4、构造器调用（构造函数用new调用）
通常情况下，当new运算符调用函数时，总是返回一个对象，this通常也指向这个对象

var MyClass = function(){
 this.name = 'feng';
 }
var obj = new MyClass();
obj.name; // feng

例外：如果显式的返回了一个object对象，那么此次运算结果最终会返回这个对象。
只要构造器不显示的返回任何数据，或者返回非对象类型的数据，就不会造成上述问题。

var MyClass = function () {
 this.name = 1;
 return { name: 2 }
 }
var myClass = new MyClass();
console.log('myClass:', myClass); // { name: 2}

5、call或apply调用
作用:动态改变this指向，使用一个指定的 this 值和单独给出的一个或多个参数来调用一个函数
本质:允许为不同的对象分配和调用属于一个对象的函数/方法
区别:
call() 方法接受:指定的this+多个参数
apply()方法接受: 指定的this+一个包含多个参数的数组

6.箭头函数(没有自己的this)
箭头函数不会创建自己的this,它只会从自己的作用域链的上一层继承this