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

  1. function doSomething(){
  2. alert(this);
  3. }
  4. doSomething();
我是在firefox里面调试的,所以返回的结果是[Object Window]。
那么这个 [Object Window], 到底是什么呢?看看下面的代码

  1. function doSomething(){
  2. alert(this===window);
  3. }
  4. doSomething();

看到弹出了true, 也就是说在这种正常情况下,this其实就是window
所以,我们定义了一个全局的变量的时候,可以
var test="Tony";
也可以
window["test"]="Tony";
下面这个例子,进一步说明,正常情况下,函数里的this就是window

  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的一个工具。
     看这个例子:

  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方法里,而不是那个匿名函数里不就可以了吗?修改代码如下:

  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();
     代码如下:

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

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

  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.那如果里面有参数呢?看代码

  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

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

  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相同

上面这写代码写红色部分就是apply的用法。

转自【http://liuhd2010.iteye.com/blog/1894237】;

js 之 this call apply的更多相关文章

  1. js继承之call,apply和prototype随谈

    在js中,call,apply和prototype都可以实现对象的继承,下面我们看一个例子: function FatherObj1() { this.sayhello = "I am jo ...

  2. js中call和apply的实现原理

    js中call和apply的实现原理            实现call的思路: /* 还有就是call方法是放在Function().prototype上的也就是构造函数才有的call方法 (我门可 ...

  3. 使用JS简单实现一下apply、call和bind方法

    使用JS简单实现一下apply.call和bind方法 1.方法介绍 apply.call和bind都是系统提供给我们的内置方法,每个函数都可以使用这三种方法,是因为apply.call和bind都实 ...

  4. JS中 call() 与apply 方法

    1.方法定义 call方法: 语法:call([thisObj[,arg1[, arg2[,   [,.argN]]]]]) 定义:调用一个对象的一个方法,以另一个对象替换当前对象. 说明: call ...

  5. js基础篇——call/apply、arguments、undefined/null

    a.call和apply方法详解 call方法: 语法:call([thisObj[,arg1[, arg2[,   [,.argN]]]]]) 定义:调用一个对象的一个方法,以另一个对象替换当前对象 ...

  6. 区别和详解:js中call()和apply()的用法

    1.关于call()和apply()的疑点: apply和call的区别在哪里 什么情况下用apply,什么情况下用call apply的其他巧妙用法(一般在什么情况下可以使用apply) 2.语法和 ...

  7. JS中call和apply

    作用: 替换当前对象的方法中的this. 理解: call和apply是为了动态改变this出现的,当一个object没有某个方法,但是其他的有,我们可以借助call或apply用其它对象的方法来操作 ...

  8. js里function的apply vs. bind vs. call

    js里除了直接调用obj.func()之外,还提供了另外3种调用方式:apply.bind.call,都在function的原型里.这3种方法的异同在stackoverflow的这个答案里说的最清楚, ...

  9. (转)js的call和apply

    1.方法定义 call方法: 语法:call([thisObj[,arg1[, arg2[,   [,.argN]]]]]) 定义:调用一个对象的一个方法,以另一个对象替换当前对象. 说明: call ...

  10. 关于js的call()和apply()两个函数的一点个人看法

    首先说明一下,call()和apply都是js的内置函数 它的作用是:改变call或者apply函数里面的``第一个参数对象``的指针,使它转向引用它的函数 call()的用法,call(对象,参数1 ...

随机推荐

  1. ReportMachine常见问题

    ReportMachine常见问题 2012-06-22 12:26:50|  分类: Delphi|举报|字号 订阅     下载LOFTER我的照片书  |     1.不打印特定的MemoVie ...

  2. cxGrid之checkbox小结

    http://www.cnblogs.com/Kim53622744/p/4428997.html 在cxgrid中增加选择列 1.在dataset(query/table/clientdataset ...

  3. Hibernate在PostgreSQL上执行sum函数导致数据失真的问题

    有一段通过Hibernate从PostgreSQL上进行sum统计的简单代码,但统计结果却导致数据失真,不知原因何在,求指教! Java代码片段如下: public List<Object> ...

  4. 【转】IE浏览器CSS BUG集锦

    Internet Explorer CSS Bugs Overview Internet Explorer is famous for not supporting many of CSS prope ...

  5. python常用代码片段

    目录 Python3常用 文件处理 json处理 log日志 argparse使用 INIparser Python3常用 文件处理 class BaseMethod: @staticmethod d ...

  6. OCP考试062题库出现大量新题-19

    choose three Which three statements are true about Oracle Data Pump? A) Oracle Data Pump export and ...

  7. Android MediaPlayer setDataSource failed

    今天在尝试使用MediaPlayer播放音乐时出了一个问题,在使用 mp.setDataSource(this,Uri.parse("/sdcard/Music/adele.mp3" ...

  8. WebDriver高级应用实例(3)

    3.1自动化下载某个文件 被测网页的网址: https://pypi.org/project/selenium/#files Java语言版本的API实例代码 import java.util.Has ...

  9. oracle 闪回、归档的设置建议

    闪回与归档的相关测试 参考博客:http://www.cnblogs.com/hellojesson/p/7050097.html 数据库在归档模式下的管理 参考博客:http://www.cnblo ...

  10. opencv2函数学习之threshold:实现图像阈值化

    在opencv2中,threshold函数可以进行阈值化操作. double threshold( const Mat& src, Mat& dst, double thresh,do ...