call-apply-bind函数的实现

JavaScript中call-apply-bind函数的实现

1、call函数的简单实现

call( ) 方法使用一个指定的 this 值和单独给出的一个或多个参数来调用一个函数。

注意：该方法的语法和作用与 apply() 方法类似，只有一个区别，就是 call() 方法接受的是一个参数列表，而 apply() 方法接受的是一个包含多个参数的数组。

这几个函数，主要的实现核心就是this的指向问题，实现的前提要搞懂this的指向问题，接下来就实现自己的mycall方法：

// 在原型上添加mycall的方法
Function.prototype.mycall = function(thisArg,...args){
  // 1.获取需要被执行得函数
  var fn = this
  
  // 2.对thisArg转成对象类型(防止它传入得是非对象类型)
  thisArg = (thisArg !== null && thisArg !== undefined) ? Object(thisArg) : window

  // 3.调用需要被执行得函数
  thisArg.fn = fn
  // 若函数有返回值，需进行返回
  var result = thisArg.fn(...args)
  
  //删除函数，防止在thisArg中多出一个函数，难以理解
  delete thisArg.fn
  // 4.将最终得结果返回出去
  return result
}

function foo(){
  console.log("foo函数被执行",this);
}

function sum(num1,num2){
  console.log("sum函数被执行",this,num1,num2);
  return num1 + num2
}

// 系统的函数call方法
// foo.call(undefined)
foo.call({name:'zs'})
foo.call(undefined)
// var result = sum.call({},20,30)
// console.log("系统调用的结果",result);

// 自己实现额函数mycall方法
// foo.mycall({name:"xs"})
// foo.mycall(undefined)

2、apply函数的实现

apply( )函数和call( )实现类似，只需要处理不同的参数即可

// 实现自己的apply
Function.prototype.myapply = function(thisArg , argArray){
  // 1.获取要执行的函数
  var fn = this

  // 2.处理绑定的thisArg
  thisArg = (thisArg !== null && thisArg !== undefined)? Object(thisArg) : window

  // 3.执行函数
  thisArg.fn = fn
  var result
  
  //获取数组参数
  argArray = argArray || []
 
  result  = thisArg.fn(...argArray)
  delete thisArg.fn

  // 4.返回结果
  return result
}

function sum(num1,num2){
  console.log("sum被调用",this,num1,num2);
  return num1 + num2
}

function foo(num){
  return num
}

function bar(){
  console.log("bar函数被执行",this);
}

// 系统调用
// var  result = sum.apply('abc',[20])
// console.log(result);

// 自己实现调用
var result = sum.myapply('abc',[20])
console.log(result);


var result2 = foo.myapply("abc", [20])
console.log(result2)

// edge case
bar.myapply(0)

3、bind函数的实现

Function.prototype.mybind = function(thisArg,...argArray){
  // 1.获取到真实需要调用的函数
  var fn  = this

  // 2.绑定this
  thisArg = (thisArg !== null && thisArg !== undefined) ? Object(thisArg) : window
  //代理函数
  function proxyFn(...args){
    // 3.将函数放到thisArg中进行调用
    thisArg.fn = fn

    // 特殊：对两个传入的参数进行合并
    var finalArgs = [...argArray,...args]
     
    var result = thisArg.fn(...finalArgs)

    delete thisArg.fn

    // 4.返回结果
    return result 
  }

  return proxyFn
}

function foo(){
  console.log("foo被执行了",this);
  return 20
}

function sum(num1,num2,num3,num4){
  console.log(num1,num2,num3,num4);
}

// 系统的bind使用
var bar = foo.bind("abc")
bar()


// var newSum = sum.bind("aaa", 10, 20, 30, 40)
// newSum()

// var newSum = sum.bind("aaa")
// newSum(10, 20, 30, 40)

// var newSum = sum.bind("aaa", 10)
// newSum(20, 30, 40)


// 使用自己定义的bind
// var bar = foo.mybind("abc")
// var result = bar()
// console.log(result)

var newSum = sum.mybind("abc", 10, 20)
var result = newSum(30, 40)

总结：这几个方法都是改变函数执行时this指向的问题，和我前文说的this指向有很大的关系，如果有迷糊的地方可以看看前文的this指向问题。