(三)我的JavaScript系列:不同调用方式的this指向
人生自是有情痴,此恨不关风与月
今天所写的内容,是对之前的内容的总结和扩展。老实说,对于自己之前的一些杜撰和臆测,我并不是很满意。所以这篇博文,我希望能来点干货。
不同调用方式的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方式的一种语法糖:
f() === f.call(window)a.f() === f.call(a)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指向的更多相关文章
- JavaScript系列:函数调用方式
有关JS的问题,持续更新.. 一,函数调用的4种方式 1,函数调用模式 //下面这种模式叫 “函数调用模式”:窗后window来调用 //函数调用四种方式的基础 //这tm不就是作用域this的问题吗 ...
- (一)我的Javascript系列:Javascript的面向对象旅程(上)
今宵酒醒何处,杨柳岸,晓风残月 导引 我的JavaScript系列文章是我自己对JavaScript语言的感悟所撰写的系列文章.现在还没有写完.目前一共出了下面的系列: (三)我的JavaScript ...
- 【转】SVG与HTML、JavaScript的三种调用方式
原文:https://www.cnblogs.com/guohu/p/5085045.html SVG与HTML.JavaScript的三种调用方式 一.在HTMl中访问SVG的DOM 1 2 3 4 ...
- javascript系列之DOM(三)---事件
原文:javascript系列之DOM(三)---事件 事件是javascript跳动的心脏,是DOM所有成分结合的万金油.当我们在WEB 上进行某些交互时,事件也就发生了.点击某些内容,鼠标经过特定 ...
- JavaScript 系列博客(三)
JavaScript 系列博客(三) 前言 本篇介绍 JavaScript 中的函数知识. 函数的三种声明方法 function 命令 可以类比为 python 中的 def 关键词. functio ...
- 深入理解javascript系列(4):立即调用的函数表达式
本文来自汤姆大叔 前言 大家学JavaScript的时候,经常遇到自执行匿名函数的代码,今天我们主要就来想想说一下自执行. 在详细了解这个之前,我们来谈了解一下“自执行”这个叫法,本文对这个功能的叫法 ...
- Javascript中函数的四种调用方式
一.Javascript中函数的几个基本知识点: 1.函数的名字只是一个指向函数的指针,所以即使在不同的执行环境,即不同对象调用这个函数,这个函数指向的仍然是同一个函数. 2.函数中有两个特殊的内部属 ...
- [JS]深入理解JavaScript系列(4):立即调用的函数表达式
转自:汤姆大叔的博客 前言 大家学JavaScript的时候,经常遇到自执行匿名函数的代码,今天我们主要就来想想说一下自执行.在详细了解这个之前,我们来谈了解一下"自执行"这个叫法 ...
- Solidity的三种合约间的调用方式 call、delegatecall 和 callcode
0x00 前言 Solidity(http://solidity.readthedocs.io/en/v0.4.24/) 是一种用与编写以太坊智能合约的高级语言,语法类似于 JavaScript. S ...
随机推荐
- java 获取 HttpServletRequest 值 demo
private void getHttpServletRequestInfo(HttpServletRequest request){ try { StringBuilder stringBuilde ...
- installshield 6109错误解决方案
电脑重装了一下过后,运行打包程序就一直报6109错误,网上也没有查找出相关答案,真是急死了,后来无意发现输出项目的发布路径和当前自己setup的路径不一致,由于移动了文件夹位置,这个路径没有跟随修改, ...
- 《Java多线程编程核心技术》读后感(十四)
单例模式与多线程 立即加载/饿汉模式 立即加载就是使用类的时候已经将对象创建完毕,常见的实现办法就是直接new实例化. 立即加载/饿汉模式实在调用方法前,实例已经被创建了 package Six; p ...
- Elastic-job使用及原理
一.原理 elastic-job有lite版和cloud版,最大的区别是有无调度中心,笔者采用的是lite版本,无中心化. tips: 第一台服务器上线触发主服务器选举.主服务器一旦下线,则重新触发选 ...
- 聊聊心跳机制及netty心跳实现
我们在使用netty的时候会使用一个参数,ChannelOption.SO_KEEPALIVE为true, 设置好了之后再Linux系统才会对keepalive生效,但是linux里边需要配置几个参数 ...
- 无监督学习:Deep Generative Mode(深度生成模型)
一 前言 1.1 Creation 据说在费曼死后,人们在他生前的黑板上拍到如图画片,在左上角有道:What i cannot create ,I do not understand. Generat ...
- ansible无网络安装openstack(Newton)
概要 apt使用本地源,pip使用本地源 网络环境 物理机环境 网络名 网络地址 VLAN br-ex 192.168.200.250/24 90 br-mgmt 92.0.0.100/24 92 a ...
- TCP/IP之大明邮差
大明王朝天启四年, 清晨. 天色刚蒙蒙亮,我就赶着装满货物的马车来到了南城门, 这里是集中处理货物的地方 , 一队一队的马车都来到这里, 城头的士兵带着头盔,身披盔甲, 手持长枪, 虎视眈眈的注视这下 ...
- Python学习笔记(字典)
今天学习一个python中的基本类型--字典(dictionary) 字典这种数据结构有点像我们平常用的通讯录,有一个名字和这个名字对应的信息.在字典中,名字叫做“键”,对应的内容信息叫做“值”.字典 ...
- Java基础--基本规则、语法
一.关键字.保留字.标识符.常量.变量 1.关键字:使用某种语言赋予特殊含义的单词. 2.保留字:没有赋予特殊含义,但以后可能会使用的单词. 3.标识符:自定义的单词,以数字.字母.下划线以及$符组成 ...