一、前言                                                             

大家先预计一下以下四个函数调用的结果吧!

var test = function(){
console.log('hello world')
return 'fsjohnhuang'
}
test.call() // ①
Function.prototype.call(test) // ②
Function.prototype.call.call(test) // ③
Function.prototype.call.call(Function.prototype.call, test) // ④

揭晓:①、③和④. 控制台显示hello world,并返回fsjohnhuang。②. 返回undefined且不会调用test函数;

那到底是啥回事呢?下面将一一道来。

二、从常用的call函数说起                                                        

还是通过代码说事吧

var test2 = function(){
console.log(this)
return 'fsjohnhuang'
}
test2() // 控制台显示window对象信息,返回值为fsjohnhuang
test2.call({msg: 'hello world'}) // 控制台显示{msg:'hello world'}对象信息,返回值为fsjohnhuang

test2.call实际上是调用 Function.prototype.call (thisArg [ , arg1 [ , arg2, … ] ] ) ,而其作用我想大家都了解的,但其内部的工作原理是怎样的呢? 这时我们可以参考ECMAScript5.1语言规范。以下是参照规范的伪代码(各浏览器的具体实现均不尽相同)

Function.prototype.call = function(thisArg, arg1, arg2, ...) {
/*** 注意:this指向调用call的那个对象或函数 ***/
// 1. 调用内部的IsCallable(this)检查是否可调用,返回false则抛TypeError
if (![[IsCallable]](this)) throw new TypeError() // 2. 创建一个空列表
// 3. 将arg1及后面的入参保存到argList中
var argList = [].slice.call(arguments, 1) // 4. 调用内部的[[Call]]函数
return [[Call]](this, thisArg, argList)
}

那现在我们可以分析一下 ①test.call() ,并以其为基础去理解后续的内容。它内部实现的伪代码如下:

test.call = function(thisArg, arg1, arg2, ...){
if (![[IsCallable]](test)) throw new TypeError() var argList = [].slice.call(arguments, 1)
return [[Call]](test, thisArg, argList)
}

下面我们再来分析② Function.prototype.call(test) ,伪代码如下:

Function.prototype.call = function(test, arg1, arg2, ...){
/*** Function.prototype是一个function Empty(){}函数 ***/ if (![[IsCallable]](Function.prototype)) throw new TypeError() var argList = [].slice.call(arguments, 1)
// 实际上就是调用Empty函数而已,那返回undefined是理所当然的
return [[Call]](Function.prototype, test, argList)
}

三、Function.prototype.call.call内部究竟又干嘛了?                                       

有了上面的基础那么Function.prototype.call.call就不难理解了。就是以最后一个call函数的thisArg作为Function.prototype.call的this值啦!伪代码如下:

// test作为thisArg传入
Function.prototype.call.call = function(test, arg1, arg2,...){
if ([[IsCallable]](Function.prototype.call)) throw new TypeError() var argList = [].slice.call(arguments, 1)
return [[Call]](Function.prototype.call, test, argList)
} // test作为函数的this值
// 注意:入参thisArg的值为Function.prototype.call.call的入参arg1
Function.prototype.call = function(thisArg, arg1, arg2,...){
if ([[IsCallable]](test)) throw new TypeError() var argList = [].slice.call(arguments, 1)
return [[Call]](test, thisArg, argList)
}

四、见鬼的合体技——Function.prototype.call.call(Function.prototype.call, test) 

看伪代码理解吧!

// test作为arg1传入
Function.prototype.call.call = function(Function.prototype.call, test){
if ([[IsCallable]](Function.prototype.call)) throw new TypeError() var argList = [].slice.call(arguments, 1)
return [[Call]](Function.prototype.call, Function.prototype.call, argList)
} Function.prototype.call = function(test){
if ([[IsCallable]](Function.prototype.call)) throw new TypeError() var argList = [].slice.call(arguments, 1)
return [[Call]](Function.prototype.call, test, argList)
} Function.prototype.call = function(thisArg){
if ([[IsCallable]](test)) throw new TypeError() var argList = [].slice.call(arguments, 1)
return [[Call]](test, thisArg, argList)
}

这种合体技不就是比第三节的多了一个步吗?有必有吗?

五、新玩法——遍历执行函数数组                            

Array.prototype.resolve = function(){
  this.forEach(Function.prototype.call, Function.prototype.call)
}
var cbs = [function(){console.log(1)}, function(){console.log(2)}]
cbs.resolve()
// 控制台输出
// 1
// 2

这是为什么呢?那先要看看 Array.prototype.forEach(fn, thisArg) 的内部实现了,伪代码如下:

Array.prototype.forEach = function(fn, thisArg){
var item
for (var i = 0, len = this.length; i < len; ++i){
item = this[i]
fn.call(thisArg, item, i, this)
}
}

大家再自行将编写 Function.prototype.call.call(Function.prototype.call, item, i,this) 的伪代码就明白了

六、总结                                          

在项目中关于Function.prototype.call.call的用法确实少见,而且性能不高,本篇仅仅出于学习的目的,只希望再深入了解一下Function.prototype.call的内部原理而已。

尊重原创,转载请注明在:http://www.cnblogs.com/fsjohnhuang/p/4160942.html ^_^肥仔John

