zoukankan      html  css  js  c++  java
  • [转]js之this,call,apply用法

    (一)关于this

    首先关于this我想说一句话,这句话记住了this的用法你也就差不多都能明白了:this指的是当前函数的对象。这句话可能比较绕,我会举出很多例子和这句话呼应的!(看下文)
    1.首先看下面这段代码, 定义一个函数,弹下this,

    Js代码  收藏代码
    1. function doSomething(){  
    2.      alert(this);  
    3. }  
    4. doSomething();  

     

    我是在firefox里面调试的,所以返回的结果是[Object Window]。
    那么这个 [Object Window], 到底是什么呢?看看下面的代码
    Js代码  收藏代码
    1. function doSomething(){  
    2.      alert(this===window);  
    3. }  
    4. doSomething();  
     
    看到弹出了true, 也就是说在这种正常情况下,this其实就是window
    所以,我们定义了一个全局的变量的时候,可以
    var test="Tony";
    也可以
    window["test"]="Tony";
    下面这个例子,进一步说明,正常情况下,函数里的this就是window
    Js代码  收藏代码
    1. var test="Tony";  
    2. function doSomething(){  
    3.      alert(this.test);     //弹出 "Tony";  
    4.      alert(window.test);   //弹出 "Tony";  
    5. }  
    6. doSomething();  
     

    第一次呼应:通过以上几个例子,我想可以说这几个例子中得this指的就是他当前函数doSomething()的Window对象。那顾名思义this.test自然就等于window.test了。事实也是如此。

    2.我再举一个闭包的例子,但是在这里我不会解释什么是闭包,只是讲this的用法,明天我会学习闭包,今天就先当他是一个未知数,来学习this的一个工具。
         看这个例子:
         

    Js代码  收藏代码
    1. var name ="The Window";                     //创建了一个全局变量name  
    2. var object = {                       //又创建了一个对象(创建对象的方法有很多种)  
    3.       name:"My Object",                //创建了一个name属性(属性就是引用非函数)  
    4.       doSomething:function(){          //创建了一个doSomething方法(方法就是引用了函数)  
    5.              return function(){       //这个doSomething方法返回一个匿名函数  
    6.                   return this.name;    //这个匿名函数又返回this.name  
    7.           };  
    8.     }  
    9. };  
    10. alert(object.doSomething()());  
    11.                             //由于这个doSomething方法返回的一个函数,所以这样就可以调用这个函数了  

     
         这段代码的主要解释我都注在了后面,主要想说的就是:这段代码返回的结果是"The Window",而不是我所预期的"My Object",前面不是说了吗? this指的是当前函数的对象, 可是在这里为什么就不是呢?其实就是因为闭包的特性,由于这个匿名函数构成了一个闭包,所以他所保存的就是整个变量对象也就是Window对象。这里先不说为什么,明天学闭包的时候我还会用这个例子的,这里就先接受下来。
         那么如何做才能让结果返回"My Object"呢?还是那句话this指的是当前函数的对象,那么问题就简单了,也就是让this放在doSomething方法里,而不是那个匿名函数里不就可以了吗?修改代码如下:
        

    Js代码  收藏代码
    1. var name ="The Window";                      
    2. var object = {                        
    3.      name:"My Object",                
    4.      doSomething:function(){  
    5.            var abc = this ;          
    6.            return function(){        
    7.                   return abc.name;     
    8.            };  
    9.       }  
    10. };  
    11. alert(object.doSomething()());  

     
    第二次呼应:现在再看代码红色部分做的修改,this是不是指的是当前doSomething()函数的object对象了?那再输出结果自然就是"My Object"了。
          通过这两次呼应,是不是感觉已经对this有了一定的了解呢,其实this用到的地方还很多,以后还会慢慢讲到,比如在jQuery中this依然指的是当前函数的对象。
    (二)关于call
       1.如果我们调用函数的时候,想让函数里的 this 代表别的对象,而不是当前函数的对象。有什么办法呢?那就只好使用call和apply了(对于我这种初学者,这两个东西太恶心了)                  
         通常我们调用函数,都是直接采用以下形式调用
         [调用] 函数名();  //doSomething();
         其实我们还可以采用其它方法, 比如 call 这个单词,就是调用的意思,我们这里要用到它。
    还是以doSomething函数为例:
         中文:函数名.调用();
         英文:doSomething.call();
         代码如下:
        

    Js代码  收藏代码
    1. var test="Tony";  
    2. function doSomething(){  
    3.     alert(this.test);     //弹出 "Tony";  
    4. }  
    5.   
    6. doSomething(); //   [调用]  doSomething();  
    7. doSomething.call(); // 函数.调用()  

     
    现在我们只是做了函数的调用,还没有改变this那么怎么改变 this 呢?这个时候call就要发挥威力了。
    本来doSomething函数里的this表示的是 window ,我们执行下面这句。
         doSomething.call(某个对象);
    这个时候doSomething里的this就变成了"某个对象",看下面的例子:
         

    Js代码  收藏代码
    1. var test="Tony";  
    2. var myobj={  
    3.     test : "Tom"  
    4. };  
    5. function doSomething(){  
    6.     alert(this.test);     
    7. }  
    8. toolmao.call(); // 弹出 window.test   ,即 "Tony"  
    9. toolmao.call(myobj); // 这个时候,doSomething函数里的this指向 myobj,  
    10.                           //所以弹出的是 myobj.test 即 "Tom"  

     
         2.那如果里面有参数呢?看代码
        

    Js代码  收藏代码
    1. var test="Tony";  
    2. var myobj={  
    3.     test : "Tom"  
    4. };  
    5. function doSomething(name, age){  
    6.     alert(this.test + ":" + name + age);    
    7. }  
    8.   
    9. doSomething("Tony",23);//普通调用 结果Tony:Tony23  
    10. doSomething.call(myobj,"Tony",23);//call调用结果Tom:Tony23  

     
    上面代码,我们可以看出,相比普通调用, call 只是多了一个用来指定this的参数,call 干什么用的?就是干这个用的!!现在有体会了吧?
    (三)关于apply
    都知道call的用法了,apply其实是一个意思。只不过是调用参数的形式不一样罢了。
    call是一个一个调用参数,而apply是调用一个数组。还是用上面相同的例子:
        

    Js代码  收藏代码
    1. var test="Tony";  
    2. var myobj={  
    3.      test : "Tom"  
    4. };  
    5. function doSomething(name, age){  
    6.     alert(this.test + ":" + name + age);    
    7. }  
    8. doSomething("Tony",23);//普通调用 结果Tony:Tony23  
    9. doSomething.call(myobj,"Tony",23);//call调用结果Tom:Tony23  
    10. doSomething.apply(object,["Tony",23]);//apply调用 结果与call相同  

     

    人是在一天天内提高的,只有不断努力才不会被淘汰!
  • 相关阅读:
    WPF Caliburn 学习笔记(五)HelloCaliburn
    MSDN 教程短片 WPF 20(绑定3ObjectDataProvider)
    MSDN 教程短片 WPF 23(3D动画)
    比赛总结一
    HDU3686 Traffic Real Time Query System
    HDU3954 Level up
    EOJ382 Match Maker
    UESTC1565 Smart Typist
    HDU3578 Greedy Tino
    ZOJ1975 The Sierpinski Fractal
  • 原文地址:https://www.cnblogs.com/bais/p/4921031.html
Copyright © 2011-2022 走看看