熱點推薦:
您现在的位置: 電腦知識網 >> 編程 >> Java編程 >> JSP教程 >> 正文

Javascript 繼承實現方式

2013-11-15 09:50:53  來源: JSP教程 

  面向對象與基於對象

  幾乎每個開發人員都有面向對象語言(比如C++C#Java)的開發經驗 在傳統面向對象的語言中有兩個非常重要的概念 類和實例 類定義了一類事物公共的行為和方法而實例則是類的一個具體實現 我們還知道面向對象編程有三個重要的概念 封裝繼承和多態

  但是在JavaScript的世界中所有的這一切特性似乎都不存在 因為JavaScript本身不是面向對象的語言而是基於對象的語言 這裡面就有一些有趣的特性比如JavaScript中所有事物都是對象 包括字符串數組日期數字甚至是函數比如下面這個例子

  var doc; //定義了一個doc基類

  doc=(function(){

  var _d;

  function doc(){

  this_d=windowdocument;

  }

  docprototypeecho=function(){

  this_dwrite(hell world

  return ;

  } //定義了一個屬性echo

  return doc;

  })()

  使用

  var mydoc=new doc()

  mydocecho() //在頁面顯示hell world

  模擬JavaScript中類和繼承

  /*

  * 作者楊賢喜

  * 開發時間

  * 聯系方式

  */

  //原自typescript 思路

  var __extends = this__extends || function(ab){

  function __(){ nstructor=a;}

  __prototype=bprototype;

  aprototype=new __()

  }

  這就需要引入另外一個概念 原型(prototype)我們可以簡單的把prototype看做是一個模版新創建的自定義對象都是這個模版(prototype)的一個拷貝 (實際上不是拷貝而是鏈接只不過這種鏈接是不可見給人們的感覺好像是拷貝)

  實現類的繼承

  //DocMulit 繼承doc

  var DocMulit=(function(_doc){

  __extends(DocMulit_doc)

  var txtbut;

  function DocMulit(){

  _doccall(this)

  txt= this_dcreateElement(input

  but=this_dcreateElement(button

  butinnerText=單擊這裡;

  butonclick=function(){

  if(txtvalue==) {

  txtfocus() //consolelog(txt)

  }else{

  var doc_p=new DocP(txtvalue)

  doc_pecho()

  }

  }

  }

  //重寫父類的 echo 的方法

  DocMulitprototypeecho=function(){

  _docprototypeechocall(this)//調用父類的echo方法

  this_dbodyappendChild(txt)

  this_dbodyappendChild(but)

  }

  return DocMulit;

  })(doc)

  //DocP 繼承doc

  var DocP=(function(_doc){

  __extends(DocP_doc)

  var p_tar;

  function DocP(tar){

  _doccall(this)

  this_d=windowdocument;

  thisp_tar=this_dcreateElement(p

  thisp_tarinnerText=tar;

  thisp_tarsetAttribute(titleClick here of delete

  thisp_tarsetAttribute(stylecursor:pointer;

  thisp_taronclick=function(){

  if(confirm(You are delete?)){

  windowdocumentbodyremoveChild(this)

  }

  }

  }

  //重寫父類的echo方法

  DocPprototypeecho=function(){

  this_dbodyappendChild(thisp_tar)

  }

  return DocP;

  })(doc)

  //實例化doc繼承類DocMulit

  var mydoc=new DocMulit()

  mydocecho()

  在頁面上看到的效果

   


From:http://tw.wingwit.com/Article/program/Java/JSP/201311/19220.html
    推薦文章
    Copyright © 2005-2013 電腦知識網 Computer Knowledge   All rights reserved.