第5章 原型

5.1 原型屬性

function f(a,b){return a*b;};// length 屬性f.length; //2// constructor 構造屬性f.constructor; // function Function() { [native code] }// prototype 屬性 初始值是空對象typeof f.prototype; //"object"

5.1.1 利用原型添加方法和屬性

function f1(name,color){// 使用this添加屬性this.name=name;this.color=color;this.whatAreYou=function(){return 'I am a'+this.color+''+this.name;};}// 使用prototype屬性添加屬性和方法f1.prototype.price=100;f1.prototype.rating=3;f1.prototype.getInfo=function (){return 'Rating: '+this.rating+',price: '+this.price;};

5.1.2 使用原型的屬性和方法

function f1(name,color){// 使用this添加屬性this.name=name;this.color=color;this.whatAreYou=function(){return 'I am a'+this.color+''+this.name;};}// 使用prototype屬性添加屬性和方法f1.prototype.price=100;f1.prototype.rating=3;f1.prototype.getInfo=function (){return 'Rating: '+this.rating+',price: '+this.price;};var f2=new f1('webcam','black');f2.color; // "black"f2.getInfo(); //"Rating: 3,price: 100"// 修改prototype屬性，由同一構造器創建的所有對象的prototype屬性也都會同時發生改變（會影響在修改之前已經創建的對象）f1.prototype.get=function(what){return this[what];}f2.get('price'); // 100

5.1.4 利用自身屬性重寫原型屬性

對象自身屬性的優先級高于原型屬性

function F1(name){this.name=name;};F1.prototype.name='Alen';var f2=new F1('XiaoMing');f2.name; // "XiaoMing" 不是 Alen// 使用hasOwnProperty()判斷一個屬性是自身屬性還是原型屬性f2.hasOwnProperty('name'); //true//刪除自身屬性后，原型屬性才會顯示delete f2.name; // truef2.name; // "Alen"

5.1.5 isPrototypeOf()方法

isPrototypeOf()：當前對象是否為另一個對象的原型

var person={like:'eat',age:12,sex:'boy'};function F1(name){this.name=name;}F1.prototype=person;var f2=new F1('Alen');// 判斷person是否為f2的原型person.isPrototypeOf(f2); //true//使用getPrototypeOf()獲取原型Object.getPrototypeOf(f2)===person; //true

5.1.6 神秘的__proto__鏈接

5.2 擴展內建對象

?內建對象的構造器函數可以通過其原型來進行擴展。

1 <script type="text/javascript"> 2 // 示例1：擴展Array的內建函數，用來查詢數組中是否存在某個特定的值 3 Array.prototype.inArray=function(needle){ 4 for (var i = 0; i < this.length; i++) { 5 if(this[i]===needle){ 6 return true; 7 }else{ 8 return false; 9 } 10 }; 11 }; 12 var colors=['red','black','blue']; 13 colors.inArray('red'); //true 14 colors.inArray('green'); //false 15 //示例2：反轉字符串 16 // 先利用split()將目標字符串轉換成數組，然后調用該數組的reverse()方法產生一個反向數組。
// 最后通過join()方法將結果數組轉換為字符串 17 String.prototype.reverse=function (){ 18 return Array.prototype.reverse.apply(this.split('')).join(''); 19 }; 20 "bums".reverse(); //smub 21 </script>

5.2.1 關于內建對象的討論

?如果想通過原型為某個對象添加一個新屬性，務必檢查一下該屬性是否已經存在。

5.2.2 原型陷阱

?注意： 1> 當對原型對象執行完全替換時，可能會觸發原型鏈中某種異常

? ? ? ? ? ? 2> prototype.constructor 屬性不可靠

1 <script type="text/javascript"> 2 function Dog(){ 3 this.tail=true; 4 }; 5 var f1=new Dog(); 6 var f2=new Dog(); 7 // 仍可以為Dog()的原型添加屬性，添加之前已經存在的對象也可訪問新屬性 8 Dog.prototype.say=function(){ 9 return 'worf'; 10 }; 11 // f1、f2可以訪問新方法 12 f1.say(); //"worf" 13 f2.say(); //"worf" 14 // 檢查對象的構造器 15 f1.constructor === Dog; // true 正常 16 f2.constructor === Dog;// true 正常 17 Dog.prototype.constructor === Dog; // true 18 19 // 用自定義新對象完全覆蓋掉原有的原型對象 20 Dog.prototype={ 21 paws:4, 22 hair:true 23 }; 24 // 這樣原有對象不能訪問新屬性,但通過__proto__與原有的原型保持聯系 25 f1.paws; //undefined 26 f1.say(); //"worf" 27 typeof f1.__proto__.say; // "function" 28 // 之后創建的對象室友被更新后的prototype對象 29 var f3=new Dog(); 30 f3.say(); // f3.say is not a function 31 f3.tail; // true 32 f3.paws; // 4 33 // __proto__指向新的原型對象 34 f3.__proto__.hair; //true 35 36 // 新對象的constructor屬性不在保持正確 37 f3.constructor;// function Object() { [native code] } 38 // 本應該指向Dog(),現在指向Object 39 f1.constructor; //function Dog(){this.tail=true;} 仍為Dog() 不變 40 Dog.prototype.constructor; // function Object() { [native code] } 41 //重新設置constructor屬性 解決 42 Dog.prototype.constructor=Dog; 43 new Dog().constructor === Dog; // true 44 </script>

?

?

?

轉載于:https://www.cnblogs.com/zengFyzL/p/7208574.html

總結

以上是生活随笔為你收集整理的JavaScript面向对象编程指南(五) 原型的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。