如何区别onclick的不同赋值方式带来的不同?

zhoujiamin
  • 61

如下代码中,有3个button,每个button都指定了函数,第一个button的按键后显示“click me” ,this指向了button;第二个button的按键后显示“underfine” ,this指向了全局window;第三个button与第一个相同。怎么解释呢??希望有详细的介绍啊,若没有,可提供学习资料,博客也是极好的。


    <input type="button" value="click me" onclick="alert(this.value)" />
    <input type="button" value="click me" onclick="f()" />
    <input id= "button" type="button" value="click me" />
    <script type="text/javascript">
        function f(){
            alert(this.value);
        }

    var button = document.getElementById("button");
    button.onclick=f1;
    function f1() {
        alert(this.value);
    }
    </script>
回复
阅读 2.4k
2 个回答

题主是个非常细心的人,看到这么有意思的问题我忍不住去尝试了一下并查阅了一下关于this的的资料,对于上面的清情况做一下解释:
这个问题的关键在于对于this对象的理解:this关键字引用的是:调用this的那个函数,被调用时所属的那个对象(未指定的情况下默认是window);这么说有点拗口,为了更容易理解,接下来以题主之前的样例举几个例子:

1.第一个例子

<body>
    <input type="button" value="click me" onclick="f()" />
</body>
<script type="text/javascript">
function f(){
        alert(this);
    }
</script>

此时点击那个按钮,将会返回widows对象,图片描述

回头看刚刚作出的解释:this关键字引用的是调用this的那个函数(这里就是f),被调用时所属的那个对象(因为没指定默认是window);

2.第二个例子

<body>

<input type="button" id="btn" value="click me" />

</body>
<script type="text/javascript">
window.onload=function(){
      var btn=document.getElementById("btn");
      btn.onclick=f;//这里改变了所属对象

}
 function f(){
        alert(this);
    }

</script>

此时再点击该按钮,结果如下图片描述

this关键字引用的是调用this的那个函数(这里就是f),被调用时所属的那个对象(此时被指定为btn)

3.第三个例子

<body>

<input type="button" id="btn" value="click me" />

</body>
<script type="text/javascript">
window.onload=function(){
      var btn=document.getElementById("btn");
      btn.onclick=function(){
        f();
      };//这里其实没有改变所属对象

}
 function f(){
        alert(this);
    }

</script>

这个和上面看起来非常相似,但是实际上,没有改变调用this的函数所属的对象,因此结果如下:
图片描述

最后补充解释一下题主的第一种情况,即直接在html文档中写函数的时候,这个情况就相当于直接给当前对象绑定方法,原理同上。
以上纯手打,如果有帮助请采纳,还有疑问欢迎继续探讨

第一个onclick调用的是alert()这个函数,传入值指的是this.value,其中this指向当前对象;
你把第二个函数改写一下,如下所示,和1本质上一模一样。

<input type="button" value="click me" onclick="f(this.value)" />
<script>
function f(str){
    alert(str);
}
</script>

你的之所以是undefined,是因为函数内部的this确实没有上下文啊,只有指向window了。

<input type="button" value="click me" onclick="f.call(this)" />

当然,如上,你也通过这个call传入this。
第三个f1通过赋值给button,this指向的自然就是button了。

宣传栏