this 到底指向button还是其他？--this作用域的一个探讨

最新推荐文章于 2022-03-20 08:18:18 发布

JasonABCDEF

最新推荐文章于 2022-03-20 08:18:18 发布

阅读量984

点赞数

分类专栏：前端积累文章标签： javascript this 作用域

本文链接：https://blog.csdn.net/dfQ_Qjb/article/details/50988976

版权

前端积累专栏收录该内容

5 篇文章 0 订阅

订阅专栏

this是最麻烦的一个东西了。就好像this这个孩子到底是谁的孩子？到底是亲生的还是隔壁王叔叔的？头疼。。。

下面探讨一个关于this的问题

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
  <title>Events in JavaScript: Removing event listeners</title>
</head>
<body>
  <button id="element">Click Me</button>
</body>
</html>


var element = document.getElementById('element');

var user = {
 firstname: 'Bob',
 greeting: function(){
   alert('My name is ' + this.firstname);
   alert(this)
 }
};

// Attach user.greeting as a callback
//差别一
element.addEventListener('click', function(){
  user.greeting()
});
//差别二
element.addEventListener('click', user.greeting)

差别一输出结果
my name is Bob
[object Object]

差别二输出结果
my name is undefined
[object HtmlButtonElement]

why?
为什么会这样子呢？

先分析一
一里面的函数是执行了，有点像闭包的感觉。

element.addEventListener('click', function(){
  (function(){
      alert('My name is ' + this.firstname);
      alert(this)
  })()
});

分析二：
二里面的函数没有执行，感觉就是

element.addEvenListener('click', function(){
    alert('My name is ' + this.firstname);
    alert(this)
})

如果全属瞎扯，那我就是在瞎扯呗。。其实真正的原理我确实不懂，但是我觉得就是这么回事吧，欢迎大家跟我讨论。

再探讨一个例子：

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
  <title>Events in JavaScript: Removing event listeners</title>
</head>
<body>
  <button id="element" onclick="abc()">Click Me</button>


<script>
function abc(){
alert(this)
}
</script>
</body>
</html>