自拍偷在线精品自拍偷,亚洲欧美中文日韩v在线观看不卡

JavaScript類和繼承:prototype屬性

開發(fā) 前端
本文介紹了JavaScript里面的prototype屬性。這個(gè)屬性是理解JavaScript類和繼承的重要基礎(chǔ)。

我們已經(jīng)在第一章中使用prototype屬性模擬類和繼承的實(shí)現(xiàn)。 prototype屬性本質(zhì)上還是一個(gè)JavaScript對(duì)象。 并且每個(gè)函數(shù)都有一個(gè)默認(rèn)的prototype屬性。

如果這個(gè)函數(shù)被用在創(chuàng)建自定義對(duì)象的場(chǎng)景中,我們稱這個(gè)函數(shù)為構(gòu)造函數(shù)。 比如下面一個(gè)簡(jiǎn)單的場(chǎng)景:

  1. // 構(gòu)造函數(shù)  
  2. function Person(name) {  
  3.     this.name = name;  
  4. }  
  5. // 定義Person的原型,原型中的屬性可以被自定義對(duì)象引用  
  6. Person.prototype = {  
  7.     getName: function() {  
  8.         return this.name;  
  9.     }  
  10. }  
  11. var zhang = new Person("ZhangSan");  
  12. console.log(zhang.getName());   // "ZhangSan" 

作為類比,我們考慮下JavaScript中的數(shù)據(jù)類型 - 字符串(String)、數(shù)字(Number)、數(shù)組(Array)、對(duì)象(Object)、日期(Date)等。 我們有理由相信,在JavaScript內(nèi)部這些類型都是作為構(gòu)造函數(shù)來實(shí)現(xiàn)的,比如:

  1. // 定義數(shù)組的構(gòu)造函數(shù),作為JavaScript的一種預(yù)定義類型  
  2. function Array() {  
  3.     // ...  
  4. }  
  5.  
  6. // 初始化數(shù)組的實(shí)例  
  7. var arr1 = new Array(1563412);  
  8. // 但是,我們更傾向于如下的語法定義:  
  9. var arr2 = [1563412]; 

同時(shí)對(duì)數(shù)組操作的很多方法(比如concat、join、push)應(yīng)該也是在prototype屬性中定義的。

實(shí)際上,JavaScript所有的固有數(shù)據(jù)類型都具有只讀的prototype屬性(這是可以理解的:因?yàn)槿绻薷牧诉@些類型的prototype屬性,則哪些預(yù)定義的方法就消失了), 但是我們可以向其中添加自己的擴(kuò)展方法。

  1. // 向JavaScript固有類型Array擴(kuò)展一個(gè)獲取最小值的方法  
  2. Array.prototype.min = function() {  
  3.     var min = this[0];  
  4.     for (var i = 1; i <  this.length; i++) {  
  5.         if (this[i] <  min) {  
  6.             min = this[i];  
  7.         }  
  8.     }  
  9.     return min;  
  10. };  
  11.  
  12. // 在任意Array的實(shí)例上調(diào)用min方法  
  13. console.log([1563412].min());  // 1 

注意:這里有一個(gè)陷阱,向Array的原型中添加擴(kuò)展方法后,當(dāng)使用for-in循環(huán)數(shù)組時(shí),這個(gè)擴(kuò)展方法也會(huì)被循環(huán)出來。

下面的代碼說明這一點(diǎn)(假設(shè)已經(jīng)向Array的原型中擴(kuò)展了min方法):

  1. var arr = [1563412];  
  2. var total = 0;  
  3. for (var i in arr) {  
  4.     total += parseInt(arr[i], 10);  
  5. }  
  6. console.log(total);   // NaN 

解決方法也很簡(jiǎn)單:

  1. var arr = [1563412];  
  2. var total = 0;  
  3. for (var i in arr) {  
  4.     if (arr.hasOwnProperty(i)) {  
  5.         total += parseInt(arr[i], 10);  
  6.     }  
  7. }  
  8. console.log(total);   // 103 

【編輯推薦】

  1. JavaScript類和繼承:this屬性
  2. ExtJS Grid Tooltip的3+1種實(shí)現(xiàn)方式總結(jié)
  3. JavaScript異步調(diào)用框架的鏈?zhǔn)綄?shí)現(xiàn)
  4. JavaScript異步調(diào)用框架的jQuery風(fēng)格鏈?zhǔn)秸{(diào)用
  5. JavaScript異步調(diào)用框架的代碼實(shí)現(xiàn)
責(zé)任編輯:yangsai 來源: 博客園
相關(guān)推薦

2009-07-08 17:42:26

this屬性

2009-07-08 17:51:45

constructor

2011-05-25 16:23:35

Javascript類繼承

2017-07-27 15:05:18

前端JavaScript難點(diǎn)

2009-01-04 09:08:30

面向?qū)ο?/a>繼承接口

2023-05-30 15:06:21

JavaScript屬性開發(fā)

2016-06-07 14:28:39

Javascript原型

2012-02-14 09:45:02

JavaScript

2011-08-31 14:48:33

JavaScript

2017-07-21 09:40:35

Python類、繼承和多態(tài)

2012-11-08 10:40:47

JavaScript原型鏈

2011-07-08 10:25:55

JavaScript

2021-06-11 06:54:34

原型構(gòu)造函數(shù)

2009-09-09 11:28:40

Scala類

2011-08-24 13:56:27

JavaScript

2011-07-07 13:39:14

Cocoa 框架

2023-10-18 16:30:50

2021-12-04 11:17:32

Javascript繼承編程

2011-03-10 14:19:56

JavaScript

2010-09-09 09:16:27

JavaScriptdiv
點(diǎn)贊
收藏

51CTO技術(shù)棧公眾號(hào)