首頁 > web前端 > js教程 > JS原型詳解說明

JS原型詳解說明

小云云
發布: 2018-02-26 13:43:36
原創
1492 人瀏覽過

本文主要和大家分享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中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板