JS apply() call() bind()方法的使用

一、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