JavaScript事件监听匿名函数的this问题

最新推荐文章于 2023-05-19 16:38:05 发布

pizazzlk

最新推荐文章于 2023-05-19 16:38:05 发布

阅读量1.6k

点赞数

分类专栏： JavaScript

JavaScript 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

Javascript的 this指针，是 js 中一个很有意思的问题。不同的上下文有着不同的 this。其实 this和好理解。通俗的说，谁的里面干了什么，this就指向那个谁。造成 js 中 this 虚无缥缈的本质，是 js 中充斥了大量的简写。恰恰是这些 “罪恶”的简写，让这个谁。变得模糊。直观的表现就是，this变得难以捉摸。本质上还是那个谁。

this 在四种情况下，会变得神秘莫测。1，嵌套。2，事件绑定。3，定时器。4，行间。这四种情况下，上下文的调用对象就很模糊。以至于 this也捉摸不定。

总而言之，上下文调用的时候。如果有函数，并且也是函数才导致调用。函数又是一种对象。每次调用函数，就会在栈内存中创建对象。

具体看代码分析：

<!DOCTYPE html> <html lang="en">

<head>

window.onload = function(){

var aBtn = document.getElementsByTagName('input')[0];

aBtn.onclick = function(){ alert(this) // input } }

</script>

</head>

<body>

上述代码很简单，只有一个事件监听。this的上下文是 aBtn。但事件触发的时候，调用匿名函数的其实是 aBtn对象。

将上面代码稍微改动一下。将匿名函数里的 alert() 抽离出来，写一个外函数调用。

window.onload = function(){ var aBtn = document.getElementsByTagName('input')[0]; aBtn.onclick = function(){ alertThis(); // dom window } } function alertThis(){ alert(this); }

此时，弹出的 this 居然指向了 window。而不是 input。这是怎么回事呢？很简单。只要想一想，是谁调用了 alertThis()这个函数。this 就指向谁。从结果来看，this指向了window。也就是window调用了alertThis()函数。为什么会这样？关键在于匿名函数。

其实，匿名函数等价于 New Function()。也就是创建了一个新对象，而这个新对象，实际上是全局的。

aBtn.onclick = function(){ alert(this); }

aBtn.onclick = new Function('alert(this)'); // input

在第一个例子中，aBtn对象绑定了一个click事件。所以执行匿名函数内容的是 aBtn 施加的。this指向就是 aBtn对象。而第二个例子的时候，匿名函数的内容是一个函数 alertThis()。alertThis()函数写在外面，相当于是 window 的属性。并且匿名函数内的调用。而不是在匿名函数返回。所以此时的 alertThis 调用。完整的代码应该是 window.alertThis()。所以做好的this 指向 window。

换一种写法，如下，去掉匿名函数的绑定。此时，调用函数的是 aBtn对象了，this就指向 input。

window.onload = function(){

var aBtn = document.getElementsByTagName('input')[0];

aBtn.onclick = alertThis //input

}

function alertThis(){ alert(this); }

所以，回到最初的问题。this的指向，取决于上下文，而上下文中的那个谁，容易在各种js简写的过程中让人迷惑。其中，匿名函数和事件绑定的过程。this的上下文特别容易搞错。

对于第三种情况，如果用到了 alertThis的 this。写成第三种的样子是不能传参数的。那么就可以包一层匿名函数，将this当成参数传递过去，如下：

window.onload = function(){

var aBtn = document.getElementsByTagName('input')[0];

aBtn.onclick = function(){ alertThis(this) } }

function alertThis(obj){ alert(obj); }