jQuery AJAX回调函数this指向问题_javascript技巧_脚本

作者:联系我们

如在大局意义域调用三个含this的对象,这时当前目标的this指向的是window。为了让this的针对相符自己的心愿,JavaScript提供了多个主意用以改换this的指向,它们是call和apply,当然也可以有应用闭包来落实的措施。本文通过四个事例来证明那么些标题。 先看风姿罗曼蒂克段演示代码,那代码只供演示用,未有实际意义。 复制代码 代码如下: //一个尚未实际意义的socket连接对象 var socket = { connect: function { alert('Connecting socket server,host:' + host + ',port:' + port); } }; //八个即时通信类,在那之中connect方法还将作为AJAX回调函数被调用 function classIm() { this.host = '192.168.1.28'; this.port = '8080'; this.connect = function { socket.connect; }; } //实例化即时通信类 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 { for { alert; } } 现在摸底了难题所在,接下去想艺术缓慢解决那么些主题素材。其实大家的指标是可望AJAX回调函数代码socket.connect中的this指向类classIm的实例对象IM,或许说是想socket.connect()方法能获得准确的参数值吧。为了拿到预期的AJAX回调函数实践结果,笔者分析了大概有上面二种情势: 方法一 直接传对象的不错援用而非this指针,或叫对象实传。那是最恒河沙数的做法,即在类实例化时用四个变量存款和储蓄对脚下目的的引用,在后边的法子中央直属机关接使用此变量取代this的运用。注意:这种艺术并从未当真改革this的针对。演示代码如下,注意相比较前后三回代码的分别,笔者也特地高亮呈现差别部分代码。 复制代码 代码如下: var socket = { connect: function { 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 { socket.connect; }; } 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{} */ Function.prototype.Apply = function { var _method = this; return function { return _method.apply; }; } var socket = { connect: function { alert('Connecting socket server,host:' + host + ',port:' + port); } }; function classIm() { this.host = '192.168.1.28'; this.port = '8080'; this.connect = function { socket.connect; }; } var IM = new classIm(); $.get('CheckWebLogin.aspx', IM.connect.Apply; 方法三 在无名回调函数中再调用实际的回调管理函数。这种方式即使能够消除相仿的题指标,不过代码有一点长和剩余,实际开拓中是不提出这样做的。这种方法是保障了调用connect方法的对象照旧IM对象,进而保证了this指向照旧IM对象。代码如下: 复制代码 代码如下: $.get('CheckWebLogin.aspx', function{IM.connect;

1、函数定义

函数包涵意气风发组语句,它们是javascript的底子模块单元,用于代码复用、消息掩没和组成调用。函数用于钦点对象的一颦一笑

2、函数的三种调用情势及this的初阶化

第一种:方法调用情势 以下事例注明通过艺术调用方式调用时,this绑定到持有该方式的靶子。如:

复制代码 代码如下:var person = { name: "defaultName", setName : function{ this.name = name; }};person.setName;alert;

第三种:函数调用方式 以下事例评释通过函数调用格局调用时,this绑定到全局对象上。如:

复制代码 代码如下:var test = add;var name = "defaultName";var person = { name: "zhangsan", // person中定义的name getName : function(){ // 通过此办法能够将test函数的this改换为person的this对象 var that = this; // 应用方案 // getName中定义的name var name = "lisi"; var test = function(){ // 通过that来访谈person中的对象 // this指向Global对象 // this.name = defaultName // that.name = zhangsan alert([this.name, that.name]); }; test(); // 函数调用格局 }}person.getName();

其两种:构造器调用形式

复制代码 代码如下:// 定义多个Person的构造器,在调用时分明要用new调用var Person = function{ this.name = name;}// 增添七个艺术到PersonPerson.prototype.getName = function(){ return this.name;};// 构造贰个Person对象var person = new Person;alert; // 调用getName获取person对象中name属性的值

第多种:Apply调用情势

复制代码 代码如下:

3、Apply和call的区别

复制代码 代码如下:// 定叁个指标,包蕴一个add方法,再次来到a、b的和var Person = { 'add' : function{ return a + b; }};// 彰显a、b的和function showInfo{ alert;}// 通过apply方法改换showInfo方法的this指向//showInfo; // 对象不援助次对象showInfo.apply;showInfo.call;// 从地点能够观望,apply和call的界别是apply选取三个数组作为被调函数的参数,// 而call是经过将被调函数的富有参数以逗号分隔的情势开展

4、函数参数 arguments实际不是一个数组,只是与数组相仿。arguments除了具备length属性,数组的装有属性和艺术都不抱有。用arguments来贯彻八个抬高的函数。

复制代码 代码如下:function sum(){ var total = 0; for(var i=0; i

5、函数重返值 当二个函数被调用,日常会从函数的{起头举办到}结束。假若想提前截至该函数的施行能够动用return语句,当时,return语句后边的兼具语句将长久不会实行。如:

复制代码 代码如下:function test; return; alert; // 该语句长久被不会实行}test();// 叁个函数总是会重回值,若无应用return重临值,暗中同意再次回到undefined。如:function test; }alert; // 输出:undefined// 假诺函数前使用new方式调用,且再次来到值不是三个目的,则赶回this。如:function test;}var t = new test; // 输出:‘object'alert; // 输出:true

6、异常

老大是忧虑程序不荒谬流程的非平常事故。当检查出那样的事故,应当抛出十分。如:复制代码 代码如下:function add{ // 定义二个加法函数 // 要是传递的参数不是数字类型,则抛出叁个丰硕音讯if(typeof a != 'number' || typeof b != 'number'){ throw { 'name' : "typeError", // 属性是自定义的,名字能够自由取 'message': "add方法必需利用数字作为参数" }; } return a + b;}{ // 捕获add方法可能爆发的要命 try{ add{ // 贰个try语句独有二个catch语句,假如要管理多个十一分,则通过非常的name属性来分歧// 剖断卓殊的项目 if(e.name === "typeError"){ alert;

7、给项目丰裕方法 javascript中允许给大旨项目丰盛方法。如:boolean、string、Number 实例:在Function中增多一个method函数,该函数为Function加多别的自定义的函数,然后使用method函数想Function中增多二个add函数,最后测量试验add函数在Function中确确实实存在。该办法将func函数增多到Function中,以name命名。然后,再次来到Function的对象

本文由杏彩发布,转载请注明来源

关键词: