0
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style>
.box{width:100px;height:100px;background:red; transition:1s width;}
</style>
</head>
<body>
<div class="box" id="box"></div>
<script>
var oBox=document.getElementById("box");
oBox.onclick=function()
{
    this.style.width=this.offsetWidth+100+"px";
};
window.addEnd(oBox,function(){
    console.log(this);//这里的this按照网上的说法,谁调用就是指谁;在addEnd(oBox,function(){})之前我写上window,说明是window调用了这个函数的,但function(){}中的this不是指的window,就搞不懂了,前来求证
    this.style.width=this.offsetWidth+100+"px";
});
function addEnd(obj,fn)
{
    obj.addEventListener('WebkitTransitionEnd',fn,false);
    obj.addEventListener('transitionend',fn,false);
}
</script>
</body>
</html>

4个回答

0

虽然在addEnd函数之前加了window,但是addEnd声明的方式就是传入一个元素后执行回调函数fn,所以其实你最后两段代码可以看作

oBox.addEventListener('WebkitTransitionEnd',function () {
            this.style.width = this.offsetWidth + 100 + "px";
        },false);
oBox.addEventListener('transitionend',function () {
            this.style.width = this.offsetWidth + 100 + "px";
        },false);

所以实际上是oBox在调用函数,this指向oBox。

0

window 调用的是addEnd这个函数,不是里面的匿名函数,这个函数只是addEnd的一个参数,addEnd执行时,这个函数并没有执行,它是监听事件的回调函数,真正执行时,上下文已经发生改变不再指向window对象。

0

不考虑你逻辑的前提下,简化你的代码,变成这样子

然后你会发现,问题变成了为什么addEventListener回调函数里的this指向obj,这才是个好问题。看MDNEventTarget.addEventListener()

mdn里那段英文的说法好像有点问题,我自己试了下

更深入的学习请参阅:

0
  1. this在調用時綁定,完全取決于函數的調用位置(即四条绑定规则);
  2. EventTarget.addEventListener()中的this,在[native code]中显式绑定为EventTarget
  3. onclick="func();,其等同于:

    function onclick(event) {
        func();
    };
    
    GlobalEventHandlers.onclick = onclick;
    
    
    EventTarget.addEventListener(GlobalEventHandlers.onclick);
    // 但没有在`[native code]`中指定`this`。

    独立函数调用,默认绑定为 global window,或undefined

这问题挺有意思,占个位回头补文。

撰写答案