(一)关于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. noip18

    T1 来自cf原题 考场直接暴力枚举 \(A,B\),15pts. 正解: 首先时间的表达式,\(T=\frac{A}{a_{i}}+\frac{B}{b_{i}}\),然后以\(\frac{1}{a ...

  2. NOIP 模拟 $20\; \rm 玩具$

    题解 \(by\;zj\varphi\) 一道概率与期望好题 对于一棵树,去掉根后所有子树就是一个森林,同理,一个森林加一个根就是一棵树 设 \(f_{i,j}\) 为有 \(i\) 个点的树,高度为 ...

  3. idea的properties文件乱码问题解决

    设置编码格式: File============>Settings,打开设置后,设置成下面的即可解决:

  4. Docker创建Docker-Registry客户端docker-registry-frontend

    docker-compose.yml version: '3.1' services: frontend: image: konradkleine/docker-registry-frontend:v ...

  5. flutter中将widget转为base64

    flutter中可以通过RepaintBoundary widget中的toImage方法将页面中的widget转为base64. 如何使用? 首先要在全局定义一个global key,分配给Repa ...

  6. mysql基础操作(三):数据约束

    首先创建一个数据库 create database homework default character set utf8; use homework; 1.1 默认值约束(default) -- 数 ...

  7. 刷题-力扣-213. 打家劫舍 II

    213. 打家劫舍 II 题目链接 来源:力扣(LeetCode) 链接:https://leetcode-cn.com/problems/house-robber-ii/ 著作权归领扣网络所有.商业 ...

  8. Go与接口:接口即约定

    接口 接口类型是对其他类型行为的概括与抽象.我们可以通过接口来约定某一类通用行为.Go语言的接口是隐式的:只要实现接口A的所有方法就代表实现了接口A. 接口即约定 接口是什么样的? package i ...

  9. python内置函数:sorted中的参数key

    x.sort和sorted函数中参数key的使用 介绍 python中,列表自带了排序函数sort >>> l = [1, 3, 2] >>> l.sort() & ...

  10. docker实现mysql主从复制

    目录 一.概述 二.创建master主库 三.创建Slave实例 四.主从配置 五.参考 一.概述 1.原理 master服务器将数据的改变记录二进制binlog日志,当master上的数据发生改变时 ...