jQuery AJAX回调函数this指向问题

如在全局作用域调用一个含this的对象，此时当前对象的this指向的是window。为了让this的指向符合自己的意愿，JavaScript提供了两个方法用以改变this的指向，它们是call和apply，当然也有利用闭包来实现的方法。本文通过一个例子来说明这些问题。

先看一段演示代码，这代码只供演示用，没有实际意义。

代码如下:

//一个没有实际意义的socket连接对象
var socket =
{
connect: function(host, port)
{
alert('Connecting socket server,host:' + host + ',port:' + port);
}
};
//一个即时通讯类，其中connect方法还将作为AJAX回调函数被调用
function classIm()
{
this.host = '192.168.1.28';
this.port = '8080';
this.connect = function(data)
{
socket.connect(this.host, this.port);
};
}
//实例化即时通讯类
var IM = new classIm();
//AJAX请求，这里假设要打开socket连接首先要通过WEB得知用户WEB登录成功
$.get('CheckWebLogin.aspx', IM.connect);
运行上面的例子，你将看到弹出的host与port都是undefined，那是因为回调函数的this不是指向IM对象，而是jQuery的AJAX配置对象ajaxSettings。在jQuery内部是用s.success代替传入的回调函数去执行的，而success的调用对象就是s，即下面ajaxSettings对象的缩写。

ajaxSettings:
{
url: location.href,
global: true,
type: "GET",
contentType: "application/x-www-form-urlencoded",
processData: true,
async: true
}

为了证明这一点，你可以这样修改代码测试一下，你将看到是url、global、type、contentType等对象的属性名称：


代码如下:

this.connect = function(data)
{
for (var key in this)
{
alert(key);
}
}

现在了解了问题所在，接下来想办法解决这个问题。其实我们的目的是希望AJAX回调函数代码socket.connect(this.host, this.port)中的this指向类classIm的实例对象IM，或者说是想socket.connect()方法能得到正确的参数值吧。为了得到预期的AJAX回调函数执行结果，我分析了大致有下面几种方法：

方法一

直接传对象的正确引用而非this指针，或叫对象实传。这是最常见的做法，即在类实例化时用一个变量存储对当前对象的引用，在后面的方法中直接使用此变量代替this的使用。注意：这种方法并没有真正改变this的指向。演示代码如下，注意对比前后两次代码的区别，我也特别高亮显示差异部分代码。


代码如下:

var socket =
{
connect: function(host, port)
{
alert('Connecting socket server,host:' + host + ',port:' + port);
}
};
function classIm()
{
var self = this;
this.host = '192.168.1.28';
this.port = '8080';
this.connect = function(data)
{
socket.connect(self.host, self.port);
};
}
var IM = new classIm();
$.get('CheckWebLogin.aspx', IM.connect);

方法二

使用apply加闭包实现真正改变this的指向。下面方法把函数调用时的this对象存到一个临时变量_method，然后又利用闭包把它传给返回的function对象，在这个返回的function中使用apply把调用时对象的this替换为目标对象thisObj。这种方法是很多JavaScript框架的做法，而且下面这个Function原型方法正是我从prototype框架精简而来。注意我是先给Function原型加了Apply方法，这个Apply不是脚本内置的apply，是我自定义的，如果你喜欢可以定个别的名字。


代码如下:

/**
* 改变jQuery AJAX回调函数this指针指向
* @param {Object} thisObj 要替换当前this指针的对象
* @return {Function} function(data){}
*/
Function.prototype.Apply = function(thisObj)
{
var _method = this;
return function(data)
{
return _method.apply(thisObj,[data]);
};
}
var socket =
{
connect: function(host, port)
{
alert('Connecting socket server,host:' + host + ',port:' + port);
}
};
function classIm()
{
this.host = '192.168.1.28';
this.port = '8080';
this.connect = function(data)
{
socket.connect(this.host, this.port);
};
}
var IM = new classIm();
$.get('CheckWebLogin.aspx', IM.connect.Apply(IM));

