我在WebKit HTML 5 SQL Storage Notes Demo的源代码中看到了以下内容:
function Note() {
var self = this;
var note = document.createElement('div');
note.className = 'note';
note.addEventListener('mousedown', function(e) { return self.onMouseDown(e) }, false);
note.addEventListener('click', function() { return self.onNoteClick() }, false);
this.note = note;
// ...
}
作者在某些地方使用self(函数体),在其他地方使用this(在方法的参数列表中定义的函数体)。这是怎么呢现在我已经注意到它一次了,我将开始到处看到它吗?
请在alistapart.com上查看这篇文章。(Ed:文章从最初的链接开始更新)
Self用于维护对原始this的引用,即使在上下文发生变化时也是如此。这是事件处理程序(尤其是闭包)中经常使用的一种技术。
编辑:注意,现在不鼓励使用self作为窗口。Self存在,如果不小心,就有可能导致错误。
你怎么称呼这个变量并不重要。Var that = this;还好,但这名字没什么神奇的。
在上下文中声明的函数(例如,回调,闭包)将可以访问在相同或以上范围中声明的变量/函数。
例如,一个简单的事件回调:
函数MyConstructor(options) {
Let that = this;
这一点。Someprop =选项。|| 'defaultprop';
文档。addEventListener('click', (event) => {
警报(that.someprop);
});
}
新MyConstructor ({
someprop:“Hello World”
});
正如其他人所解释的,var self = this;允许闭包中的代码引用回父作用域。
然而,现在是2018年,所有主要的web浏览器都广泛支持ES6。var self = this;成语不像以前那么重要了。
现在可以避免var self = this;通过使用箭头函数。
在使用var self = this的情况下:
function test() {
var self = this;
this.hello = "world";
document.getElementById("test_btn").addEventListener("click", function() {
console.log(self.hello); // logs "world"
});
};
我们现在可以使用一个没有var self = this的箭头函数:
function test() {
this.hello = "world";
document.getElementById("test_btn").addEventListener("click", () => {
console.log(this.hello); // logs "world"
});
};
箭头函数没有自己的这一点,只是简单地假定封闭作用域。
还应该注意的是,如果您不喜欢var self = this习惯用法,还有另一种代理模式用于在回调中维护对原始this的引用。
可以使用function在给定的上下文中调用函数。应用或作用调用时,您可以编写一个包装器,该包装器返回一个函数,该函数使用apply或Call使用给定上下文调用您的函数。有关此模式的实现,请参阅jQuery的代理函数。下面是一个使用它的例子:
var包装func = $.proxy代理(这个。myFunc, this);
然后可以调用wrappedFunc,并将此版本作为上下文。