javascript function中,this的问题


以下代码在点击“上”按钮触发时,topFunc()分别弹出数组内容和“undefined”,请问是为什么?绑定事件时函数的所有者被换掉了不再是window了吗?一直听大家说this指向当前对象的所有者,函数是声明时确定所有者还是执行时确定所有者?


 <!DOCTYPE html>
<html>
<head>
   <title>2048 Hello Word</title>
   <script type="text/javascript" src="jquery.js"></script>


<script type="text/javascript">
      var base = [[0,0,0,0],[0,0,0,0],[0,0,0,0],[0,0,0,0]];
      //添加事件函数
      function addEvent(id,func){
        var obj = document.getElementById(id);
        if(obj.addEventListener){
            obj.addEventListener('click',func);
        }else{
          obj.attachEvent('onclick',func);
        }
      }

      function topFunc(){
        alert(window.base);
        alert(this.base);
      }

      $(function(){
        addEvent('top',topFunc);
      })
   </script>


</head>
<body>


<div>
    <button id='top'>上</button>
  </div>


</body>
</html>

this 函数 JavaScript 闭包

myggl 10 years, 3 months ago

this 指向的是当前的作用域,不是指向当前的所有者。所有者和作用域是不同的概念。在浏览器的 javascript 环境中,只有两个作用域, window function

分析你的代码


 var base = [[0,0,0,0],[0,0,0,0],[0,0,0,0],[0,0,0,0]];

是在 window 的作用域下声明的,所以直接被绑定到了 window 对象上去。

单论 topFunc 这个方法里面, this 是指向当前的 topFunc 的,不是指向 window 的,所以 this.base 获得不了外围绑定在 window 对象上的 base

[修正]
这里使用了addEventListener,那么情况又有所变化,它的回调应该被指向 #top dom ,其回调类似于: topFunc.call(dom, e) ,此时在 topFunc 的作用域已经改变指向了 #top dom ,可以用 this.id 看到输出是 top 来证明

[补充]
在一个对象中写一个函数,函数中使用this,可以找到对象的一个属性,这个该怎么解释?

说到一个概念叫做作用域,简单来讲js内部一个对象都有一个内部的属性[[scope]],当我声明 var A = {}; var B = A; 的时后,A和B的作用域链已经被串起来了。

推荐几篇文章

最后一篇是ecmascript的官方文档,有指导意义

作用域的定义,这个问题有点大,各种语言都用不同定义。我理解为命名空间和局部变量的定义作用区间。这个倒是可以看看wiki怎么说,能力有限,这个问题回答不完整

Chase answered 10 years, 3 months ago

这里的 this 指向 id='top' 的DOM对象.

不确定 this 指向什么可以 console.log(this) 打印一下看看, 根据结果再想想为什么!

ybtp1 answered 10 years, 3 months ago

Your Answer