源码网商城,靠谱的源码在线交易网站 我的订单 购物车 帮助

源码网商城

JavaScript call apply使用 JavaScript对象的方法绑定到DOM事件后this指向问题

  • 时间:2020-02-15 01:06 编辑: 来源: 阅读:
  • 扫一扫,手机访问
摘要:JavaScript call apply使用 JavaScript对象的方法绑定到DOM事件后this指向问题
先来看看现象:
[u]复制代码[/u] 代码如下:
<html> <head> <title>apply_and_call</title> </head> <body onload="init()"> <div id="testDiv" style="position: absolute; border: 1px solid gray; width:100px; height: 100px"></div> <script type="text/javascript"> function init() { var el = document.getElementById("testDiv"); var a = new classA(el); } function classA(el) { this.a = 1; this.container = el; //绑定单击事件 this.container.onclick = this.click; } classA.prototype = { click:function() { alert(this.a); } } </script> </body> </html>
当单击DIV后,弹出框显示undefined。 原因是当DOM对象响应单击事件后,事件方法中的this关键字指向的是DOM对象,此时DOM对象没有a属性,所以弹出undefined。 而程序员本意是响应事件方法中this指向的是classA的对象a,如何才能达到此目的?这就需要使用到call或apply方法。 下面再来熟悉下call方法: 摘要: function.call(thisobj, args…) 参数: thisobj   调用function的对象。在函数主体中,thisobj是关键字this的值。 args…   任意多个参数,这些参数将传递给函数function。 返回值: 调用函数function的返回值。 抛出: TypeError   如果调用该函数的对象不是函数,则抛出该异常。 描述: call()将指定的函数function作为对象thisobj的方法来调用,把参数列表中thisobj后的参数传递给它,返回值是调用函数后的返回值。在函数体内,关键字this引用thisobj对象。 如果将指定数组作为传递给函数的参数,请使用Function.apply()方法。 熟悉call()方法后,将代码1修改如下: 代码2:
[u]复制代码[/u] 代码如下:
<html> <head> <title>apply_and_call</title> </head> <body onload="init()"> <div id="testDiv" style="position: absolute; border: 1px solid gray; width:100px; height: 100px"></div> <script type="text/javascript"> function init() { var el = document.getElementById("testDiv"); var a = new classA(el); } function classA(el) { this.t = 1; this.clickDele = createDele(this.click, this); el.onclick = this.clickDele; } classA.prototype = { click:function() { alert(this.t); } } function createDele(fun, obj, arg) { return function() { return fun.call(obj, arg); } } </script> </body> </html>
代码2 25行:主要添加了createDele方法,该方法包含三个参数:fun、obj、arg,分别是“要执行的方法”、“fun中this需要指向的对象”、“传入fun中的参数”。该方法返回一个匿名方法。 匿名方法负责执行fun方法,同时将fun中的this指向obj,并使用作为arg传入参数,处理结果返回。 当程序执行走到第15行调用createDele方法,传入对象的方法和对象本身,createDele接收参数后返回一个匿名方法,this.clickDele被设置成为返回的匿名方法,16行代码将this.clickDele(匿名方法)绑定到DOM事件上,程序执行完毕,点击DOM(DIV)触发匿名方法,些时匿名方法中fun为之前传入的this.click(即:方法a.click),obj为之前传入的this(即:对象a),所以此时使用call方法使得this.click(即:方法a.click)中的this指向obj(即:对象a),最终弹出结果为1。结果正确,达到了程序的本意。 回顾匿名方法多少会让人感到有些怪异:调用匿名方法时fun为什么会是this.click(即:方法a.click)、obj什么为是this(即:对象a)。这个问题就需要用JavaScript的闭包来解释了,这里暂不介绍闭包,后面会有介绍JavaScript闭包的文章发表,欢迎有兴趣的朋友持续关注! 不管各位看官信还是不信,反正道理和程序是没有问题的!:)
  • 全部评论(0)
联系客服
客服电话:
400-000-3129
微信版

扫一扫进微信版
返回顶部