call函数的实现

#call函数的实现
前置知识

//ESC剩余参数 rest param
function foo(...args){
    console.log(args) //[10,20,30]
}
foo(10,20,30)

//展开运算符 spread
let nums = [10,20,30]
function sums(num1,num2,num3){
    console.log(num1,num2,num3) //10,20,30
}
sums(...nums)

function foo(){
    console.log('foo被调用了',this)
}
//call和apply bind都能调用函数并且能改变this的指向----显示绑定
//foo.call() 相当于 foo() 独立函数调用 this的指向是window
foo.call() //window
foo.apply() //window
foo.bind() //window

call函数的实现

//第一步 先实现函数的调用
Function.prototype.hycall = function(){
    let fn = this
    fn()
}

function foo(){
    console.log('foo被调用了')
}

function sum(){
    console.log('sum被调用了')
}

foo.hycall()
sum.hycall()

//第二步 系统实现call方法可以改变this的指向
Function.prototype.hycall = function(thisArg){
    let fn = this
    thisArg.function = fn
    thisArg.function()
    delete thisArg.function
}

function foo(){
    console.log('foo被调用了',this)
}

function sum(){
    console.log('sum被调用了',this)
}

foo.hycall({})
sum.hycall({})

//这样能简单的完成改变this的指向
//但是call方法 不仅可以传{} 还可以传'aaa'之类的 那怎么实现呢?

//可以利用Object()来实现
//Object不仅可以传入的参数封装为一个对象 还可以显示 它的数据类型
//比如 Object('aaa') == String {'aaa'}
Function.prototype.hycall = function(thisArg){
    let fn = this
    thisArg = thisArg ? Object(thisArg):window
    thisArg.function = fn
    thisArg.function()
    delete thisArg.function
}

function foo(){
    console.log('foo被调用了',this)
}

function sum(){
    console.log('sum被调用了',this)
}

foo.hycall({})
sum.hycall('aaa')

//第三步 call方法 还可以传入参数之类的
//我们可以利用前面ES6剩余参数和展开运算符来实现
Function.prototype.hycall = function(thisArg,...args){
    let fn = this
    thisArg = Object(thisArg)
    thisArg.function = fn
    thisArg.function(...args)
    delete thisArg.function
}

function foo(){
    console.log('foo被调用了',this)
}

function sum(num1,num2){
    console.log('sum被调用了',this)
}

foo.hycall({})
sum.hycall('aaa',1,2)

//最后一步 call方法可以接收返回值
//而我们现在如果尝试接收的返回值的话是undefined
Function.prototype.hycall = function(thisArg,...args){
    let fn = this
    thisArg = Object(thisArg)
    thisArg.function = fn
    let res = thisArg.function(...args)
    delete thisArg.function
    return res
}

function foo(){
    console.log('foo被调用了',this)
}

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

foo.hycall()
let result = sum.hycall('aaa',1,2)
console.log(result)

//特殊情况 正常传入 null undefiend 应该指向是winodw
//做一些优化
Function.prototype.hycall = function(thisArg,...args){
    let fn = this
    thisArg = (thisArg !== null && thisArg !== undefined)?Object(thisArg):window
    thisArg.function = fn
    let res = thisArg.function(...args)
    delete thisArg.function
    return res
}

function foo(){
    console.log('foo被调用了',this)
}

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

foo.hycall(null)
let result = sum.hycall('aaa',1,2)
console.log(result)