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

Posted 2023-02-24

【中文标题】在 Javascript 中扩展（继承）类（或对象）

【英文标题】：Extending (inherit) class (or object ) in Javascript

【发布时间】：2017-03-16 12:05:16

【问题描述】：

我正在开发一个 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 进行测试。

【问题讨论】：

你可以试试LoginPage.prototype = new BasePage()

【参考方案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());

【讨论】：

请注意Object.create第二个参数不能是任何对象，它必须是属性描述符的对象，而BasePage.prototype不是这样的对象。请查看此 SO 答案以获取更多详细信息：***.com/questions/17408350/object-create-bug

@BartekFryzowicz 抱歉，我打错了，第一个参数应该是BasePage.prototype

@SurenSrapyan 所有这些都应该包含在LoginPage.js ??

是的，如果你可以在那里访问BasePage

如何将参数传递给BaseTest的构造函数？