javascript 类中函数调用的that模式，避免this的丢失

最新推荐文章于 2022-09-17 19:35:56 发布

原创最新推荐文章于 2022-09-17 19:35:56 发布 · 1.2k 阅读

0 ·

CC 4.0 BY-SA版权

web 专栏收录该内容

37 篇文章

订阅专栏

本文探讨了JavaScript中使用that模式来解决内部函数this指向问题的方法。通过实例解释了在构造函数和对象字面量中如何利用that变量保持this的正确上下文，避免因默认指向window而引发的错误。

that模式：就是把类的this赋值给that变量（可以为其他的名字的，只是惯用that而已）

Person = {
	name: "Alice",
	sayName: function() {
		otherSayName = function() {
			alert(this.name);
		};
		otherSayName();
	}
};

Person.sayName(); //在chrome和firefox中是空的

这是由于otherSayName指向Person的this丢失，使得this指向了外部的全部对象window。或者这么说，调用otherSayName的对象是什么都没，则默认是window.otherSayName。所以this会指向window对象。

function Person() {
	this.name = "alice";
	this.sayName = function() {
		otherSayName = function() {
			alert (this.name);
		};
		otherSayName();
	};
}

that模式的修复：

function Person() {
	this.name = "alice";
	this.sayName = function() {
		that = this;
		otherSayName = function() {
			alert (that.name);   //that指向this
		};
		otherSayName();
	};
}