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

先来看看现象：


代码如下:

<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：


代码如下:

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

相关推荐

  • 关于JavaScript中的this指向问题总结篇

    在javascript中this的指向一直是前端同事的心头病,也同时是各面试题的首选,现在我们就来总结一下js中this的指向.首先需要了解一下几个概念: 1:全局变量默认挂载在window对象下 2:一般情况下this指向它的调用者 3:es6的箭头函数中,this指向创建者,并非调用者 4:通过call.apply.bind可以改改变this的指向 下面我们具体分析一下 1:在函数调用时 (非严格模式) const func = function () { console.log(this)

  • 聊一聊JS中this的指向问题

    JS中的this指向一直是个让人头疼的问题,想当初我学的是天昏地暗,查了好多资料,看的头都大了,跟他大战了那么多回合,终于把它搞定个七八分,其实往往都是我们复杂化了,现在就让大家轻松看懂this的指向,我会分以下几种情况来说. this的指向: 1.this 指的是调用当前方法(函数)的那个对象,也就是说函数在谁那被调用,this就指的是谁. 来看两个栗子: oBtn.onclick = function(){ alert(this); //oBtn } oBtn[i].onclick = fn

  • JavaScript中 this 指向问题深度解析

    JavaScript 中的 this 指向问题有很多文章在解释,仍然有很多人问.上周我们的开发团队连续两个人遇到相关问题,所以我不得不将关于前端构建技术的交流会延长了半个时候讨论 this 的问题. 与我们常见的很多语言不同,JavaScript 函数中的 this 指向并不是在函数定义的时候确定的,而是在调用的时候确定的.换句话说, 函数的调用方式决定了 this 指向 . JavaScript 中,普通的函数调用方式有三种:直接调用.方法调用和 new 调用.除此之外,还有一些特殊的调用方式

  • Javascript中this关键字指向问题的测试与详解

    前言 Javascript是一门基于对象的动态语言,也就是说,所有东西都是对象,一个很典型的例子就是函数也被视为普通的对象.Javascript可以通过一定的设计模式来实现面向对象的编程,其中this "指针"就是实现面向对象的一个很重要的特性.本文将给大家详细介绍关于Javascript中this关键字指向的相关内容,让我们先做一个小测试,如果全部答对了,恭喜你不用往下看了. 测试题目 第一题 <script> var str = 'zhangsan'; function

  • 详解JS中定时器setInterval和setTImeout的this指向问题

    前言 Js是一个单线程语言,可以通过setTimeout()和setInterval()来设置代码在指定时刻运行,前者是在指定时间后执行,后者是指每隔一段时间执行.两者的使用方法类似. 最近在练习写一个小例子的时候用到了定时器,发现在setInterval和setTimeout中传入函数时,函数中的this会指向window对象,详细的介绍通过一个示例展开,一起来看看吧. 如下例: var num = 0; function Obj (){ this.num = 1, this.getNum =

  • 详解JavaScript中this的指向问题

    this是面向对象语言中一个重要的关键字,理解并掌握该关键字的使用对于我们代码的健壮性及优美性至关重要.而javascript的this又有区别于Java.C#等纯面向对象的语言,这使得this更加扑朔迷离,让人迷惑. this使用到的情况: 1. 纯函数 2. 对象方法调用 3. 使用new调用构造函数 4. 内部函数 5. 使用call / apply 6.事件绑定 1. 纯函数 var name = 'this is window'; //定义window的name属性 function

  • js绑定事件this指向发生改变的问题解决方法

    可对函数进行如下扩展 复制代码 代码如下: Function.prototype.bind = function(obj) { var _this = this; return function() { _this.apply(obj,arguments); } } 用法如下 复制代码 代码如下: var a = function(){ alert(this.title) }.bind(document); a(); 常用在这儿 复制代码 代码如下: function myalert() { t

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

    先来看看现象: 复制代码 代码如下: <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&q

  • JavaScript中 创建动态 QML 对象的方法

    一.动态创建对象 有两种方法可以从 JavaScript 动态创建对象: 调用 Qt.createComponent() 动态创建 Component 对象 使用 Qt.createQmlObject() 从 QML 字符串创建对象 虽然动态创建的对象可以与其他对象一样使用,但它们在 QML 中没有 id. 1.1.动态创建组件 可以调用它的 createObject() 方法来创建该组件的一个实例.这个函数可以接受两个参数: 第一个是新对象的父对象.父对象可以是图形对象(即 Item 类型)或

  • 开启Javascript中apply、call、bind的用法之旅模式

    我希望能够通过这篇文章,能够清晰的提升对apply.call.bind的认识,并且列出一些它们的妙用加深记忆. apply.call 在 javascript 中,call 和 apply 都是为了改变某个函数运行时的上下文(context)而存在的,换句话说,就是为了改变函数体内部 this 的指向. JavaScript 的一大特点是,函数存在「定义时上下文」和「运行时上下文」以及「上下文是可以改变的」这样的概念. 先给大家列出一段代码示例: function fruits() {} fru

  • Javascript中apply、call、bind的巧妙使用

    apply.call 在 javascript 中,call 和 apply 都是为了改变某个函数运行时的上下文(context)而存在的,换句话说,就是为了改变函数体内部 this 的指向. JavaScript 的一大特点是,函数存在「定义时上下文」和「运行时上下文」以及「上下文是可以改变的」这样的概念. 先来一个栗子: function fruits() {} fruits.prototype = { color: "red", say: function() { console

  • 浅析jQuery事件之on()方法绑定多个选择器,多个事件

    $(document).on('click', '#header .top, #main .btn', function () { // code... }); on()方法绑定多个事件 $("table.planning_grid").on({ mouseenter: function() { // Handle mouseenter... }, mouseleave: function() { // Handle mouseleave... }, click: function()

  • javascript中apply和call方法的作用及区别说明

    一.call和apply的说明 1.call,apply都属于Function.prototype的一个方法,它是JavaScript引擎内在实现的,因为属于Function.prototype,所以每个Function对象实例(就是每个方法)都有call,apply属性.既然作为方法的属性,那它们的使用就当然是针对方法的了,这两个方法是容易混淆的,因为它们的作用一样,只是使用方式不同. 2.语法:foo.call(this, arg1,arg2,arg3) == foo.apply(this,

  • 深入理解关于javascript中apply()和call()方法的区别

    如果没接触过动态语言,以编译型语言的思维方式去理解javaScript将会有种神奇而怪异的感觉,因为意识上往往不可能的事偏偏就发生了,甚至觉得不可理喻.如果在学JavaScript这自由而变幻无穷的语言过程中遇到这种感觉,那么就从现在形始,请放下的您的"偏见",因为这对您来说绝对是一片新大陆,让JavaScrip慢慢融化以前一套凝固的编程意识,注入新的生机! 好,言归正传,先理解JavaScrtipt动态变换运行时上下文特性,这种特性主要就体现在apply, call两个方法的运用上.

  • 浅析创建javascript对象的方法

    一.工厂模式 function person (name,age) { var p=new Object(); p.name=name; p.age=age; p.showMessage=function(){ console.log("name:"+this.name+" age:"+this.age); } return p; } var p1=person("k1",28); var p2=person("k2",29)

  • 详解JavaScript中的数组合并方法和对象合并方法

    1 数组合并 1.1 concat 方法 var a=[1,2,3],b=[4,5,6]; var c=a.concat(b); console.log(c);// 1,2,3,4,5,6 console.log(a);// 1,2,3 不改变本身 1.2 循环遍历 var arr1=['a','b']; var arr2=['c','d','e']; for(var i=0;i<arr2.length;i++){ arr1.push(arr2[i]) } console.log(arr1);/

  • JavaScript简单实现合并两个Json对象的方法示例

    JavaScript简单实现合并两个Json对象的方法示例

    本文实例讲述了JavaScript简单实现合并两个Json对象的方法.分享给大家供大家参考,具体如下: $.mergeJsonObject = function(jsonbject1, jsonbject2) { var resultJsonObject = {}; for (var attr in jsonbject1) { resultJsonObject[attr] = jsonbject1[attr]; } for (var attr in jsonbject2) { resultJso

随机推荐