函数柯里化-阿里云开发者社区

实现apply、call、bind

实现apply、call、bind函数

注意：我们的实现是练习函数、this、调用关系，不会过度考虑一些边界情况

call函数的手写实现

给函数上面添加一个叫做hycall方法的方式：

只能给某个函数添加方法

foo.hycall = function(){}

给所有的函数添加一个hycall的方法

Funtion.prototype.hycall = function(){}

Function.prototype.hycall = function(){
    console.log("原型链调用了");
}
function foo(){
    console.log("foo函数调用了");
}
foo.hycall()//原型链调用了
----------------------------------------------------------
//我们在执行foo.hycall的时候会发现只执行了hycall函数，但是却把原本foo函数自带的信息给掩盖掉了，这肯定是不合理的，我们是要在原有的基础上进行调用，而不是另起大厦

改良写法

//差的写法，缺乏复用性
Function.prototype.hycall = function(){
    console.log("原型链调用了");
    foo()
}
function foo(){
    console.log("foo函数调用了");
}
foo.hycall()
//好的写法，可以多次复用
//本身我们在进行调用的时候，就相当于已经是隐式绑定了，foo.hycall()的时候，this的绑定就已经绑到foo上面了
Function.prototype.hycall = function(){
    console.log("原型链调用了");
    var fn = this
    fn()
}
function foo(){
    console.log("foo函数调用了");
}
foo.hycall()

怎么实现给函数传递参数

我们往call函数内传递参数，会在调用的this中打印出来，但是在我们自己手写的函数里面，打印出来的却是windows，如何解决这个问题？

Function.prototype.hycall = function(thisArg){
    var fn = this
    //调用需要被执行的函数
    thisArg.fn = fn
    thisArg.fn()
    //等函数执行完之后删掉这个属性
    delete thisArg.fn
}
function foo(){
    console.log(this);
}
foo.hycall({name:"小余",age:"20"})//{ name: '小余', age: '20', fn: [Function: foo] }

此时手写的函数已经可以传递参数了，但能传递的仅仅是对象，如果传递数字会报错，接下来我们就解决这个问题

//使用call函数传递数字参数的话
foo.call(123)//[Number: 123]

//对thisArg转成对象类型(防止传入非对象类型报错)
thisArg = thisArg ? Object(thisArg) : window

call除了第一个参数是用来改变this绑定的，后面还可以绑定一堆参数，这个放到我们自己实现要怎么去做呢？在之前是可以使用argument，现在ES6中有更好的解决方法了

ES6中的剩余参数

对于接收多少个参数我们是不确定的，那这个时候，我们形参的部分就不能够写死了，不然是写不尽写不完的，你也不能够100%猜到用户想输入几个参数

function sum(...args){
    //打印出来的args是数组形式 
    console.log(args)
    //展开运算符spread
    console.log(...args)//得到的直接是数值
}

很显然通过ES6中的...的方式来解决，接着进到最后的一步，返回结果

Function.prototype.hycall = function(thisArg,...args){
    // console.log("传递参数进来了噢",this);
    var fn = this
    //对thisArg转成对象类型(防止传入非对象类型报错)
    thisArg = thisArg ? Object(thisArg) : window
    //调用需要被执行的函数
    thisArg.fn = fn
    var result = thisArg.fn(...args)
    //等函数执行完之后删掉这个属性
    delete thisArg.fn
  //返回结果
    return result
}
function foo(){
    console.log(this);
}
foo.hycall(123,6,66,666,6666)
//==========================================>换个函数执行一下
function foo(num1,num2,num3){
    console.log("foo的this指向是",this,"三数相加的结果=",num1+num2+num3);
}
foo.mycall("小余",500,20,1)
//foo的this指向是 String {'小余', fn: ƒ} 三数相加的结果= 521

apply函数的手写实现

