几个小例子深刻理解call bind apply

在js中call bind apply 是Function对象自带的三个方法，这三个方法主要作用是改变函数中this指向。

案例1.不使用call bind apply
var name = 'window', age = '1岁';
    var person = {
        name: '小王',
        personAge : this.age,
        myPrint: function(){
            console.log(this.name + '年龄:' + this.age);
        },
        myPrint2: function(sex, school){
            console.log(this.name+'年龄'+this.age+'性别'+sex+'学校'+school)
        }
    }
console.log(person.personAge);  // 1岁     this指向person
person.myPrint();  // 小王年龄：undefined   this指向person

1. call() apply() bind()重新定义this这个对象，也就是改变this

案例2. 使用call apply bind改变this
var name = 'window', age = '1岁';
    var person = {
        name: '小王',
        personAge : this.age,
        myPrint: function(){
            console.log(this.name + '年龄:' + this.age);
        },
        myPrint2: function(sex, school){
            console.log(this.name+'年龄'+this.age+'性别'+sex+'学校'+school)
        }
    }
    var changeThis = {
        name: '小张',
        age: '2岁'
    }
    person.myPrint.call(changeThis); //小张年龄：2岁
    person.myPrint.apply(changeThis);//小张年龄：2岁
    person.myPrint.bind(changeThis)();//小张年龄：2岁

• 通过以上发现 bind返回的事一个新函数，必须调用它才会被执行，其他的操作完全一致

2.call() apply() bind() 传递参数

var person = {
        name: '小王',
        personAge : this.age,
        myPrint: function(){
            console.log(this.name + '年龄:' + this.age);
        },
        myPrint2: function(sex, school){
            console.log(this.name+'年龄'+this.age+'性别'+sex+'学校'+school)
        }
    }
var changeThis = {
    name: '小张',
    age: '2岁'
}
person.myPrint2.call(changeThis,'男','幼儿园') //小张年龄2岁性别男学校幼儿园
person.myPrint2.apply(changeThis,['男','幼儿园']) //小张年龄2岁性别男学校幼儿园
person.myPrint2.bind(changeThis,'男','幼儿园')() //小张年龄2岁性别男学校幼儿园

• call apply bind这三个函数的第一参数都是this的指向对象，重点在于第二个及后面的参数的区别
• call的参数是直接放进去的，第二个及后面的参数用逗号分隔
• apply除第一个参数外的所有参数需要放到一个数组中传进去
• bind的参数传递方式和call完全一致，都是直接放进去，第二个及后面的参数用逗号分隔