js系列——call、apply、bind的用法区别

一、上下文、作用域

在js中，代码块是有上下文和作用域的概念的，我们看一个简单的例子：

            var name = 'lili', age = 20
			var obj = {
				name: 'allen',
				objAge: this.age,
				show: function () {
					console.log('姓名：', this.name, '年龄：', this.age)
				}
			}
			console.log(obj.objAge) //20
			obj.show() //姓名： allen 年龄： undefined

上面例子：第一行打印20，首先我们需要明白objAge中的this.age的this指的是谁，this指向有一句话：谁调用就指向谁，很显然，要取得obj中的属性，必须是全局去调用obj的属性，即window，所以this指向的是全局，即打印年龄20

第二行：函数中的this,name和this.age又是指向谁，很显然show函数是obj中的一个函数，要执行，必须由obj去调用，所以this指向的obj这个对象的上下文，所以打印名字：allen，年龄：undefined，因为obj中没有age属性

二、call、apply、bind

call、apply、bind的作用就是来改变这个this的指向的，如下：

            var name = 'lili', age = 20
			var obj = {
				name: 'allen',
				objAge: this.age,
				show: function () {
					console.log('姓名：', this.name, '年龄：', this.age)
				}
			}
			console.log(obj.objAge) //20
			obj.show() //姓名： allen 年龄： undefined
			var obj2 = {
				name: '小明',
				age:15
			}
			obj.show.call(obj2) //姓名： 小明 年龄： 15
			obj.show.apply(obj2) //姓名： 小明 年龄： 15
			obj.show.bind(obj2)() //姓名： 小明 年龄： 15

传参区别：

            obj.show.call(obj2, '2006年', '长沙') //姓名： 小明 年龄： 15
			obj.show.apply(obj2, ['2006年', '长沙']) //姓名： 小明 年龄： 15
			obj.show.bind(obj2, ['2006年', '长沙'], '南京')() //姓名： 小明 年龄： 15 (2) ["2006年", "长沙"] 出生在： 南京

call：第一个参数是绑定的对象，其余参数用逗号隔开，可以是各种类型参数

apply：第一个参数是绑定的对象，其余参数都放在一个数组之中

bind：第一个参数是绑定的对象，其余参数都是用逗号隔开，可以是各种类型参数，但是bind返回的是一个函数，需要加上()调用让他执行