七、参考                                           

在JavaScript的Array数组中调用一组Function方法

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach

Annotated ECMAScript 5.1

 

出处:http://www.cnblogs.com/fsjohnhuang/p/4160942.html

认识Function.prototype.call的更多相关文章

  1. Function.prototype.toString 的使用技巧

    Function.prototype.toString这个原型方法可以帮助你获得函数的源代码, 比如: function hello ( msg ){ console.log("hello& ...

  2. Object.prototype和Function.prototype一些常用方法

    Object.prototype 方法: hasOwnProperty 概念:用来判断一个对象中的某一个属性是否是自己提供的(主要是判断属性是原型继承还是自己提供的) 语法:对象.hasOwnProp ...

  3. Object.prototype 与 Function.prototype 与 instanceof 运算符

    方法: hasOwnProperty isPrototypeOf propertyIsEnumerable hasOwnProperty 该方法用来判断一个对象中的某一个属性是否是自己提供的( 住要用 ...

  4. JS魔法堂:再次认识Function.prototype.call

    一.前言                                大家先预计一下以下四个函数调用的结果吧! var test = function(){ console.log('hello w ...

  5. 一起Polyfill系列:Function.prototype.bind的四个阶段

    昨天边参考es5-shim边自己实现Function.prototype.bind,发现有不少以前忽视了的地方,这里就作为一个小总结吧. 一.Function.prototype.bind的作用 其实 ...

  6. Function.prototype.bind接口浅析

    本文大部分内容翻译自 MDN内容, 翻译内容经过自己的理解. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Glo ...

  7. JavaScript 函数绑定 Function.prototype.bind

    ECMAScript Edition5 IE9+支持原生,作用为将一个对象的方法绑定到另一个对象上执行. Function.prototype.bind = Function.prototype.bi ...

  8. Function.prototype.bind

    解析Function.prototype.bind 简介 对于一个给定的函数,创造一个绑定对象的新函数,这个函数和之前的函数功能一样,this值是它的第一个参数,其它参数,作为新的函数的给定参数. b ...

  9. 解析Function.prototype.bind

    简介 对于一个给定的函数,创造一个绑定对象的新函数,这个函数和之前的函数功能一样,this值是它的第一个参数,其它参数,作为新的函数的给定参数. bind的作用 bind最直接的作用就是改变this的 ...

  10. Function.prototype.call.apply结合用法

     昨天在网上看到一个很有意思的js面试题,就跟同事讨论了下,发现刚开始很绕最后豁然开朗,明白过来之后发现还是挺简单的,跟大家分享下!  题目如下: var a = Function.prototype ...

随机推荐

  1. vfp使用笔记

    1:update数据,根据记录中某个字段的值,从另一个表中查询并填充数据 UPDATE cs2013yy SET cs2013yy.ksh=NVL((SELECT cs2013gkbm.ksh FRO ...

  2. 什么是JavaScript

    来源:https://www.koofun.com/pro/kfpostsdetail?kfpostsid=30&cid= JavaScript是一种松散类型的客户端脚本语言,在用户浏览器中执 ...

  3. swift基础-3

    fallthrough 贯穿 case  可以不必写break 如果不需要知道区间内 每一项的值  可以使用 下划线 —— 来代替变量名 忽略 对该值的访问 for index in 1...5{ p ...

  4. 邮箱/邮件地址的正则表达式及分析(JavaScript,email,regex)

    简言 在做用户注册时,常会用到邮箱/邮件地址的正则表达式.本文列举了几种方案,大家可以根据自己的项目情况,选择最适合的方案. 方案1 (常用) 规则定义如下: 以大写字母[A-Z].小写字母[a-z] ...

  5. base-command

    命令分类 自带命令 工具型 文件系统 第三方命令 CLI GUI 操作文件系统 pwd(print working directory) ls(list files) ls 列出当前目录文件 ls 目 ...

  6. java 实现 excel sheet 拷贝到另一个Excel文件中 poi

    public class CopyExcelSheetToAnotherExcelSheet { public static void main(String[] args) throws FileN ...

  7. 零基础逆向工程18_PE结构02_联合体_节表_PE加载过程

    联合体 特点 1.联合体的成员是共享内存空间的 2.联合体的内存空间大小是联合体成员中对内存空间大小要求最大的空间大小 3.联合体最多只有一个成员有效 节表数据结构说明 PE 加载 过程 FileBu ...

  8. Volley解析(一)--Volley的使用

    Volley解析(一)--Volley的使用 Volley 是一个HTTP协议的网络请求框架 Volley的优势: 自动安排网络请求 支持多个并发网络连接 具有标准HTTP缓存一致性的透明磁盘和内存响 ...

  9. 【extjs6学习笔记】1.3 初始:根据模板创建项目

    使用sencha创建应用 命令说明:sencha -sdk /path/to/sdk generate app -s /your/templates/path/ MyApp /path/to/myap ...

  10. Python之时间表示

    Python的time模块中提供了丰富的关于时间操作方法,可以利用这些方法来完成这个需求. time.time() :获取当前时间戳 time.ctime(): 当前时间的字符串形式 time.loc ...