js对象的属性为什么不能用this调用另一属性?
这个问题好像很多人都会犯,说来还是对this了解不够透彻,现在就来记录一下这个问题。
首先要记住一句话:JS只有全局作用域和函数局部作用域,不存在想当然的对象作用域...
简单来说,这是作用域的问题,b
属性里的this其实是指向了父级作用域,这里是window,而window中我们并没有定义a这个变量, c属性中的this指向了obj ,这是因为对象本身无法创建作用域,而函数(方法)却可以创建一个局部作用域。
1. 接下来我们首先给window中增加a,结果如下
var a = 5
obj = {
a: 123,
b: this.a,
c: function () {
return this.a;
}
};
console.log(obj.b); // 5
console.log(obj.c()); // 123
2. 如果实在在b中想得到a那就要和c采取一样的写法
obj = {
a: 123,
b: function () {
return this.a;
},
c: function () {
return this.a;
}
};
console.log(obj.b()); // 123
console.log(obj.c()); // 123
3. 接下来我们再把b的this 改成obj试试
obj = {
a: 123,
b: obj.a,
};
console.log(obj.b);
果不其然,报错 。
4. 再然后我们把c的this改成obj
obj = {
a: 123,
c: function () {
return obj.a;
}
};
console.log(obj.c()); // 123
意料之内,可以正常输出。
5. 最后我们将方法采用箭头函数的写法,已知,箭头函数没有自己的this 会继承父级作用域也就是window
obj = {
a: 123,
c: ()=>{
return this.a
}
};
console.log(obj.c()); // undefined
小结:
1. 全局环境下的对象就跟全局下的函数一样,this指向window
2. 当作为对象方法调用时,this指向调用该方法的对象
3. 箭头函数没有自己的this,仍然相当于一个全局的对象,也就仍然指向window
暂无评论...