在 Javascript 中扩展（继承）类（或对象）

Question

我正在开发一个 UI 自动化项目，我想从另一个页面对象扩展一个页面对象。我用谷歌搜索了实现这一目标的方法，但找不到我正在寻找的确切内容。 基本上我有一个类似这样的代码设置。

BasePage.js

    define([],
         function () {

            function BasePage(remote) {
             this.remote = remote;

            }

            BasePage.prototype = {
              constructor: BasePage,
             // common methods to interact with page

             commonMethodToIntreactWithPage : function{
               return doSomething;
             }
    };

    return BasePage;
});

LoginPage.js

    define([],
         function () {

            function LoginPage(remote) {
             this.remote = remote;

            }

            LoginPage.prototype = {
              constructor: BasePage,
             // Login Page related Methods

             loginPageRelatedMethod: function{
               return doSomething;
             }
    };

    return LoginPage;
});

我想通过这样做来继承LoginPage中BasePage的方法：

var loginPage = new LoginPage(remote);
loginPage.commonMethodToIntreactWithPage();

仅供参考，我使用Intern.js 进行测试。

Answer 1

你需要定义这样的东西。第一行将使用BasePage.prototype 中的属性和方法创建一个新对象，并将原型引用设置为此，因此每个LoginPage 对象都将具有这些属性和对象。毕竟我添加了仅与LoginPage (loginPageRelatedMethod) 相关的所有特定数据。并且设置正确的constructor也很重要。

LoginPage.prototype = Object.create(BasePage.prototype);

LoginPage.prototype.constructor = LoginPage;

LoginPage.prototype.loginPageRelatedMethod = function(){
    return doSomething;
}

更新

function LoginPage(remote) {
   BasePage.call(this, remote);
}

例子

function BasePage(remote) {
   this.remote = remote;
}

BasePage.prototype = {
   constructor: BasePage,    
   commonMethodToIntreactWithPage : function() {
      return 'From Base Page';
   }
};

function LoginPage(remote) {
   BasePage.call(this, remote);
}

LoginPage.prototype = Object.create(BasePage.prototype);

LoginPage.prototype.constructor = LoginPage;

LoginPage.prototype.loginPageRelatedMethod = function () {
   return 'From Login Page';
}

var loginPage = new LoginPage('Test');
console.log(loginPage.commonMethodToIntreactWithPage());