JavaScript构造函数内访问数据失效问题求助

我明白你遇到的问题了——在类的构造函数里定义的Login方法中，没法正常访问你初始化的Username、Password这些实例属性，运行时提示未初始化对吧？这其实是函数中this的指向问题导致的。

问题根源 #

当你用普通函数表达式function()来给this.Login赋值时，这个函数的this绑定是动态的：它的指向取决于函数被调用时的上下文，而不是构造函数里的类实例。如果调用Login时的上下文不对，this就会指向全局对象（非严格模式）或者undefined（严格模式），自然找不到你在构造函数里初始化的那些属性。

两种解决方案，都能让你把Login留在类内 #

方案1：用箭头函数定义Login方法

箭头函数不会创建自己的this，它会“继承”所在上下文（也就是构造函数执行时的this，也就是类的实例）的this值，这样在Login里访问实例属性就不会出问题了：

class dLoginPage {
  constructor() {
    this.Username = Aliases.browser.page_General_Login.formLoginform.textboxUsernameinput;
    this.Password = Aliases.browser.page_General_Login.formLoginform.passwordboxPasswordinput;
    this.SubmitButton = Aliases.browser.page_General_Login.formLoginform.submitbuttonLogin;
    
    // 改用箭头函数
    this.Login = () => {
      this.Username.SetText("admin");
      this.Password.SetText("admin");
      this.SubmitButton.ClickButton();
    }
  }
}

module.exports = dLoginPage;

方案2：把Login定义为类的原型方法（推荐）

这是ES6类的标准写法，方法会被添加到类的原型上，调用时this会自动指向类的实例。这种写法更符合类的设计规范，还能节省内存（所有实例共享同一个方法，不用每个实例都创建新的函数副本）：

class dLoginPage {
  constructor() {
    this.Username = Aliases.browser.page_General_Login.formLoginform.textboxUsernameinput;
    this.Password = Aliases.browser.page_General_Login.formLoginform.passwordboxPasswordinput;
    this.SubmitButton = Aliases.browser.page_General_Login.formLoginform.submitbuttonLogin;
  }

  // 直接在类内定义原型方法
  Login() {
    this.Username.SetText("admin");
    this.Password.SetText("admin");
    this.SubmitButton.ClickButton();
  }
}

module.exports = dLoginPage;

两种方案都能解决你的问题，更推荐第二种，它是ES6类的常规用法，代码也更整洁易维护。

内容的提问来源于stack exchange，提问作者A.Mills