【Javascript基礎篇】—--原型物件(prototype)的三個常用方法
阿新 • • 發佈:2019-01-05
【前言】
每一個函式都有自己的prototype屬性,而該屬性所儲存的是原型物件。在上一篇中我們講解了通過原型物件動態新增屬性,結果我們介紹原型物件的三個常用方法。
【內容】
原型方法:
①isPrototypeOf();主要判斷當前物件是否是另一個物件的原型,返回的型別是布林值,經常被使用。
var monkey = { hair:'red', feeds:'bananas', } function Human(name) { this.name = name; } Human.prototype = monkey; var judy = new Human('judy'); //返回的值是一個布林型別的 monkey.isPrototypeOf(judy);
②hasOwnProperty():判斷一個屬性是自身屬性還是原型屬性,發生的情況主要是在出現原型的時候。
注意:一個物件在自身屬性中沒有找到指定的屬性,就會在原型鏈中查詢相關的屬性。自身屬性的優先順序高於原型屬性!
可是這樣的結果可能讓你看不出來自身屬性和原型屬性的優先順序,我們修改上面的程式碼,讓judy的動態新增屬性feeds,然後檢視輸出://定義了一個monkey的物件 var monkey = { hair:'red', feeds:'bananas', } //定義了Human的構造器函式 function Human(name) { this.name = name; } //將human的原型屬性執行了monkey。 Human.prototype = monkey; //例項化物件Human。 var judy = new Human('judy'); //動態添加了例項化物件judy的屬性。 judy.age = '20'; judy.sex = '女'; //輸出 console.log(judy.sex); //輸出結果是20 console.log(judy.feeds);//輸出結果是bananas console.log(judy.hasOwnProperty('sex')); //結果輸出是true console.log(judy.hasOwnProperty('feeds')); //輸出結果是false
judy.feeds='meat';
結果也會出來非常大的區別,其中console.log(judy.feeds)輸出的是meat,console.log(judy.hasOwnProperty('feeds'))輸出的結果是true。
如果你想要顯露出來物件的原型屬性,可以將物件的自身屬性刪除掉,這樣就可以顯示出來原型屬性:delete judy.feeds;結果就會出來原型屬性。
③propertyIsEnumerable()
ES5之後出現這個屬性,在for-in的迴圈中,只有是這種具有列舉特性的才會顯示出來。而不是列舉的特性例如:constructor,在呼叫propertyIsEnumerable返回false。
function Monkey(name, color) {
this.name = name;
this.color = color;
this.Method = function () { return 1;}
}
Monkey.prototype.price = 100;
Monkey.prototype.rating = 6;
var judy = new Monkey('judy', 'red');
judy.propertyIsEnumerable('name');
judy.propertyIsEnumerable('constructor');
//for-in迴圈,列出物件中的所有的屬性,包括原型屬性
for (var prop in judy) { console.log(prop + '=' + judy[prop]);}
其中judy.propertyIsEnumerable('constructor');返回的結果是false,所以在for-in返回的結果屬性中並沒有constructor。
延伸:
原型鏈:如果我們在訪問一個物件,並且訪問一個並不存在的屬性,javascript的引擎會搜尋該物件的屬性,如果依然沒有找到,會繼續搜尋其原型,,以此類推,直到父級物件Object。
在用原型動態新增屬性的時候我們必須首先判斷其自身沒有該屬性,否則這個工作沒有意義,因為自身屬性要由於原型屬性。
【總結】
其實在總結這部分的知識的時候我們還有遺留的一些問題,比如在使用原型物件的過程中記憶體的開闢應該是怎麼樣的邏輯等一些的問題,希望如果你瞭解咱們可以相互交流! 感謝您的時間!