zoukankan      html  css  js  c++  java
  • Jquery(13)Jquery this的指向

            JavaScript中的this不总是指向当前对象,函数或类中的this指向与调用这个函数的对象以及上下文环境是息息相关的。如在全局作用域调用一个含this的对象,此时当前对象的this指向的是window。为了让this的指向符合自己的意愿,JavaScript提供了两个方法用以改变this的指向,它们是callapply,当然也有利用闭包来实现的方法。在Jquery 中的this的指向是怎么样的呢?

    一、Ajax回调函数中的this,默认情况下指向AJAX配置对象ajaxSettings。

    在jQuery内部是用s.success代替传入的回调函数去执行的,而success的调用对象就是s,即ajaxSettings对象的缩写。

    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();
    $.get('CheckWebLogin.aspx', IM.connect);
    //弹出的host与port都是undefined。

    如果希望AJAX回调函数代码socket.connect(this.host, this.port)中的this指向类classIm的实例对象IM,或者说是想socket.connect()方法能得到正确的参数值,大致有下面几种方法:

    1、设置ajax的context选项,将Ajax回调函数中的this指向对象IM。

    $.ajax({
        context:IM,
        type:’get’,
        ulr:”page.html”,
        success:IM.connect
    })

    2、调用$.proxy,改变函数内this的指向

    $.get(”page.html”,$.proxy(IM.context,IM))

    3、直接传对象的正确引用而非this指针,或叫对象实传。

    这是最常见的做法,即在类实例化时用一个变量存储对当前对象的引用,在后面的方法中直接使用此变量代替this的使用。注意:这种方法并没有真正改变this的指向。

    function classIm()
    {
        var self = this;
        this.host = '192.168.1.28';
        this.port = '8080';
        this.connect = function(data)
        {
            socket.connect(self.host, self.port);
        };
    }

    4、使用apply加闭包实现真正改变this的指向。

    这种方法是很多JavaScript框架的做法。

    Function.prototype.Proxy = function(thisObj)
    {
        var _method = this;
        return function(data)
        {
            return _method.apply(thisObj,[data]);
           //或者
           return  function()
           {ret _fn.apply(thisObj,arguments);};
        };
    
    }
    //调用:
    var IM = new classIm();
    $.get('CheckWebLogin.aspx', IM.connect.Proxy(IM));

    5、在匿名回调函数中再调用实际的回调处理函数。

    相当于加了一个函数包装器,不建议使用。

    $.get('page.html', function(data){
                            IM.connect(data)});

    二、jQuery事件绑定回调函数中的this指向event.currentTarget,即附着这个函数的DOM对象。

    1、可以在函数绑定时传递参数:

    $('#a').bind('click'{self:this},this.onClick);
    
    function onClick(event){
      var self=event.data.self;
    }

    2、可以使用上面的2、3、4、5中方法改变this的指向。

    $("#a").click($.proxy(myFun,this));
    //
    $("#a").click(myFun.Proxy(this));
  • 相关阅读:
    阅读13-17章
    阅读<构建之法>10、11、12章
    作业5.2
    作业5.1
    作业四:构建之法的困惑和思考(5-7)
    做汉堡
    作业三:构建之法的困惑和思考(1-5)
    实验二 合作:王宏财 http://www.cnblogs.com/wanghongcai/
    实验一--四则运算
    数独九宫格
  • 原文地址:https://www.cnblogs.com/springsnow/p/9461756.html
Copyright © 2011-2022 走看看