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);

果不其然,报错 。

js对象的属性为什么不能用this调用另一属性?

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

版权声明:互联网 发表于 2020-11-23 11:53:39。
转载请注明:js对象的属性为什么不能用this调用另一属性? | 前端印记
数据库云大使

暂无评论

暂无评论...