人生自是有情痴,此恨不关风与月

今天所写的内容,是对之前的内容的总结和扩展。老实说,对于自己之前的一些杜撰和臆测,我并不是很满意。所以这篇博文,我希望能来点干货。

不同调用方式的this指向

在JavaScript中,我们可以用this来指代当前的对象。这种感觉就像使用Java一样。不过与Java不同的是,在Java中,this的指代总是很明显的;然而在JavaScript中,this的指代在不同的调用方式下,其指代往往不同。我为此分为四类:

1. 作为函数调用,指代的是全局对象

如果我们定义以下函数:

function f() {
console.log(this);
}

然后将其作为普通对象调用,即f(),此时this指代的是全局对象window。

2. 作为对象的方法调用,指代是调用对象本身

如果我们将f作为一个对象的方法,也就是说作如下改造:

var a = {};
a.f = f;

然后通过对象a调用方法f,即a.f(),此时this指代的就是调用者a。

3. 作为构造器函数使用,指代的隐含的新建对象

如果我们用new语句调用函数f,即new f(), 则此时this指代的是新建的对象。

4. call和apply的方式

除了上述几种方式外,我们还可以任意指定this的指代,这就是call和apply发挥作用的地方了。call和apply是每个函数对象都拥有的方法,其第一个参数就是要指定的this值,后面是函数正常的参数值。其细微的差别在于参见下面的示例:

function g(name, age) {
this.name = name;
this.age = age
} var a = {}; g.call(a, 'xiaoming', 18);
g.apply(a, ['xiaoming', 18]);

即call的非this参数只需在后面列出就可以了,apply要把它们封装到一个数组里面去。

从某种程度上说,前面的三种函数调用形式都是call方式的一种语法糖:

  1. f() === f.call(window)
  2. a.f() === f.call(a)
  3. new f() === var _a = {}; f.call(_a)

call有很强大的能力,我们常常使用的函数借用就是利用call可以动态指定this这一特性的。例如Array.prototype.slice.call(a)可以将看起来像数组的对象a转化为实际的数组对象。

var a={length:2,0:'first',1:'second'};
Array.prototype.slice.call(a);// ["first", "second"] var a={length:2};
Array.prototype.slice.call(a);// [undefined, undefined]

