两分钟带你读懂JavaScript中call,apply,bind区别(多一分钟算我输)

//window
var name,age,love;
function Create(name,age,love){
    this.name=name
    this.age=age
    this.love=love
}
Create('王二牛','18岁','唱歌')          //调用函数Creat
console.log(name,age,love);         //输出结果  王二牛 18岁 唱歌
// 首先,call函数的定义是什么?
// 它可以用来调用所以者对象作为参数的方法.通过call(),能够使用属于另一个对象的方法.
// 首先,在windows中定义了name age love 三个变量,当执行create()函数时 函数内部的this毫无疑问指向windows
// 因为他没有具体的指向调用者是谁,所以只能是windows对象 其实此处调用相当于下面的写法
Create.call(window,'王二牛','18岁','唱歌')      //编译器默认加上了call,并且指向window
// 然后,我们使用call(),apply()函数改造一段改变this指向的代码,注意第一个参数此刻不是window对象,而是person对象
// 所以,this不再指向window

// call
var name,age,love;
var Person ={}          //创建对象
function Create(name,age,love){
    this.name = name
    this.age = age
    this.love = love
}
Create.call(Person,'王二牛','18岁','唱歌')      //第一个参数指向person对象
console.log(Person);            //输出结果      {name:'王二牛',age:'18岁','唱歌'}
// 语法:call(),apply()函数的第一个参数都是指向this的指向,也就是调用者.第二个参数以及最后的所以参数都是create函数的实参
// 区别:call第二个以及之后的若干个参数可以是string function,Array,Object等,并且可以是有多个参数
// apply()只可以有两个参数,并且实参只能以数组类型传递到调用函数的内部,这也是两者唯一的区别

// bind()
定义:将函数绑定到某一个特定的对象内,调用者的this指向的值会被绑定到传入bind的第一个参数的值
例如:f.bind(obj),实际上可以理解为obj.f()

// bind
var name = "张三疯",age =88;
var obj = {
    name = '杨过',
    age:18,
    sex:'男',
    fun :function(){
        console.log(this.name +"今年"+this.age+"岁"+"性别:"+this.sex);
    }
}
var Girl = {
    name:"小龙女",
    age:16,
    sex:"女"
}
obj.fun()           //输出结果 杨过 今年18岁,性别:男
obj.fun,bind(window)()          //输出结果      张三疯 今年88岁 性别:undedined
obj.fun.bind(Girl)()        //输出结果  小龙女 今年16岁,性别:女

// 上述代码,直接调用obj.fun()函数,内部的this指向了obj自身对象,因为调用者是obj自身.
// 当使用bind函数调用时,bind的第一个参数指向了window对象,也就是改变了this的指向window中只能定义变量name和age,sex未定义
// 所以输出"张三疯 今年88岁,性别undefined"
// 第三次调用改变了this指向为Girl对象,那么她的小龙女上场了
// 注意：bind()除了返回的是函数以外,它的参数和call一样