this指向问题
this的行为有时候会显得极其诡异,让人感到困惑,但只需要记住 this的值要等到代码真正执行时才能确定
同时this的值具体有以下几种情况:
- new 调用时指的是被构造的对象
- call、apply调用,指向我们指定的对象
- 对象调用,如执行obj.b(),this指向obj
- 默认的,例如fun(), 指向全局变量window(相当于执行window.fun())
在函数中直接使用
function get(content) {
console.log(content)
}
get('你好')
// 上面是下面的语法糖
get.call(window, '你好')
函数作为对象的方法被调用 (谁调用,指向谁)
var Person = {
name: '张三',
run: function(time){
console.log(`${this.name} 在跑步,最多${time}min就不行了`)
}
}
Person.run(30)
Person.run.call(Person,30)
将函数方法赋值给外部变量
var obj = { a: 1, b: function () { alert(this.a) } };
var fun = obj.b; // 引用赋值
fun();
笔试题
var name = 222
var a = {
name: 111,
say: function() {
console.log(this.name)
}
}
var fun = a.say
fun() // 222
a.say() // 111
var b = {
name: 333,
say: function(fun) {
fun()
}
}
b.say(a.say) // 222
b.say = a.say
b.say() // 333
箭头函数中的this指向问题
- 箭头函数中的this是在定义函数的时候绑定, 而不是在执行函数的时候绑定
- 实际上, 箭头函数根本没有自己的this, 导致内部的this就是外层代码块的this, 所谓的外层代码块, 是指继承自父执行上下文的this
- 正因为它没有this, 所以也就不能作为构造函数
var x = 11
var obj = {
x: 22,
say: () => {
console.log(this.x)
}
}
obj.say() // 11
- 本案例中, 箭头函数与say平级, 也就是箭头函数所在的对象为obj, 而obj的父执行上下文是window
var obj = {
birth: 1990,
getAge: function() {
var b = this.birth
var fn = () => new Date().getFullYear() - this.birth
return fn
}
}
obj.getAge() //
- 例子中箭头函数时在getAge中定义的, getAge的父执行上下文是obj, 因此这里的this指向obj对象
forEach中的this问题
var obj = {
items: [1, 2, 3],
print: function () {
console.log(this); // obj
this.items.forEach(function (item) {
console.log(this); // window
})
}
}
obj.print()