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

简介:

一、前言                                                             

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

复制代码
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

如果您觉得本文的内容有趣就扫一下吧!捐赠互勉!

posted @ 2014-12-13 11:49 ^_^肥仔John 阅读( 3714) 评论( 1) 编辑 收藏
  
#1楼 3310112 2015/11/19 16:08:18 2015-11-19 16:08 jack_Meng  
如何编写 Function.prototype.call.call(Function.prototype.call, item, i,this) 的伪代码啊?本人初学,本来就开的有点晕,我只能跑一下你的代码。麻烦不吝赐教!~

公告

 
本文转自 ^_^肥仔John博客园博客,原文链接: http://www.cnblogs.com/fsjohnhuang/p/4160942.html,如需转载请自行联系原作者
 
相关文章
|
26天前
|
JavaScript 前端开发
一个js里可以有多少个async function,如何用最少的async function实现多个异步操作
在 JavaScript 中,可以通过多种方法实现多个异步操作并减少 `async` 函数的数量。
|
2月前
|
SQL JavaScript 前端开发
【Azure 应用服务】Azure JS Function 异步方法中执行SQL查询后,Callback函数中日志无法输出问题
【Azure 应用服务】Azure JS Function 异步方法中执行SQL查询后,Callback函数中日志无法输出问题
|
4月前
|
JavaScript 前端开发
JavaScript函数是代码复用的关键。使用`function`创建函数
【6月更文挑战第22天】JavaScript函数是代码复用的关键。使用`function`创建函数,如`function sayHello() {...}`或`function addNumbers(num1, num2) {...}`。调用函数如`sayHello()`执行其代码,传递参数按值进行。函数可通过`return`返回值,无返回值默认为`undefined`。理解函数对于模块化编程至关重要。
36 4
|
5月前
|
JavaScript 前端开发
在JavaScript中,函数原型(Function Prototype)是一个特殊的对象
【5月更文挑战第11天】JavaScript中的函数原型是一个特殊对象,它为所有函数实例提供共享的方法和属性。每个函数在创建时都有一个`prototype`属性,指向原型对象。利用原型,我们可以向所有实例添加方法和属性,实现继承。例如,我们定义一个`Person`函数,向其原型添加`greet`方法,然后创建实例`john`和`jane`,它们都能调用这个方法。尽管可以直接在原型上添加方法,但推荐在构造函数内部定义以封装数据和逻辑。
48 2
|
5月前
|
存储 JavaScript 前端开发
js开发:请解释什么是回调函数(callback function),并给出一个示例。
回调函数是JavaScript中处理异步编程的一种常见模式,常用于事件驱动和I/O操作。它们作为参数传递给其他函数,在特定条件满足或任务完成后被调用。例如,`asyncOperation`函数接受回调函数`handleResult`,在模拟的异步操作完成后,调用`handleResult`并传递结果。这使得程序员能在操作完成后执行后续任务。
60 1
|
JavaScript
JS(第二十六)ES6语法中function
JS(第二十六)ES6语法中function
82 0
|
5月前
|
JavaScript 数据安全/隐私保护 开发者
解决vue引发的报错-sub is not a function at vuex.esm.js:422:1跳转不了路由的问题
解决vue引发的报错-sub is not a function at vuex.esm.js:422:1跳转不了路由的问题
161 0
|
JavaScript 前端开发
javascript函数:function() {}()的实战案例理解
javascript函数:function() {}()的实战案例理解
59 0
|
JavaScript
JS(第七课)认识function函数(二)
JS(第七课)认识function函数(二)
65 0
|
JavaScript 前端开发 C#
JavaScript function函数种类
原文:JavaScript function函数种类 本篇主要介绍普通函数、匿名函数、闭包函数 1.普通函数介绍 1.1 示例 function ShowName(name) { alert(name); } 1.2 Js中同名函数的覆盖 在Js中函数是没有重载,定义相同函数名、不同参数签名的函数,后面的函数会覆盖前面的函数。
944 0
下一篇
无影云桌面