js中call, apply, bind的理解与应用

call,apply,bind的总结

相同点:
都可以改变函数内部的this指向
区别点:

1. call和apply会调用函数，并且改变函数内部this指向
2. call和apply传递的参数不一样，call传递参数aru1,aru2…形式，apply必须数组形式[args]
3. bind不会调用函数，可以改变函数内部this指向

主要应用场景

1. call经常做继承
2. apply经常跟数组有关系，比如借助于数学对象实改变定时器现数组最大与最小值
3. bind不调用函数，但是还想改变提升指向，比如 改变定时器内部的this指向

call()的应用

var o = {
			uname: 'andy'
		}
		function fn(a, b) {
			console.log(this);
			console.log(a + b);
		}
		fn.call(o, 1, 4);
		// call第一个作用可以调用函数,第二个可以改变this的指向
		// call的主要作用可以实现继承
		function Father(uname, age, sex) {
			this.uname = uname;
			this.age = age;
			this.sex = sex;
		}
		function Son(uname, age, sex) {
			Father.call(this, uname, age, sex);
			// console.log(this);
		}
		var ldh = new Son('刘德华', 18, '男');
		console.log(ldh);

apply()应用

	var O = {
			uname: 'andy'
		}
		function fn(arr) {
			console.log(this);
			console.log(arr);
		}
		var arr = ['blue', 'pink' ]
		fn.apply(O, arr);
		// 1.apply 第一个可以调用函数,第二个可以改变this的值
		 // 2.他的参数必须是数组(伪数组)
		 // 求数组的最大值的应用
		 var arr = [1, 8, 55, 88,23];
		 var max = Math.max.apply(Math, arr);
		 console.log(max);
		 // 把一个数组追加到另一个数组上
		 var arr = ['a', 'b'];
		 var arr1 = [1, 2, 3];
		 arr.push.apply(arr, arr1);
		 console.log(arr);

bind()应用

var o = {
			uname: 'andy'
		}
		function fn() {
			console.log(this);
		}
		var f = fn.bind(o);
		f();
		// 1.bind不能调用原函数但能改变原函数this的指向
		// 2.返回的是改变this之后的新函数
		// 如果有函数不需要立即调用,但需要改变this,此时可使用bind(),
		// 有一个按钮点击之后就禁用,3秒之后开启
		var btn = document.querySelector('button');
		btn.onclick = function() {
			var that = this;
			this.disabled = true;
			setTimeout(function() {
				that.disabled = false;	
			// 定时器的this指向的是window
			}, 3000)
		}
		var btn = document.querySelector('button');
		btn.onclick = function() {
			this.disabled = true;
			setTimeout(function() {
				this.disabled = false;			// 定时器的this指向的是window
			}.bind(this), 3000)					//这个this指向btn;
		}