#yyds干货盘点# JavaScript之手撕callapply

Posted 战场小包

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了#yyds干货盘点# JavaScript之手撕callapply相关的知识,希望对你有一定的参考价值。

前言

call/apply的核心理念就是借用方法

这话乍一听上去,感觉有点云里雾里。讲一个生活中的实例来描述一下:

老邓和老王是邻居,老邓家有火锅,老王家有烧烤架。老王家很少吃火锅,但突然有一天想吃火锅,他就可以去老邓家借用火锅,这样老王家不仅吃上了火锅,还没花买锅的钱。同样如果有一天老邓家想吃烧烤,也可以去老王家借烧烤架。

call/apply做的便是类似的事,A对象上实现了一个方法,B对象由于一些需求,也需要调用同样的方法,最优的方法肯定是B直接去调用A对象的方法,自身无需扩展。

基本介绍

语法

fn.call(thisArg, arg1, arg2,...)
fn.apply(thisArg, [arg1, arg2,...])

参数

  • thisArg(可选):
    • fn函数的this指向thisArg
    • thisArg传入null,undefined:非严格模式下:fn函数this->window;严格模式:this->undefined
    • 值为原始值(数字,字符串,布尔)时,this指向包装类
  • arg1,arg2(可选): 传给fn的参数
    • apply传递的第二个参数为数组

      作用

      改变this指向

常见用法

判断数据类型

typeof方法只返回七种值:string、number、boolean、undefined、object、function、symbol。使用typeof是无法区分array和普通对象的。

arr = []
typeof(arr)  // "object"
obj = 
typeof(obj)  // "object"

Object.prototype.toString方法可以准确判断所有的类型,Array、String等都重写了该方法,因此就需要借助call/apply来调用Object.ptototype上的方法。

// 通过返回值的不同,就可以区分开对象与数组
Object.prototype.toString.call(arr) // "[object Array]"
Object.prototype.toString.call(obj) // "[object Object]"

类数组调用数组的方法

ES6未发布之前,没有Array.from方法可以将类数组转为数组,需要借助数组的slice方法将类数组转化为数组。

Array.prototype.slice.call(arguments)
[].slice.call(arguments)

当然别的数组方法也可以类似借用,例如push方法:

var arraylike = 
    0: 1,
    length: 1

Array.prototype.push.call(arrlike, 1) // 0: 1, 1: 2, length: 2

apply求数组的最大值与最小值

javascript中没有给数组提供类似maxmin函数,只提供了Math.max/min,用于求多个数的最值,可以借助apply方法,直接传递数组给Math.max/min

const arr = [1,10,11,33,4,52,17]
Math.max.apply(null, arr)
Math.min.apply(null, arr)

手撕call

初步模拟

首先看一个简单例子,分析一下call函数执行过程:

var obj = 
    value: 1

function fun() 
    console.log(this.value)

fun.call(obj) // 1

可见call函数调用执行了两部:

  • call改变了this指向,将this->obj
  • fun函数执行

那该如何模拟上面的效果那?

funthis指向obj,说明func的执行方式为obj.func形式,因此在obj上定义函数fun,再执行obj.fun()即可。

所以call的模拟思想为下面三步:

  • 将函数fn设为thisArg的对象的方法
  • 执行thisArg.fn
  • 删除该函数
Function.prototype.myCall = function (thisArg) 
    // this为调用myCall的函数
    thisArg.func = this;
    thisArg.func();
    delete(thisArg.func);

完善

上面实现了call的初步模拟,还有几个地方有待解决:

  1. 未传入thisArg参数:当未传入thisArg或传入null时,函数的this->window
    thisArg = thisArg || window
  2. 传入arg1,arg2等参数时:ES6可以通过rest参数来实现,ES6以前可以通过遍历arguments来实现

    // ES5
    const args = []
    for (let i = 1; i<arguments.length; i++) 
    args.push(argumens[+ i + ])
    
    eval(thisArg.func( + args +))
  3. 函数可以拥有返回值
    举个例子:
const obj = 
    value: 1

function func(name, age) 
    return 
        name,
        age,
        value: this.value
    

func.call(obj, zcxiaobao, 24)
// 
//     age: 24,
//     name: "zcxiaobao",
//     value: 1,
// 

这很好解决,只需将eval执行之后的结果返回即可。

接着我们来看一下完整版的代码:

Function.prototype.myCall = function (thisArg) 
    thisArg = thisArg || window;
    thisArg.func = this;
    const args = []
    for (let i = 1; i<arguments.length; i++) 
        args.push(arguments[+ i + ])
    
    const result = eval(thisArg.func( + args +))
    delete thisArg.func;
    return result;

使用ES6语法进行模拟代码会简单很多

Function.prototype.myCall = function (thisArg, ...args) 
    thisArg = thisArg || window;
    thisArg.func = this;
    args = args || []
    const result = thisArg.func(..args)
    delete thisArg.func;
    return result;

手撕apply

apply的代码实现与call类似,这不做过多赘述。

Function.prototype.myApply = function (thisArg, arr) 
    thisArg = thisArg || window;
    thisArg.func = this;
    const args = []
    for (let i = 0; i<arr.length; i++) 
        args.push(arr[+ i + ])
    
    const result = eval(thisArg.func( + args +))
    delete thisArg.func;
    return result;

以上是关于#yyds干货盘点# JavaScript之手撕callapply的主要内容,如果未能解决你的问题,请参考以下文章

半小时,阿包带你学会手撕高阶函数 #yyds干货盘点#

#yyds干货盘点#JavaScript 常用类型转换

#yyds干货盘点#JavaScript数值范围

#yyds干货盘点#--30分钟入门JavaScript

#yyds干货盘点#javascript的奇葩问题

#yyds干货盘点#--30分钟上手jQuery