[Effective JavaScript 筆記]第38條:在子類的構造函數中調用父類的構造函數

来源:http://www.cnblogs.com/wengxuesong/archive/2016/06/17/5592972.html
-Advertisement-
Play Games

當初始化SpaceShip原型時,我們尚未創建任何能作為第一個參數來傳遞的場景。並且SpaceShip的原型加入到場景的註冊表中,而這絕不是我們想做的。這是一種使用子類時常用的方法。應當僅僅在子類構造函數中調用父類構造函數,而不是當創建子類原型時調用它。 一旦創建了SpaceShip的原型對象,我們... ...


示例

場景類

場景圖(scene)是在可視化的過程中(如游戲或圖形模擬場景)描述一個場景的對象集合。一個簡單的場景包含了在該場景中的所有對象(稱角色),以及所有角色的預載入圖像數據集,還包含一個底層圖形顯示的引用(通常被稱為context)。

function Scene(context,width,height,images){
  this.context=context;
  this.width=width;
  this.height=height;
  this.images=images;
  this.actors=[];
}

Scene.prototype.register=function(actor){
  this.actors.push(actor);
};

Scene.prototype.unregister=function(actor){
  var i=this.actors.indexOf(actor);
  if(i>=0){
     this.actors.splice(i,1);
  }
};

Scene.prototype.draw=function(){
  this.context.clearRect(0,0,this.width,this.height);
  for(var a=this.actors,i=0,n=a.length;i < n;i++){
    a[i].draw();
  }
};

角色基類

場景中所有的角色都是繼承自基類Actor。基類Actor抽象出了一些通用的方法。每個角色都存儲了其自身場景的引用以及坐標位置,然後將自身添加到場景的角色註冊表中。

function Actor(scene,x,y){
   this.scece=scene;
   this.x=0;
   this.y=0;
   scene.register(this);  
}

為了能改變角色在場景中的位置,我們提供了一個moveTo方法。該方法改變角色坐標,然後重繪場景。

Actor.prototype.moveTo=function(x,y){
  this.x=x;
  this.y=y;
  this.scene.draw();
};

當一個角色離開了場景,我們從場景圖的註冊表中刪除它,並重新繪製場景。

Actor.prototype.exit=function(){
  this.scene.unregister(this);
  this.scene.draw();
};

想要繪製一個角色,我們需要查找它在場景圖圖像表中的圖像。我們假設每個actor有一個type欄位,可以用來查找它在圖像表中的圖像。一旦我們有了這個圖像數據,就可以使用底層圖形庫將其繪製到圖形上下文中。

Actor.prototype.draw=function(){
  var image=this.scene.images[this.type];
  this.scene.context.drawImage(image,this.x,this.y);
};

同樣,我們可以通過角色的圖像數據確定尺寸。

Actor.prototype.width=function(){
  return this.scene.images[this.type].width;
};
Actor.prototype.height=function(){
  return this.scene.images[this.type].height;
}

角色子類

我們將角色的特定類型實現為Actor的子類。例如,在街機游戲中太空飛船就會有一個擴展自Actor的SpaceShip類。像所有的類一樣,SpaceShip被定義為一個構造函數。但是為了確保SpaceShip的實例能作為角色被正確地初始化,其構造函數必須顯式地調用Actor的構造函數。通過將接收者綁定到該新對象來調用Actor可以達到此目的.

function SpaceShip(scene,x,y){
  Actor.call(this,scene,x,y);
  this.points=0;
}

首先調用Actor的構造函數能確保通過Actor創建的所有實例屬性都被添加到了新對象中。然後,SpaceShip可以定義自身的實例屬性,如飛船當前的積分數。為了使SpaceShip成為Actor的正確的子類,其原型必須繼承自Actor.prototype。做這種擴展的最好方式是使用ES5的Object.create方法。

SpaceShip.prototype=Object.create(Actor.prototype);

構造函數創建子類原型問題

如果我們試圖使用Actor的構造函數來創建SpaceShip的原型對象,會有幾個問題。
第一個問題是沒有任何合理的參數傳遞給Actor。

SpaceShip.prototype=new Actor();

當初始化SpaceShip原型時,我們尚未創建任何能作為第一個參數來傳遞的場景。並且SpaceShip的原型加入到場景的註冊表中,而這絕不是我們想做的。這是一種使用子類時常用的方法。應當僅僅在子類構造函數中調用父類構造函數,而不是當創建子類原型時調用它。
一旦創建了SpaceShip的原型對象,我們就可以向其添加所有的可被實例共用的屬性,包含一個用於在場景的圖像數據表中檢索的type名,以及一些太空飛船的特定方法。

