一、apply()方法和call()方法的异同点：
- 相同点：
- apply和call都可以改变this的指向
- 方法的功能是一样的
- 不同点：
- 参数传递的方式是不一样的，即第二个参数是不一样的，apply()只能传两个参数，且第二个参数以数组形式传递，call()方法可以传入多个参数
下面各自介绍：
- apply()方法
1.使用语法：
函数名字.apply(对象,[参数1,参数2,...]) FunctionName.apply(Obj, [para1, para2, ...])方法名字.apply(对象,[参数1,参数2,...]) ObjectName.apply(Obj, [para1, para2, ...])
2.使用案例：
function f1(x, y) { console.log((x + y) + ":===>" + this); } var r1 = f1.apply(null, [1, 2]); //此时f1中的this是window console.log(r1); // 3:===>[object Window]
console.log("==============================");
//改变this的指向 var obj = { sex: "男" }; //本来f1函数是window对象的,但是传入obj之后,f1函数此时就是obj对象的 var r2 = f1.apply(obj, [1, 2]); //此时f1中的this是obj console.log(r2); // 3:===>[object Object]
console.log("==============================");
function Person(age) {
this.age = age;
}
Person.prototype.sayHi = function (x, y) {
console.log((x + y) + ":====>" + this.age);
};
function Student(age) {
this.age = age;
}
var per = new Person(10); //实例对象
var stu = new Student(100); //实例对象
//sayHi方法是per实例对象的
per.sayHi.apply(stu, [10, 20]); // 30:====>100
- call()方法
1.使用语法：
函数名字.call(对象,参数1,参数2,...) FunctionName.call(Obj, para1, para2, ...)
方法名字.call(对象,参数1,参数2,...) ObjectName.call(Obj, para1, para2, ...)
2.使用案例：
function f1(x, y) { console.log((x + y) + ":===>" + this); } var r1 = f1.call(null, 1, 2); //此时f1中的this是window console.log(r1); // 3:===>[object Window] console.log("=============================="); //改变this的指向 var obj = { sex: "男" }; //本来f1函数是window对象的,但是传入obj之后,f1函数此时就是obj对象的 var r2 = f1.call(obj, 1, 2); //此时f1中的this是obj console.log(r2); // 3:===>[object Object] console.log("=============================="); function Person(age) { this.age = age; } Person.prototype.sayHi = function (x, y) { console.log((x + y) + ":====>" + this.age); }; function Student(age) { this.age = age; } var per = new Person(10); //实例对象 var stu = new Student(100); //实例对象 //sayHi方法是per实例对象的 per.sayHi.call(stu, 10, 20); // 30:====>100
二、bind()方法
bind()方法是复制的作用，同时bind()方法也可以改变this指向，需注意的是：
bind()方法返回的是一个函数
1.使用语法：
函数名字.bind(对象,参数1,参数2,...) FunctionName.bind(Obj, para1, para2, ...)
方法名字.bind(对象,参数1,参数2,...) ObjectName.bind(Obj, para1, para2, ...)
2.使用案例：
function f1(x, y) { console.log((x + y) + ":=====>" + this.age); } var ff1 = f1.bind(null); ff1(10, 20); // 30:=====>undefined // 复制了一份的时候,把参数传入到了f1函数中,x=10,y=20,null就是this,默认就是window
console.log("=========================="); function Person(age) { this.age = 1000; } Person.prototype.eat = function () { console.log("吃美食"); }; var per = new Person(); var ff2 = f1.bind(per, 10, 20); ff2(); // 30:=====>1000 console.log("=========================="); function Teacher(age) { this.age = age; } Teacher.prototype.play = function () { console.log(this + "====>" + this.age); }; function Student(age) { this.age = age; } var per = new Teacher(10); var stu = new Student(20); //复制了一份 var ff3 = per.play.bind(stu); ff3(); //[object Object]====>20