//自己实现hyapply
Function.prototype.myapply = function(thisArgs,argArray){//区别在于这里不需要ES6的...运算，因为传入的是一整个数组
    var fn = this
    thisArgs = thisArgs ? Object(thisArgs) : window
    thisArgs.fn = fn
    var arr = thisArgs.fn(...argArray)//但是数组需要解构出来
    delete thisArgs.fn
    return arr
}
function sum(num1,num2){
    console.log("sum被调用",this,num1,num2);
}
var result = sum.myapply("小余",[200,30])
console.log(result,'老铁666');

在call函数的基础上进行小范围修改，貌似已经满足了apply函数的要求了，但是当我们除了第一个用于this指定之外，其他参数我们不传就会出现问题了

因为当我们不传递参数的时候，argArray就会是undefined，我们在解构的时候就会变成...undefined了，对underfunded进行扩展是错误的
这个时候我们就可以进行一个判断来解决这个问题
那为什么在call函数的手写的时候没有遇到这个问题呢？因为我们在call函数中的形参是...args，那这东西的格式就是个数组，你什么都不传都默认是空数组[]

Function.prototype.myapply = function(thisArgs,argArray){
    var fn = this
    thisArgs = thisArgs ? Object(thisArgs) : window
    thisArgs.fn = fn
  argArray = argArray || []//不止这种写法，也可以使用三元运算符
    var arr = thisArgs.fn(...argArray)
    delete thisArgs.fn
    return arr
}
function sum(num1,num2,num3){
    console.log("sum被调用",this,num1,num2+num3);
}
var result = sum.myapply("小余")
console.log(result,'老铁666');

手写call和apply的补充

在我们改变this指向的时候，输入0的时候，会指向window，这是由于我们三元运算符那些的写法导致的，也有其他情况可以避免，这样是对边界效应的一种延伸考虑

thisArg = (thisArg !== undefined && thisArg !== null) ? Object(thisArg) : window

bind函数的手写实现

首先我们来看看JS中bind传参数的3种方式，第一种传值方式跟call的方式很像，从第二种跟第三种开始，跟其他两个函数(call、apply)发生了不一样的变化，我们来看看他们是怎么实现的吧

//方式1：在bind中传值
function foo(num1,num2,num3,num4){
    console.log(this,num1,num2,num3,num4);
}
var bar = foo.bind('小余',10,20,30,40)
bar()
//方式2：在接收bind的bar中传值
function foo(num1,num2,num3,num4){
    console.log(this,num1,num2,num3,num4);
}
var bar = foo.bind('小余')
bar(10,20,30,40)
//方式3：方式1跟方式2的结合，从方式1到方式2中按顺序传递
function foo(num1,num2,num3,num4){
    console.log(this,num1,num2,num3,num4);
}
var bar = foo.bind('小余',10,20)
bar(30,40)
//以上三种方式的答案都是：String {'小余'} 10 20 30 40

我们是有变量接收值的，就像上方的bar来接收，对于这种情况就需要在手写的函数中最后进行一个return返回

Function.prototype.mybind = function(thisArg,...argArray){
    function proxyFn(){
    }
    return proxyFn
}

首先我们揭秘第二种方式是怎么做到的，也就是得到了值还能继续往里面传值，那是因为我们手写bind函数返回的还是一个函数，而里面这个函数是可以接收值的，所有自然就造成这种情况了，第三种则是手写bind函数跟bind函数内部的函数都可以接收值，然后再做一个拼接就完成了

Function.prototype.mybind = function(thisArg,...argArray){
    //1.获取真实要调取的函数
    var fn = this
    //对特殊情况的处理
    thisArg = (thisArg !== undefined && thisArg !== null) ? Object(thisArg) : window
    function proxyFn(...args){
        //将函数放到thisArg中进行调用
        thisArg.fn = fn
        //对传入的两个参数进行合并
        var finalArgs = [...argArray,...args]
        var result = thisArg.fn(finalArgs)
        delete thisArg.fn
        //返回结果
        return result
    }
    return proxyFn
}
function foo(num1,num2,num3,num4){
    console.log(this,num1,num2,num3,num4);
}
var bar = foo.bind('小余',10,20)
bar(30,80)

认识arguments

argument是一个对应于 传递给函数的参数 的 类数组(array-like)对象

