js 中 call() apply() bind() 的用法

先看明白下边的例子

var name = '小王'
var age = 17
var obj = {
    name: '小张',
    objAge: this.age,
    myFun: function () {
        console.log(`${this.name}年龄${this.age}`)
    }
}

console.log(obj.objAge) // 17
obj.myFun() // 小张年龄 undefined

var fav = '盲僧'
function shows () {
    console.log(this.fav)
}
shows() // 盲僧

/*
比较上边两个 this 的区别
第一个打印里边的 this 指向 obj
第二个全局声明的 shows() 函数 this 指向的是 window
*/

call() apply() bind() 都是用来定义 this 这个对象的

var name = '小王'
var age = 17
var obj = {
    name: '小张',
    objAge: this.age,
    myFun: function () {
        console.log(`${this.name}年龄${this.age}`)
    }
}
var db = {
    name: '德玛',
    age: 99
}

obj.myFun.call(db) // 德玛年龄99
obj.myFun.apply(db) // 德玛年龄99
obj.myFun.bind(db)() // 德玛年龄99

/*
以上除了 bind() 后边多个 (), 结果返回都一致
由此得出结论, bind() 返回的是一个新的函数, 你必须调用它才会被执行
*/

对比call() bind() apply() 传参情况

var name = '小王'
var age = 17
var obj = {
    name: '小张',
    objAge: this.age,
    myFun: function (fm, t) {
        console.log(`${this.name}年龄${this.age}, 来自${fm}去往${t}`)
    }
}
var db = {
    name: '德玛',
    age: 99
}

obj.myFun.call(db,'成都','上海') // 德玛 年龄 99  来自 成都去往上海
obj.myFun.apply(db,['成都','上海']) // 德玛 年龄 99  来自 成都去往上海  
obj.myFun.bind(db,'成都','上海')() // 德玛 年龄 99  来自 成都去往上海
obj.myFun.bind(db,['成都','上海'])() // 德玛 年龄 99  来自 成都, 上海去往 undefined

/*
微妙的差距！
从上面四个结果不难看出:
call 、bind 、 apply 这三个函数的第一个参数都是 this 的指向对象，第二个参数差别就来了：
call 的参数是直接放进去的，第二第三第 n 个参数全都用逗号分隔，直接放到后面 obj.myFun.call(db,'成都', ... ,'string' )。
apply 的所有参数都必须放在一个数组里面传进去 obj.myFun.apply(db,['成都', ..., 'string' ])。
bind 除了返回是函数以外，它 的参数和 call 一样。
当然，三者的参数不限定是 string 类型，允许是各种类型，包括函数 、 object 等等！
*/