一、上下文、作用域
在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返回的是一个函数,需要加上()调用让他执行