SpaceShip.protoype.type='spaceShip';
SpaceShip.prototype.scorePoint=function(){
  this.points++;
};
SpaceShip.prototype.left=function(){
  this.moveTo(Math.max(this.x-10,0),this.y);
};
SpaceShip.prototype.right=function(){
  var maxWidth=this.scene.width-this.width();
  this.moveTo(Math.min(this.x+10,maxWidth),this.y);
}

圖示角色及子類關係

圖示SpaceShip實例的繼承層次結構圖。
image

紅框為基類與子類關係,構造函數也是Function類的一個實例,Function類的原型對象也繼承自是Object的原型對象。
註意:scene,x,y屬性只被定義在實例對象中,而不是被定義在原型對象中,儘管SpaceShip是被Actor構造函數創建的。

提示

  • 在子類構造函數中顯式地傳入this作為顯式的接收者調用父類構造函數

  • 使用Object.create函數來構造子類的原型對象以避免調用父類的構造函數


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 如何實現刷新當前頁面呢?藉助js你將無所不能。 1,reload 方法,該方法強迫瀏覽器刷新當前頁面。語法:location.reload([bForceGet]) 參數: bForceGet, 可選參數, 預設為 false,從客戶端緩存里取當前頁。true, 則以 GET 方式,從服務端取最新的 ...
  • var rockModule = (function () { //監聽手機搖動事件 if (window.DeviceMotionEvent) { window.addEventListener('devicemotion', deviceMotionHandler, false); } else ...
  • 1、去github官網註冊個人帳號:沒有的:猛戳這裡去註冊,比如我的賬戶名:wjf444128852,我的已經漢化(可在github里搜索github如何漢化有插件) 2、點擊倉庫-新建,倉庫名字必須是:你的github帳號.github.com或者.io 3、在該倉庫下創建index.html(可 ...
  • 說在前面: 嗯...博主現在是大一,前段時間犯腦癌想開一個技術博,記錄一下學習過程,也是這麼做的。 為什麼要學前端呢?無非就是為了走在發家致富,迎娶白富美的康莊大道上。那幾周來對前端開發已經入門了,(鼓掌,鼓掌)非常有意思。但還是感覺道阻且長。不懂的東西越來越多......不過還好,有好多人幫我呀, ...
  • 先來個相容性說明,洗洗腦: div{transform:rotate(7deg);-ms-transform:rotate(7deg); /* IE 9 */-moz-transform:rotate(7deg); /* Firefox */-webkit-transform:rotate(7deg ...
  • 遞歸函數: function factorical(num){ if(num<=1){ return 1; } else{ return num*factorical(num-1); } } factorial(2)//2 這個遞歸函數就是用函數來調用函數本身,但是這樣真的好嗎,好 接下來看這裡 v ...
  • 從jQuery API 文檔中可以知道,jQuery自定義動畫的函數.animate( properties [, duration] [, easing] [, complete] )有四個參數: properties:一組包含作為動畫屬性和終值的樣式屬性和及其值的集合 duration(可選): ...
  • 還記得之前的javascript入門裡的講的confirm 消息對話框嗎?不記得也沒關係,我們先來回顧一下,然後在詳細講它。 複習: confirm 消息對話框通常用於允許用戶做選擇的動作,如:“你對嗎?”等。彈出對話框(包括一個確定按鈕和一個取消按鈕)。 語法: 參數說明: str:在消息對話框中 ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發(一):使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說,近來想嘗試開發一款安卓APP,考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP,畢竟是使用Visual Studio開發工具,使用起來也比較的順手,結合微軟官方的教程進行了安卓 ...
  • 前言 QuestPDF 是一個開源 .NET 庫,用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫,它徹底改變了我們生成 PDF 文檔的方 ...
  • 項目地址 項目後端地址: https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址: ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址: http://tree ...
  • 話不多說,直接開乾 一.下載 1.官方鏈接下載: https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe,運行開始下載SQL server; 二. ...
  • 前言 隨著物聯網(IoT)技術的迅猛發展,MQTT(消息隊列遙測傳輸)協議憑藉其輕量級和高效性,已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫,為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog支持多種接收器用於日誌存儲,增強器用於添加屬性,LogContext管理動態屬性,支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項,適用於不同需求。 ...
  • 目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據,爬取信息時需要模擬瀏覽器行為,否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下: 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • 1.前言 什麼是熱更新 游戲或者軟體更新時,無需重新下載客戶端進行安裝,而是在應用程式啟動的情況下,在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR,Xlua,ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles,Addressable, ...
  • 本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺,其實像阿裡雲,騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後,它會送 ...
  • 通過以下方式可以高效,並保證數據同步的可靠性 1.API設計 使用RESTful設計,確保API端點明確,並使用適當的HTTP方法(如POST用於創建,PUT用於更新)。 設計清晰的請求和響應模型,以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證,確保接收到的數據符合預期格 ...