最新文章专题视频专题问答1问答10问答100问答1000问答2000关键字专题1关键字专题50关键字专题500关键字专题1500TAG最新视频文章推荐1 推荐3 推荐5 推荐7 推荐9 推荐11 推荐13 推荐15 推荐17 推荐19 推荐21 推荐23 推荐25 推荐27 推荐29 推荐31 推荐33 推荐35 推荐37视频文章20视频文章30视频文章40视频文章50视频文章60 视频文章70视频文章80视频文章90视频文章100视频文章120视频文章140 视频2关键字专题关键字专题tag2tag3文章专题文章专题2文章索引1文章索引2文章索引3文章索引4文章索引5123456789101112131415文章专题3
当前位置: 首页 - 科技 - 知识百科 - 正文

JavaScriptcallapply使用JavaScript对象的方法绑定到DOM事件后this指向问题_javascript技巧

来源:动视网 责编:小采 时间:2020-11-27 21:00:54
文档

JavaScriptcallapply使用JavaScript对象的方法绑定到DOM事件后this指向问题_javascript技巧

JavaScriptcallapply使用JavaScript对象的方法绑定到DOM事件后this指向问题_javascript技巧:先来看看现象: 代码如下: apply_and_call function init() { var el = document.getElementById(testDiv); var a = new classA(el); } function classA(el) { this.a = 1; this.container
推荐度:
导读JavaScriptcallapply使用JavaScript对象的方法绑定到DOM事件后this指向问题_javascript技巧:先来看看现象: 代码如下: apply_and_call function init() { var el = document.getElementById(testDiv); var a = new classA(el); } function classA(el) { this.a = 1; this.container


先来看看现象:
代码如下:


apply_and_call




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);
}
}




当单击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:
代码如下:


apply_and_call



结果为1。结果正确,达到了程序的本意。
回顾匿名方法多少会让人感到有些怪异:调用匿名方法时fun为什么会是this.click(即:方法a.click)、obj什么为是this(即:对象a)。这个问题就需要用JavaScript的闭包来解释了,这里暂不介绍闭包,后面会有介绍JavaScript闭包的文章发表,欢迎有兴趣的朋友持续关注!
不管各位看官信还是不信,反正道理和程序是没有问题的!:)

文档

JavaScriptcallapply使用JavaScript对象的方法绑定到DOM事件后this指向问题_javascript技巧

JavaScriptcallapply使用JavaScript对象的方法绑定到DOM事件后this指向问题_javascript技巧:先来看看现象: 代码如下: apply_and_call function init() { var el = document.getElementById(testDiv); var a = new classA(el); } function classA(el) { this.a = 1; this.container
推荐度:
标签: call 问题 对象
  • 热门焦点

最新推荐

猜你喜欢

热门推荐

专题
Top