本文主要和大家分享JS原型詳解說明，原型的5個規則，希望本文能幫助到大家。

• 所有的引用類型（數組，對象，函數），都具有對象特性，即可自由擴展屬性（除了“null”）

var obj ={};obj.a=100//100var arr=[];arr.a=100//100function fn(){}
fn.a=100//100

• 所有的應用類型，都有一個proto屬性（隱式原型），屬性值是一個普通的對象

console.log(obj.__proto__);//{constructor: ?, __defineGetter__: ?, __defineSetter__: ?, hasOwnProperty: ?, __lookupGetter__: ?, …}console.log(arr.__proto__);//[constructor: ?, concat: ?, pop: ?, push: ?, shift: ?, …]console.log(fn.__proto__);
//? () { [native code] }

• 所有的函數都有一個prototype屬性（顯式原型），屬性值也是一個普通對象

console.log(fn.prototype)
//{constructor: ?}

• 所有的引用類型的 proto屬性值指向它的構造函數prototype屬性值（即所有引用類型的隱形原型指向他的構造函數的顯式原型）

console.log(obj.__proto__===Object.prototype);  //true//Object是一個構造函數

• 當試圖得到一個對象的某個屬性時，如果這個對象本身沒有這個屬性，那么會去他的proto(即它的構造函數的prototype)中尋找

function Foo(name,age){
    this.name = name;
}
Foo.prototype.alertName = function(){//由于Foo.prototype本身也是一個對象，而對象是可以自由擴展屬性的
    alert(this.name);
}var f = new Foo('zhan');
f.printName = function(){
    console.log(this.name);
}
f.printName();//zhan 可以直接在這個對象中找到這個屬性f.alertName();//alert彈出zhan 這時候在這個對象本身找不到這個屬性，去Foo.prototype找,得到值var A = {n:4399};var B = function(){
    this.n = 9999;
}var C = function(){
    var n = 8888;
}
B.prototype = A;
C.prototype = A;var b = new B();var c = new C();
A.n++;
console.log(b.n);//9999console.log(c.n);//4400//先從他的實例中找，找不到去它的構造函數的prototype中找

this

對上面測試代碼來說，永遠指向對象本身，所以執行f.alertName
可以彈出zhan

循環自身的屬性

還是對上面的測試代碼來說，如果對進行循環的話，可以找到，name屬性，alertName屬性，printName屬性，但是一般情況下，我們只希望得到這個對象自身定義的屬性，比如：name屬性與printName屬性

var itemfor(item in f){    if(f.hasOwnProperty(item)){
        console.log(item);     // 高級瀏覽器已經在forin中屏蔽了來自原型的屬性
     //但在這里建議大家還是加上這個判斷，保證程序的健壯性（程序對于規范要求以外的輸入情況的處理能力）

    }
}

相關推薦：

實例解析js原型和call（）

JS原型繼承四步曲

關于js原型鏈的7篇文章推薦

以上就是JS原型詳解說明的詳細內容，更多請關注php中文網其它相關文章！