(三)我的JavaScript系列:不同调用方式的this指向的更多相关文章

  1. JavaScript系列:函数调用方式

    有关JS的问题,持续更新.. 一,函数调用的4种方式 1,函数调用模式 //下面这种模式叫 “函数调用模式”:窗后window来调用 //函数调用四种方式的基础 //这tm不就是作用域this的问题吗 ...

  2. (一)我的Javascript系列:Javascript的面向对象旅程(上)

    今宵酒醒何处,杨柳岸,晓风残月 导引 我的JavaScript系列文章是我自己对JavaScript语言的感悟所撰写的系列文章.现在还没有写完.目前一共出了下面的系列: (三)我的JavaScript ...

  3. 【转】SVG与HTML、JavaScript的三种调用方式

    原文:https://www.cnblogs.com/guohu/p/5085045.html SVG与HTML.JavaScript的三种调用方式 一.在HTMl中访问SVG的DOM 1 2 3 4 ...

  4. javascript系列之DOM(三)---事件

    原文:javascript系列之DOM(三)---事件 事件是javascript跳动的心脏,是DOM所有成分结合的万金油.当我们在WEB 上进行某些交互时,事件也就发生了.点击某些内容,鼠标经过特定 ...

  5. JavaScript 系列博客(三)

    JavaScript 系列博客(三) 前言 本篇介绍 JavaScript 中的函数知识. 函数的三种声明方法 function 命令 可以类比为 python 中的 def 关键词. functio ...

  6. 深入理解javascript系列(4):立即调用的函数表达式

    本文来自汤姆大叔 前言 大家学JavaScript的时候,经常遇到自执行匿名函数的代码,今天我们主要就来想想说一下自执行. 在详细了解这个之前,我们来谈了解一下“自执行”这个叫法,本文对这个功能的叫法 ...

  7. Javascript中函数的四种调用方式

    一.Javascript中函数的几个基本知识点: 1.函数的名字只是一个指向函数的指针,所以即使在不同的执行环境,即不同对象调用这个函数,这个函数指向的仍然是同一个函数. 2.函数中有两个特殊的内部属 ...

  8. [JS]深入理解JavaScript系列(4):立即调用的函数表达式

    转自:汤姆大叔的博客 前言 大家学JavaScript的时候,经常遇到自执行匿名函数的代码,今天我们主要就来想想说一下自执行.在详细了解这个之前,我们来谈了解一下"自执行"这个叫法 ...

  9. Solidity的三种合约间的调用方式 call、delegatecall 和 callcode

    0x00 前言 Solidity(http://solidity.readthedocs.io/en/v0.4.24/) 是一种用与编写以太坊智能合约的高级语言,语法类似于 JavaScript. S ...

随机推荐

  1. “找女神要QQ号码”——跟风篇java新手版(求指点)

    吃完粽子后闲来无事,于是准备在园子里面看看.突然看到了一个“找女神要QQ号码”的文章,顿时精力充沛了~~^_^. 该文章楼主说明此算法来自于<啊哈!算法>,图文并茂,非常不错.<啊哈 ...

  2. eclipse安装cppcheck

     简介: cppcheck 是一个 c 和 c++ 的静态的代码检查分析工具,不用运行程序就可以进行代码的检测. 可以检测一般的内存泄漏和程序编码错误 0.安装 cppcheck 1.57版本,这个版 ...

  3. java之装箱拆箱

    参考http://how2j.cn/k/number-string/number-string-wrap/22.html 封装类 所有的基本类型,都有对应的类类型 比如int对应的类是Integer ...

  4. dialog 设置maxHeight 最大高度

    WindowManager windowManager = (WindowManager) context.getSystemService(Context.WINDOW_SERVICE);Displ ...

  5. Zookeeper发布订阅之SpringBoot+Mybatis多数据源

    1.前言 数据发布/订阅系统,即所谓的配置中心,顾名思义就是发布者将数据发布到Zookeeper的一个或一系列节点上,供订阅者进行数据订阅,进而达到动态获取数据的目的,实现配置信息的集中管理和数据的动 ...

  6. 萌新笔记之Nim取石子游戏

    以下笔记摘自计算机丛书组合数学,机械工业出版社. Nim取石子游戏 Nim(来自德语Nimm!,意为拿取)取石子游戏. 前言: 哇咔咔,让我们来追寻娱乐数学的组合数学起源! 游戏内容: 有两个玩家面对 ...

  7. 洛谷P1654 产品排序(sort)

    P1654 产品排序(sort) 题目描述 有一系列产品,给定每个产品的加工时间和冷却成型时间(冷却过程产品之间没有关系,是单独冷却的).现在你手上有两台机器可以用来加工,你需要安排产品加工的顺序以及 ...

  8. VlAN-9-存储VLAN配置

    vlan和vtp配置可能存储在vlan.dat和运行配置中 对于vtp v3来说无论哪种模式正常和拓展范围的vlan都被存储在vlan.dat文件中,如果为透明或off,vlan配置也会出现在运行配置 ...

  9. 使用JSONPath

    SONPath是查询JSON对象元素的标准方法.JSONPath使用路径表达式来导航JSON文档中的元素,嵌套元素和数组.有关JSON的更多信息,请参阅JSON简介. 使用JSONPath访问JSON ...

  10. Luogu P2257 YY的GCD 莫比乌斯反演

    第一道莫比乌斯反演...$qwq$ 设$f(d)=\sum_{i=1}^n\sum_{j=1}^m[gcd(i,j)==d]$ $F(n)=\sum_{n|d}f(d)=\lfloor \frac{N ...