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>
Answers
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的作用域链已经被串起来了。
推荐几篇文章
- 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怎么说,能力有限,这个问题回答不完整