(一)关于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相同

[转]js之this,call,apply用法的更多相关文章

  1. js中call与apply用法

    call和apply,它们的作用都是将函数绑定到另外一个对象上去运行 两者的格式和参数定义: call( thisArg [,arg1,arg2,… ] ); // 参数列表,arg1,arg2,.. ...

  2. JS中call、apply的用法说明

    JS Call()与Apply()的区别 ECMAScript规范给所有函数都定义了Call()与apply()两个方法,call与apply的第一个参数都是需要调用的函数对象,在函数体内这个参数就是 ...

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

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

  4. Join 和 apply 用法

    TSQL中的join语句共有五种类型,left join,right join,inner join,full join,cross join 为了描述方便,解释一个名词"保留表" ...

  5. 原生JS:Function对象(apply、call、bind)详解

    Function对象(apply.call.bind) 原创文章,转摘请注明出处:苏福:http://www.cnblogs.com/susufufu/p/5850180.html 本文参考MDN做的 ...

  6. JS里设定延时:js中SetInterval与setTimeout用法

     js中SetInterval与setTimeout用法 JS里设定延时: 使用SetInterval和设定延时函数setTimeout 很类似.setTimeout 运用在延迟一段时间,再进行某项操 ...

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

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

  8. python中的filter、map、reduce、apply用法

    1. filter 功能: filter的功能是过滤掉序列中不符合函数条件的元素,当序列中要删减的元素可以用某些函数描述时,就应该想起filter函数. 调用: filter(function,seq ...

  9. js replace 与replaceall实例用法详解

    这篇文章介绍了js replace 与replaceall实例用法详解,有需要的朋友可以参考一下stringObj.replace(rgExp, replaceText) 参数 stringObj 必 ...

随机推荐

  1. NOIP 模拟 6 模板

    题目 题解 这道题是一道启发式合并的题目,每次合并完重构一下线段树就可以,不用线段树合并. 以操作时间为下标,建立一颗线段树,维护小球的个数与小球的颜色数,最后线段树上二分查找. 我们先不用考虑每个节 ...

  2. 【设计模式】装饰者模式(DecoratorMode0

    From: https://liudongdong1.github.io/ 装饰者模式(Decorator Pattern):动态地给一个对象增加一些额外的职责,增加对象功能来说,装饰模式比生成子类实 ...

  3. 剑指 Offer 13. 机器人的运动范围

    剑指 Offer 13. 机器人的运动范围 地上有一个m行n列的方格,从坐标 [0,0] 到坐标 [m-1,n-1] .一个机器人从坐标 [0, 0] 的格子开始移动,它每次可以向左.右.上.下移动一 ...

  4. taro小程序地址选择组件

    效果图: address_picker.tsx: import Taro, { Component } from '@tarojs/taro' import { View, PickerView, P ...

  5. Spring Boot集成Redis集群(Cluster模式)

    目录 集成jedis 引入依赖 配置绑定 注册 获取redis客户端 使用 验证 集成spring-data-redis 引入依赖 配置绑定 注册 获取redis客户端 使用 验证 异常处理 同样的, ...

  6. Visual Studio 2022 预览版3 最新功能解说

    我们很高兴地宣布Visual Studio 2022 的第三个预览版问世啦!预览版3 提供了更多关于个人和团队生产力.现代开发和持续创新等主题的新功能.在本文中,我们将重点介绍Visual Studi ...

  7. ES6扩展——字符串部分新的方法

    1.padStart padEnd(count, 字符串) 补全字符串 //padStart(num,str) padEnd补全一个字符串的长度 //num表示补全到几位,str是用来填充的字符串 { ...

  8. blender skin modifier 太好玩了

    https://docs.blender.org/manual/en/latest/modeling/modifiers/generate/skin.html 只需要像画火柴人一样把点连起来,skin ...

  9. Mybatis(一)——HelloWorld

    本人的博客一向保持"傻瓜式"的风格. 循序渐进学Mybatis,先konw how,再konw why.先整体,再细节! 本文不讲难懂的概念,先通过一个案例,希望读者跟着本文一步一 ...

  10. NOIP模拟13「工业题·卡常题·玄学题」

    T1:工业题 基本思路   这题有一个重要的小转化: 我们将原来的函数看作一个矩阵,\(f(i,j-1)*a\)相当于从\(j-1\)向右走一步并贡献a,\(f(i-1,j)*b\)相当于从\(i-1 ...