2020-08-18

手动实现 call 和 apply

原生写法

var name = "winiii"

function fn() {
    console.log(this.name)
}
var obj = {
    name: 'obj'
}
fn.call(obj) // obj

手动实现

Function.prototype.myCall = function(obj) {
    obj.fn = this

    // obj 调用完该函数后，删除 fn 属性
    obj.fn()
    delete obj.fn
}

var obj = {
    name: 'obj'
}

function fn() {
    console.log(this.name)
}

fn.myCall(obj) // obj

Function.prototype.myCall = function(obj) {
    obj.fn = this

    var args = []

    for(var i = 1; i < arguments.length; i++) {
        args.push("arguments["+ i +"]")
    }
    // eval 里面的字符串相当于 <script> 里面的
    eval("obj.fn("+ args +")")
    delete obj.fn
}

var obj = {
    name: 'obj'
}

function fn(num1, num2) {
    console.log('fn', this.name) 
    console.log('num1', num1)
    console.log('num2', num2)
}

fn.myCall(obj,2,3) 
// fn obj
// num1 2
// num2 3

Function.prototype.myCall = function(obj) {
    try{
        obj = obj || window
    } catch(e) {
        obj = obj || {}
    }
    obj.fn = this

    var args = []

    for(var i = 1; i < arguments.length; i++) {
        args.push("arguments["+ i +"]")
    }
    // eval 里面的字符串相当于 <script> 里面的
    eval("obj.fn("+ args +")")
    delete obj.fn
}

var obj = {
    name: 'obj'
}

function fn(num1, num2) {
    console.log('fn', this.name) 
    console.log('num1', num1)
    console.log('num2', num2)
}

fn.myCall(obj) 
// fn obj
// num1 undefined
// num2 undefined