apply、call、bind的区别

在还没学习apply、call、bind之前，我们在构造函数中想要改变this的指向是通过

构造函数.prototype = new 构造函数()来做到的，那么，有没有什么比较便捷的方法吗，下面我们就一起来学习一下apply、call、bind的用法

	function Persons(age) {
		this.age = age;
	};
	Persons.prototype.sayhai = function(x, y) {
		console.log((x + y) + '-------' + this.age);
	}

	function Func(age) {
		this.age = age;
	}
	var p1 = new Persons(10);
	p1.sayhai(10,50);  // 输出60-------10
	var p2 = new Func(100);
	p1.sayhai.apply(p2, [10, 20]); // 输出30-------100

可以看到，p1.sayhai(10,50); // 输出60-------10 ，说明这时Persons.prototype.sayhai 里的this指向的是构造函数Persons()，而不是window，而p1.sayhai.apply(p2, [10, 20]); // 输出30-------100 说明这个时候 Persons.prototype.sayhai里面的this 指向不是构造函数Persons()，指向的是构造函数Func()，这就完成了我们想要改变this指向的目的

再来看看call 和bind

	function Persons(age) {
		this.age = age;
	};
	Persons.prototype.sayhai = function(x, y) {
		console.log((x + y) + '-------' + this.age);
	}

	function Func(age) {
		this.age = age;
	}
	var p1 = new Persons(10);
	p1.sayhai(10,50);  // 输出60-------10
	var p2 = new Func(100); 
	p1.sayhai.call(p2, 10, 20);// 输出30-------100

	function Persons(age) {
		this.age = age;
	};
	Persons.prototype.sayhai = function(x, y) {
		console.log((x + y) + '-------' + this.age);
	}

	function Func(age) {
		this.age = age;
	}
	var p1 = new Persons(10);
	p1.sayhai(10,50);  // 输出60-------10
	var p2 = new Func(100); 
	var ff = p1.sayhai.bind(p2,10,20);//bind 复制一份并返回，返回的是一个函数
	ff();//  调用这个返回的函数
	// 下面这种写法等同于上面这种写法
	var ff = p1.sayhai.bind(p2);
	ff(10,20);

由此可见，他们三者的作用都是相近的，都是用来改变this的指向的，好啦，下面进入我们的总结时间

1. apply、call、bind的相同点

   • 都能改变this的指向
   • 都能传递参数
   • 都能通过方法"."方法名调用

2. apply、call、bind的不同点

   • 函数名不同
   • 参数传递方式不同（注意看第一个apply）
   • 改变this指向的时机不同(bind在复制时改变，其他两个在调用时改变)
   • 参数传递时机不同（注意看第三个）

好啦，这次的学习到这就结束啦👏👏，拜拜咯~🏀