欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

javascript中類的定義方式詳解(四種方式)

 更新時間:2015年12月22日 10:12:00   作者:釋然me  
這篇文章主要介紹了javascript中類的定義方式,結合實例形式較為詳細的分析了JavaScript中類的四種定義方式,具有一定參考借鑒價值,需要的朋友可以參考下

本文實例講述了javascript中類的定義方式。分享給大家供大家參考,具體如下:

類的定義包括四種方式:

1、工廠方式

function createCar(name,color,price){
  var tempcar=new Object;
  tempcar.name=name;
  tempcar.color=color;
  tempcar.price=price;
  tempcar.getName=function(){
   document.write(this.name+"-----"+this.color+"<br>");
  };
  return tempcar;
}
var car1=new createCar("工廠桑塔納","red","121313");
car1.getName();

定義了一個能創(chuàng)建并返回特定類型對象的工廠函數(shù), 看起來還是不錯的, 但有個小問題 ,

每次調用時都要創(chuàng)建新函數(shù) showColor,我們可以把它移到函數(shù)外面,

function getName(){
  document.write(this.name+"-----"+this.color+"<br>");
}

在工廠函數(shù)中直接指向它

復制代碼 代碼如下:
tempCar.getName = getName;

這樣避免了重復創(chuàng)建函數(shù)的問題,但看起來不像對象的方法了。

2、構造函數(shù)方式

function Car(name,color,price){
  this.name=name;
  this.color=color;
  this.price=price;
  this.getColor=function(){
   document.write(this.name+"-----"+this.color+"<br>");
  };
}
var car2=new Car("構造桑塔納","red","121313");
car2.getColor(); 

可以看到與第一中方式的差別,在構造函數(shù)內部無創(chuàng)建對象,而是使用 this 關鍵字。

使用 new 調用構造函數(shù)時,先創(chuàng)建了一個對象,然后用 this 來訪問。

這種用法于其他面向對象語言很相似了, 但這種方式和上一種有同一個問題, 就是重復創(chuàng)建函數(shù)。

3、原型方式

function proCar(){
}
proCar.prototype.name="原型";
proCar.prototype.color="blue";
proCar.prototype.price="10000";
proCar.prototype.getName=function(){
  document.write(this.name+"-----"+this.color+"<br>");
};
var car3=new proCar();
car3.getName();

首先定義了構造函數(shù) Car,但無任何代碼,然后通過 prototype 添加屬性。優(yōu)點:

a. 所有實例存放的都是指向 showColor 的指針,解決了重復創(chuàng)建函數(shù)的問題

b. 可以用 instanceof 檢查對象類型

復制代碼 代碼如下:
alert(car3 instanceof proCar);//true

缺點,添加下面的代碼:

proCar.prototype.drivers = newArray("mike", "sue");
car3.drivers.push("matt");
alert(car3.drivers);//outputs "mike,sue,matt"
alert(car3.drivers);//outputs "mike,sue,matt"

drivers 是指向 Array 對象的指針,proCar 的兩個實例都指向同一個數(shù)組。

4、動態(tài)原型方式

function autoProCar(name,color,price){
  this.name=name;
  this.color=color;
  this.price=price;
  this.drives=new Array("mike","sue");
  if(typeof autoProCar.initialized== "undefined"){
   autoProCar.prototype.getName =function(){
   document.write(this.name+"-----"+this.color+"<br>");
   };
   autoProCar.initialized=true;
  }
}
var car4=new autoProCar("動態(tài)原型","yellow","1234565");
car4.getName();
car4.drives.push("newOne");
document.write(car4.drives);

這種方式是我最喜歡的, 所有的類定義都在一個函數(shù)中完成, 看起來非常像其他語言的類定義,不會重復創(chuàng)建函數(shù),還可以用 instanceof

希望本文所述對大家JavaScript程序設計有所幫助。

相關文章

  • 獲取表單控件原始(初始)值的方法

    獲取表單控件原始(初始)值的方法

    獲取表單控件原始值在某些時候還是比較實用的,具體的獲取方法如下,感興趣的朋友可以參考下,希望對大家有所幫助
    2013-08-08
  • 微信小程序調用天氣接口并且渲染在頁面過程詳解

    微信小程序調用天氣接口并且渲染在頁面過程詳解

    這篇文章主要介紹了微信小程序調用天氣接口并且渲染在頁面過程詳解,今天寫一個具體的例子,調用一個免費的天氣接口的api,并且把所獲取的內容展示在前端的界面,前端界面與 iView Weapp結合,需要的朋友可以參考下
    2019-06-06
  • js學習筆記之class類、super和extends關鍵詞

    js學習筆記之class類、super和extends關鍵詞

    es6提供了一個新語法就是class,下面這篇文章主要給大家介紹了關于js學習筆記之class類、super和extends關鍵詞的相關資料,需要的朋友可以參考下
    2021-08-08
  • 基于JS實現(xiàn)彈性漂浮廣告的示例代碼

    基于JS實現(xiàn)彈性漂浮廣告的示例代碼

    這篇文章主要介紹了利用JS實現(xiàn)彈性漂浮效果的廣告代碼,文中的示例代碼講解詳細,具有一定參考借鑒價值,感興趣的同學可以跟隨小編一起試一試
    2022-01-01
  • js消除圖片小游戲代碼

    js消除圖片小游戲代碼

    這篇文章主要介紹了js消除圖片小游戲代碼,代碼簡單易懂,非常不錯,具有一定的參考借鑒價值,需要的朋友可以參考下
    2019-12-12
  • JavaScript 學習筆記(六)

    JavaScript 學習筆記(六)

    JavaScript 定義類或對象,javascript步入高手行列必須要了解的。
    2009-12-12
  • 彌補localStorage容量缺陷方法詳解

    彌補localStorage容量缺陷方法詳解

    這篇文章主要為大家介紹了彌補localStorage容量缺陷的方法詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪
    2022-11-11
  • element 中 el-menu 組件的無限極循環(huán)思路代碼詳解

    element 中 el-menu 組件的無限極循環(huán)思路代碼詳解

    這篇文章主要介紹了element 中 el-menu 組件的無限極循環(huán),本文通過實例代碼給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下
    2020-04-04
  • javascript中幾個容易混淆的概念總結

    javascript中幾個容易混淆的概念總結

    這篇文章主要介紹了javascript中幾個容易混淆的概念總結,都是平時經(jīng)常遇到的問題,這里推薦給大家,有需要的小伙伴參考下吧。
    2015-04-04
  • JS實現(xiàn)動態(tài)增加和刪除li標簽行的實例代碼

    JS實現(xiàn)動態(tài)增加和刪除li標簽行的實例代碼

    下面小編就為大家?guī)硪黄狫S實現(xiàn)動態(tài)增加和刪除li標簽行的實例代碼。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2016-10-10

最新評論