构造函数之后 class 内的此范围

Question

class User{
    constructor(username,email){
        this.username= username,
        this.email = email,
        this.score = 0
    }
    a = [this.email]  // showing undefined 
    login(){
        console.log(`you have logged in ${this.username}`);
        return this;
    }
    logout(){
        console.log(`you have logout ${this.username}`);
        return this;
    }
    incScore() {
        this.score +=1;
        console.log(`The ${this.username} have scored ${this.score}`)
        return this;
    }


}

const userOne = new User('mdvenkatesh','mdv@gmail.com');
console.log(userOne)

// but check it here 


class User{
    constructor(username,email){
        this.username= username,
        this.email = email,
        this.score = 0
    }
    a = [this]  // showing the complete user data  
    login(){
        console.log(`you have logged in ${this.username}`);
        return this;
    }
    logout(){
        console.log(`you have logout ${this.username}`);
        return this;
    }
    incScore() {
        this.score +=1;
        console.log(`The ${this.username} have scored ${this.score}`)
        return this;
    }


}

在我的 class 之后，我声明了一个数组 a 并使用 this 关键字进行了初始化 o/p

a: Array(1)
0: User {a: Array(1), username: "mdvenkatesh", email: "mdv@gmail.com", score: 0}
length: 1
__proto__: Array(0)
email: "mdv@gmail.com"
score: 0

username: "mdvenkatesh"

但是当我尝试使用 user.name 时它显示未定义 o/p 在

之后

User {a: Array(1), username: "mdvenkatesh", email: "mdv@gmail.com", score: 0}
a: [undefined]
email: "mdv@gmail.com"
score: 0
username: "mdvenkatesh"
__proto__: Object

我无法理解为什么你可能会想为什么甚至应该使用一个可变的外部方法我想知道这里是如何对待 a 我认为它是 class 的财产（如果我错了请纠正我）

2) 为什么 this.username 在用户显示数据时显示未定义请帮助我知道

Answer 1

当您执行 a = [ this.username ] 时，username 是一个字符串，因此它通过值传递。

当您执行 a = [ this ] 时，this 作为一个对象是通过引用传递的。因此，对 this 所做的任何更改都将反映在 a.

中

here i am thinking it is property of the class

你的假设是正确的。但是属性在编译时初始化并在构造函数中更新。这种方式用于设置默认值/静态值。

如果您希望属性获得属性的值，请使用 getter 函数。

以上各点说明如下：

我创建了一个名为 userName 的 getter 函数，该函数具有 returns 必要的值。
我也将 this.scope = 0 移到了构造函数之外，因为这是默认值。

class User {
  score = 0;
  constructor(username, email) {
    this.username = username;
    this.email = email;
  }
  get userName() {
    return this.username;
  }
  login() {
    console.log(`you have logged in ${this.username}`);
    return this;
  }
  logout() {
    console.log(`you have logout ${this.username}`);
    return this;
  }
  incScore() {
    this.score += 1;
    console.log(`The ${this.username} have scored ${this.score}`)
    return this;
  }
}

const user = new User('foo', 'foo@bar.com');
console.log(user.userName)
user.incScore();

参考资料：

Classes - MDN

Answer 2

a = [this]  // you declared this to var a then use a after a = [this] use like below
    login(){
        return console.log(`you have logged in ${a.username}`);
    }
and try user.username 
User {a: Array(1), username: "mdvenkatesh", email: "mdv@gmail.com", score: 0}
user.name not find

请检查下面的例子link https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes

构造函数之后 class 内的此范围

this scope inside the class after the constructor

javascript

oop

this

参考资料：