闭包 - javascript function中,this的问题
伊谢尔伦
伊谢尔伦 2017-04-10 14:34:23
[JavaScript讨论组]

以下代码在点击“上”按钮触发时,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>


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


</body>
</html>
伊谢尔伦
伊谢尔伦

小伙看你根骨奇佳,潜力无限,来学PHP伐。

全部回复(3)
天蓬老师

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

分析你的代码

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,那么情况又有所变化,它的回调应该被指向#topdom,其回调类似于:topFunc.call(dom, e),此时在topFunc的作用域已经改变指向了#topdom,可以用this.id看到输出是top来证明

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

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

推荐几篇文章

  • http://www.cnblogs.com/lhb25/archive/2011/09/06/javascript-scope-chain.html
  • http://www.cnblogs.com/TomXu/archive/2012/01/18/2312463.html
  • http://dmitrysoshnikov.com/ecmascript/chapter-4-scope-chain/

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

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

阿神

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

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

PHPz

我觉得楼主可能把属性和变量混淆了,变量是在所在的作用域里找不到就会在外层的作用域里去找,依次类推,直到全局作用域,而属性并不会到外层作用域里去找,就像楼主所给的代码,this.base ,base是一个属性,而不是一个变量,所以,this所指代的func没有base这个属性,所以是 undefined.而window.base就和作用域没一毛钱关系,它就是指向的全局对象window的base变量(全局对象里定义的变量都是全局对象的属性)。
看来多回答问题还是挺有用的,我想起我刚开始研究原生JS时把这些混淆了的原因了,我之前就是概念没搞清楚,不知道楼主是不是也是一样的情况。

热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号