call、apply、bind函数的实现

call函数的实现

// 给所有的函数添加一个hycall的方法
// ...args 剩余参数 => 接收多个参数
Function.prototype.hycall = function(thisArg, ...args) {
  // 在这里可以去执行调用的那个函数(foo)
  // 问题: 需要可以获取到是哪一个函数执行了hycall
  // 1.获取需要被执行的函数 var fn = this;  fn();
  // 在这种情况下，
	// foo.call({})  => this 指向 {}
	// foo.hycall({}) => this 指向 window (fn()独立函数调用) 
  var fn = this

  // 2.对thisArg转成对象类型(防止它传入的是非对象类型)
  thisArg = (thisArg !== null && thisArg !== undefined) ? Object(thisArg): window

  // 3.调用需要被执行的函数 => this 指向 传入的对象
  thisArg.fn = fn // 在thisArg增加fn属性
  // ...args  ... => 展开运算符
  var result = thisArg.fn(...args)  //隐式绑定
  delete thisArg.fn // 删除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(123) // Number{123}
foo.call(undefined) // winodw
var result = sum.call({}, 20, 30)
// console.log("系统调用的结果:", result)

// 自己实现的函数的hycall方法
// 默认进行隐式绑定  foo.hycall()  sum.hycall()
// foo.hycall({name: "why"})
foo.hycall(undefined)
var result = sum.hycall("abc", 20, 30)
console.log("hycall的调用:", result)

// var num = 123
// console.log(Object(num)) => 将数字转成Number类型

扩展：ES6的剩余参数

// rest parameters
function sum(...nums) {
  console.log(nums) // Array
}

sum(10) // 默认将传入的参数放进数组var nums = [10]
sum(10, 20) //var nums = [10,20]
sum(10, 20, 30)
sum(10, 20, 30, 40, 50)

// 展开运算符 spread
var names = ["abc", "cba", "nba"]
// var newNames = [...names]
function foo(name1, name2, name3) {}
foo(...names)

apply函数的实现

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

  // 2.处理绑定的thisArg
  // 第一种：
  // thisArg = thisArg ? object(thisArg): window
  // 第二种：
  thisArg = (thisArg !== null && thisArg !== undefined) ? Object(thisArg): window

  // 3.执行函数
  thisArg.fn = fn
  var result
  // if (!argArray) { // argArray是没有值(没有传参数)
  //   result = thisArg.fn()
  // } else { // 有传参数
  //   result = thisArg.fn(...argArray)
  // }

  // argArray = argArray ? argArray: []
  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)  //不允许一个参数，但可以将一个参数放进数字[20]
// console.log(result)

// 自己实现的调用
// var result = sum.hyapply("abc", [20, 30])
// console.log(result)

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

// var result3 = bar.hyapply("abc") // 只传入了thisArg，默认argArray为undefined

// edge case 边界判断
// bar.hyapply(0) // 0相当于thisArg有值，就不能返回window，所以不写第一种

bind函数的实现

Function.prototype.hybind = 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.hybind("abc")
// var result = bar()
// console.log(result)

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