方法三

在匿名回调函数中再调用实际的回调处理函数。这种方法虽然可以解决同样的问题的，但是代码有点长和多余，实际开发中是不建议这样做的。这种方法是保证了调用connect方法的对象还是IM对象，从而保证了this指向还是IM对象。代码如下：


代码如下:

$.get('CheckWebLogin.aspx', function(data){IM.connect(data)});

赞 (0)

相关推荐

  • jquery ajax的success回调函数中实现按钮置灰倒计时

    主要是实现异步手机发送短信成功之后在ajax的success回调中实现将发送按钮置灰并倒计时,刚开始一直报js错误,问题可能出在于调用ajax之后this被更新,随意在这之前先把this对象赋给一个变量就没问题 按钮倒计时代码 复制代码 代码如下: var wait = 60; get_code_time = function (o) { if (wait == 0) { o.removeAttribute("disabled"); o.value = "免费获取验证码&qu

  • jQuery Tips 为AJAX回调函数传递额外参数的方法

    具体到这个例子,我们希望button1和button2点击之后,用AJAX的方式取example.html的内容,然后动态更新页面的id=callbackdemo3的div HTML如下: 复制代码 代码如下: <div id="callbackdemo1"> <button id="button1">ajax load1</button><br/> </div> <div id="call

  • jQuery中通过ajax的get()函数读取页面的方法

    jQuery中通过ajax的get()函数读取页面的方法

    首先介绍get()函数: url,[data],[callback],[type] 参数说明: url:待载入页面的URL地址 data:待发送 Key/value 参数. callback:载入成功时回调函数. type:返回内容格式,xml, html, script, json, text, _default. 首先建立testGet.php实例: <?php $web = $_GET['webname']; echo "你现在访问的网站是:".$web; ?> 然见

  • jQuery Ajax Post 回调函数不执行问题的解决方法

    今天在写一个检查用户名的功能时,使用的是jQuery.post( url, [data], [callback], [type] )这个函数,但是发现其中的回调函数不能执行. 先来看看我的代码: 前台代码: <script type="text/javascript"> function checkUser() { var user = $('#<%=txtUser.ClientID %>').val(); $.post('checkUser.ashx', {

  • jquery的ajax()函数传值中文乱码解决方法介绍

    复制代码 代码如下: $.ajax({ dataType : 'json',type : 'POST',url : 'http://localhost/test/test.do',data : {id: 1, type: '商品'},success : function(data){ } } ); 问题: 提交后后台action程序时,取到的type是乱码 解决方法: 方法一:提交前采用encodeURI两次编码,记住一定是两次 1.修改以下代码 复制代码 代码如下: data:{id:1, t

  • 详解jQuery中关于Ajax的几个常用的函数

    一: AJAX 是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术. 什么是 AJAX ? AJAX = 异步 JavaScript 和 XML. AJAX 是一种用于创建快速动态网页的技术. 通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新.这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新. 传统的网页(不使用 AJAX)如果需要更新内容,必需重载整个网页面. 有很多使用 AJAX 的应用程序案例:新浪微博.Google 地图.开心网等等. 二:传

  • jquery中ajax函数执行顺序问题之如何设置同步

    JavaScript code 复制代码 代码如下: function existProduct(obj){ var productname = escape(obj.val()); $.getJSON("../product/searchProductByName.action",datat,function(data){ var falg; falg = data[0]['existproduct']; //falg返回为no 或yes, return falg; }); } fu

  • Jquery版本导致Ajax不执行success回调函数

    对于使用ajax来请求数据已经不是第一次使用(一直觉得也就那么回事),就在昨天居然遇到了一个问题?项目中需要用到ajax来进行数据的请求,于是三下五除二的将ajax代码拷贝到项目中,前端,后台数据处理完毕,测试(心想可以休息下下了),谁知数据成功返回.前端没报错,后台也没错,硬是没有执行success回调函数,心凉了一半. 接下来就是找原因,查看原先代码,百度,json格式检查,终于发现问题所在 罪魁祸首居然是Jquery版本所引起的. Jquery版本:jquery-1.9.0.min.js

  • jQuery AJAX回调函数this指向问题

    如在全局作用域调用一个含this的对象,此时当前对象的this指向的是window.为了让this的指向符合自己的意愿,JavaScript提供了两个方法用以改变this的指向,它们是call和apply,当然也有利用闭包来实现的方法.本文通过一个例子来说明这些问题. 先看一段演示代码,这代码只供演示用,没有实际意义. 复制代码 代码如下: //一个没有实际意义的socket连接对象 var socket = { connect: function(host, port) { alert('Co

  • jQuery实现ajax回调函数带入参数的方法示例

    本文实例讲述了jQuery实现ajax回调函数带入参数的方法.分享给大家供大家参考,具体如下: 不带参数的写法: function pass(htmlId,auditingFlag){ var url = 'ad_auditing.action'; var params = { 'adInfoPOJO.auditingFlag' : auditingFlag }; dataType: "text"; jQuery.post(url, params, callbackFun); } //

  • jQuery.Callbacks()回调函数队列用法详解

    本文实例讲述了jQuery.Callbacks()回调函数队列用法.分享给大家供大家参考,具体如下: 1.jQuery.Callbacks The jQuery.Callbacks() function, introduced in version 1.7, returns a multi-purpose object that provides a powerful way to manage callback lists. It supports adding, removing, firi

  • Javascript基于AJAX回调函数传递参数实例分析

    本文实例讲述了Javascript基于AJAX回调函数传递参数的方法.分享给大家供大家参考,具体如下: 前面介绍了<javascript实现html页面之间参数传递的四种方法>,这里针对ajax参数传递做一分析. 在Javascript 中,特别是在AJAX中,回调函数常常是一个函数名,没有地方放入参数,如下面的AJAX代码,在成功后将调用回调函数callback,但callback是有参数的,如何把参数传进来呢? var callback = function(p1){ //do somet

  • ajax回调函数中使用$(this)取不到对象的解决方法

    下面这段jquery代码,是可以达到预期效果的. 复制代码 代码如下: $(".derek").each(function(){ $(this).click(function(){ var params = $(this).parent().serialize(); var obj=$(this).parent().siblings("div#caskContent"); var form=$(this).parent(); $.ajax({ url:"e

  • ajax回调函数参数传递正确方法

    属性方法是可以带参数: 复制代码 代码如下: function ClassX(name) { this.name = name; ClassX.prototype.show = function (param) { alert(this.name + " " + param); }; } var o = new ClassX("name"); o.show("param");//name param 但是,上面是虽然是直接在函数签名中定义了参考,

  • 解决ajax回调函数返回的字符串乱码问题

    ServletActionContext.getResponse().setContentType("text/json;charset=UTF-8");//解决乱码问题,没有这句,回调函数的内容可能乱码 ServletActionContext.getResponse().getWriter().write("字符串内容");//在写入之前执行上面一句,可以解决乱码

  • jQuery ajax全局函数处理session过期后的ajax跳转问题

    做web常常需要考虑session过期的问题,session过期就让页面跳转到登录界面去,但是存在这样一个问题,当页面过期后,用户请求后台的方式有两种:传统方式和异步请求方式,传统方式倒好解决,请求到后台,拦截到过期的操作,直接跳转,但是异步请求不会刷新整个页面,因此对session过期的处理也不能按往常的方式,需要另外的操作. 具体思路:拦截器中判断是否为ajax请求 -- 是ajax请求则返回一个消息 --页面添加一个全局的ajax处理事件,对消息进行判断,如果是报告session过期,则l

  • javascript AOP 实现ajax回调函数使用比较方便

    复制代码 代码如下: function actsAsDecorator(object) { object.setupDecoratorFor = function(method) { if (! ('original_' + method in object) ) { object['original_' + method] = object[method]; object['before_' + method] = [ ]; object['after_' + method] = [ ]; o

随机推荐