类数组对象什么意思？就是长得像数组，但实际上是个对象
我们在实参传递的个数如果超过形参的数量的话，多余的不是丢弃掉，而是跟着前面其他几个参数一起放到argument中了

array-like意味着它不是一个数组类型，而是一个对象类型：

但是它却拥有数组的一些特性，比如说length，比如说可以通过index索引来访问
但是它却没有数组的一些方法，比如forEach、map等等

//argument的基础使用
function foo(num1,num2,num3){
    // console.log(arguments);
    //常见对argument的3个操作
    //1.获取参数长度
    console.log(arguments.length);
    //2。根据索引值获取某一个参数，像数组一样的操作
    console.log(arguments[1]);
    //3.callee属性，获取argument中所在的函数
    console.log(arguments.callee);
}   
foo(10,20,30,40,50)

argument转数组

function foo(num1,num2,num3,num4){
    //1.自己遍历
    var newArr = []
    for(var i = 0;i < arguments.length;i++){
        newArr.push(arguments[i] *40)
    }
    console.log(newArr);
    //2.arguments转成array数组类型
    //2.1自己遍历arguments中所有的元素
    //2.2 使用slice
    var newArr2 = Array.prototype.slice.call(arguments)
    console.log(newArr2,"这是newArr2");
    //这里其实跟2.2是一样的，this显示绑定arguments大于隐式绑定
    var newArr3 = [].slice.call(arguments)
    console.log(newArr3)
    //2.3 ES6的语法
    var newArr4 = Array.from(arguments)
    console.log(newArr4)
    //展开运算符
    var newArr5 = [...arguments]
    console.log(newArr5)
}
foo(1,2,3,4)

数组里的slice实现

//补充：在原型链上加函数的方法，我们确实可以在每个函数上面都调用，但是当我们想要调用这个函数的方法本身的时候，就略显麻烦
Function.prototype.aaa = function(){
    //xxxx
}
Function.prototype.aaa()//这样调用

//自己简单实现的slice
Array.prototype.hyslice = function(start,end){//这里可以进行优化，看用户是否有传递进来这两个参数，没有的话我们就做一个判断处理
    var arr = this
    start = start || 0
    end = end || arr.length
    var newArray = []
    for(var i = start;i < end ;i++){
        newArray.push(arr[i])//就将this里的东西给填入进去，而this已经被我们手动改成我们想要的指向了
    }
    return newArray
}
var newArray = Array.prototype.hyslice.call(["小余","大余","超大余"],1,3)//相当于使用call来调用slice，我们上方函数里的this指向就被改变到我们手写的这个数组内容上了
console.log(newArray);

箭头函数-无arguments

我们在箭头函数中是没有arguments的，如果你需要的话，js会去上层作用域里面找

向下方这个，arguments到上层作用域，也就是全局作用域中寻找，这全局作用域是分两种情况的，在node中是有的，在浏览器中则是没有(显示你没有定义)

var name = "小余"
var foo = ()=>{
    console.log(name)
    console.log(arguments);
}
foo()

案例

在ES6中用...剩余函数来替代arguments，用来接收所有参数，形成数组

function foo(){
    var bar = ()=>{
        console.log(arguments);//打印出来的就是上层foo的arguments
    }
    return bar
}
var fn = foo(123)
fn()

函数柯里化

实现apply、call、bind

call函数的手写实现

怎么实现给函数传递参数

ES6中的剩余参数

apply函数的手写实现

手写call和apply的补充

bind函数的手写实现

认识arguments

argument转数组

数组里的slice实现

箭头函数-无arguments

热门文章

最新文章

相关电子书

相关实验场景

热门

活动广场

任务中心

开发者评测

高校计划

乘风者计划

训练营

阿里云MVP

话题

直播

下载

镜像站

技术资料

插件

函数柯里化

实现apply、call、bind

call函数的手写实现

怎么实现给函数传递参数

ES6中的剩余参数

apply函数的手写实现

手写call和apply的补充

bind函数的手写实现

认识arguments

argument转数组

数组里的slice实现

箭头函数-无arguments

热门文章

最新文章

相关电子书

相关实验场景