資訊專欄INFORMATION COLUMN
摘要：一旦原型對象被賦予屬性和方法那么由相應的構造函數創建的實例會繼承上的屬性和方法為什么只有函數才有屬性規范就這么定的。其它的構造器的都是一個對象。
哪些對象有原型？
所有的對象在默認情況下都有一個原型，因為原型本身也是對象，所以每個原型自身又有一個原型（只有一種例外，默認的對象原型在原型鏈的頂端）
prototype屬性
prototype是每個函數對象都具有的屬性，被稱為原型對象，而__proto__屬性才是每個對象才有的屬性。一旦原型對象被賦予屬性和方法,那么由相應的構造函數創建的實例會繼承prototype上的屬性和方法
為什么只有函數才有prototype屬性？ES規范就這么定的。
當你創建函數時，JS會為這個函數自動添加prototype屬性， 值是一個有 constructor 屬性的對象，不是空對象。而一旦你把這個函數當作構造函數（constructor）調用（即通過new關鍵字調用），那么JS就會幫你創建該構造函數的實例，實例繼承構造函數prototype的所有屬性和方法（實例通過設置自己的__proto__指向承構造函數的prototype來實現這種繼承）
constructor屬性和prototype屬性
每個函數都有prototype屬性，而這個prototype的constructor屬性會指向這個函數。
proto
對象__proto__屬性的值就是它所對應的原型對象
var one = {x: 1};
var two = new Object();
one.__proto__ === Object.prototype // true
two.__proto__ === Object.prototype // true
one.toString === one.__proto__.toString // true
下面我們來看個例子來幫助理解這三個屬性
function Person(name){
this.name = name;
}
var p1 = new Person("louis");
console.log(Person.prototype);//Person原型 {constructor: Person(name),__proto__: Object}
console.log(p1.prototype);//undefined
console.log(Person.__proto__);//空函數, function(){}
console.log(p1.__proto__ == Person.prototype);//true
我們發現, Person.prototype(原型) 默認擁有兩個屬性:
constructor 屬性, 指向構造器, 即Person本身
proto 屬性, 指向一個空的Object 對象
而p1作為非函數對象, 自然就沒有 prototype 屬性
下面來看看__proto__屬性:
p1.__proto__ 屬性 指向的是 構造器(Person) 的原型, 即 Person.prototype.
這里我們發現: 原型鏈查詢時, 正是通過這個屬性(__proto__) 鏈接到構造器的原型, 從而實現查詢的層層深入.
Person.__proto__ 屬性 指向的是一個空函數( function(){} ),
console.log(Person.__proto__ === Function.prototype);//true
Person 是構造器也是函數(function), Person的__proto__ 屬性自然就指向 函數(function)的原型, 即 Function.prototype.
這說明 所有的構造器都繼承于Function.prototype
既然所有的構造器都來自于Function.prototype, 那么Function.prototype 到底是什么呢?
我們借用 typeof 運算符來看看它的類型.
console.log(typeof Function.prototype) // "function"
實際上, Function.prototype也是唯一一個typeof XXX.prototype為 “function”的prototype。其它的構造器的prototype都是一個對象。如下:
console.log(typeof Number.prototype) // object console.log(typeof Boolean.prototype) // object console.log(typeof String.prototype) // object console.log(typeof Object.prototype) // object console.log(typeof Array.prototype) // object console.log(typeof RegExp.prototype) // object console.log(typeof Error.prototype) // object console.log(typeof Date.prototype) // object
既然Function.prototype 的類型是函數, 那么它會擁有 proto 屬性嗎, Function.prototype.__proto__ 會指向哪里呢? 會指向對象的原型嗎? 請看下方:
console.log(Function.prototype.__proto__ === Object.prototype) // true
透過上方代碼, 且我們了解到: Function.prototype 的類型是函數, 也就意味著一個函數擁有 proto 屬性, 并且該屬性指向了對象(Object)構造器的原型. 這意味著啥?
根據我們在前面了解到的: proto 是對象的內部屬性, 它指向構造器的原型.
這意味著 Function.prototype 函數 擁有了一個對象的內部屬性, 并且該屬性還恰好指向對象構造器的原型. 它是一個對象嗎? 是的, 它一定是對象. 它必須是.實際上, JavaScript的世界觀里, 函數也是對象, 函數是一等公民.
這說明所有的構造器既是函數也是一個普通JS對象，可以給構造器添加/刪除屬性等。同時它也繼承了Object.prototype上的所有方法：toString、valueOf、hasOwnProperty等。
Object.prototype
函數的 proto 屬性指向 Function.prototype, 如: Person.__proto__ —> Function.prototype
Function.prototype 函數的 proto 屬性指向 Object.prototype, 如: Function.prototype.__proto__ —> Object.prototype.
那么Object.prototype.__proto__ 指向什么呢?
console.log(Object.prototype.__proto__ === null);//true
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/96325.html
摘要：寫在前面如果說是一本武學典籍，那么原型鏈就是九陽神功。那么，如何修煉好中的九陽神功呢真正的功法大成的技術是從底層上去理解，那種工程師和碼農的區別就在于對底層的理解，當你寫完一行代碼，或者你遇見一個解決的速度取決于你對底層的理解。 寫在前面 如果說JavaScript是一本武學典籍，那么原型鏈就是九陽神功。在金庸的武俠小說里面，對九陽神功是這樣描述的：練成「九陽神功」后，會易筋洗髓；生出...
摘要：寫在前面如果說是一本武學典籍，那么原型鏈就是九陽神功。那么，如何修煉好中的九陽神功呢真正的功法大成的技術是從底層上去理解，那種工程師和碼農的區別就在于對底層的理解，當你寫完一行代碼，或者你遇見一個解決的速度取決于你對底層的理解。 寫在前面 如果說JavaScript是一本武學典籍，那么原型鏈就是九陽神功。在金庸的武俠小說里面，對九陽神功是這樣描述的：練成「九陽神功」后，會易筋洗髓；生出...
摘要：寫在前面如果說是一本武學典籍，那么原型鏈就是九陽神功。那么，如何修煉好中的九陽神功呢真正的功法大成的技術是從底層上去理解，那種工程師和碼農的區別就在于對底層的理解，當你寫完一行代碼，或者你遇見一個解決的速度取決于你對底層的理解。 寫在前面 如果說JavaScript是一本武學典籍，那么原型鏈就是九陽神功。在金庸的武俠小說里面，對九陽神功是這樣描述的：練成「九陽神功」后，會易筋洗髓；生出...
摘要：創建對象與工廠模式的區別沒有顯示地創建對象直接將方法和屬性付給了對象沒有語句構造函數應該始終以一個大寫字母開頭。創建構造函數的實例，必須使用操作符。 構造函數模式 ECMAScript中的構造函數可用來創建特定類型的對象，像Object和Array這樣的原生構造函數。也可以創建自定義的構造函數，從而定義自定義對象類型的屬性和方法。 1.創建對象 function Person(name...
閱讀 959·2019-08-30 14:24
閱讀 998·2019-08-30 14:13
閱讀 1805·2019-08-29 17:21
閱讀 2690·2019-08-29 13:44
閱讀 1665·2019-08-29 11:04
閱讀 449·2019-08-26 10:44
閱讀 2572·2019-08-23 14:04
閱讀 914·2019-08-23 12:08
