JS中原型的理解

fxp 發(fā)布于2019-08-20 19:03 / 2863人閱讀

摘要：我們都知道在的世界中，幾乎所有東西都是對象，而對象又是通過繼承來層層獲得屬性和方法，首先我們要區(qū)分對象和構(gòu)造函數(shù)的區(qū)別，中對象繼承的是對象，函數(shù)繼承的是函數(shù)雖然函數(shù)也是對象，只有函數(shù)才有原型屬性供它實例的對象繼承，也就是說在中顯示如下字符串

我們都知道在JS的世界中，幾乎所有東西都是對象，而對象又是通過繼承來層層獲得屬性和方法，

var str = new String("mario");
console.dir(str);

首先我們要區(qū)分String對象和function String(){}構(gòu)造函數(shù)的區(qū)別，JS中對象繼承__proto__的是對象，函數(shù)繼承__proto__的是函數(shù)(雖然函數(shù)也是對象)，只有函數(shù)才有原型prototype屬性供它實例的對象繼承，也就是說str.__proto__ === String.prototype;在CHROME中顯示如下：

String
0: "m"
1: "a"
2: "r"
3: "i"
4: "o"
length: 5
__proto__: String
[[PrimitiveValue]]: "mario"

字符串對象的長度是5，初始值是“mario" 繼承于String對象；這個String對象包含了我們熟知的大部分方法和屬性如：
charAt(),charCodeAt()..........,仔細看String對象的屬性和方法也包含一個constructor和__proto__屬性，其中__proto__又指向Object對象，constructor指向的是構(gòu)造函數(shù)function String(){};
__proto__指向的Object對象包含以下屬性和方法：

constructor  :? Object()
hasOwnProperty : ? hasOwnProperty()
isPrototypeOf : ? isPrototypeOf()
propertyIsEnumerable : ? propertyIsEnumerable()
toLocaleString : ? toLocaleString()
toString : ? toString()
valueOf : ? valueOf()
__defineGetter__ : ? __defineGetter__()
__defineSetter__ : ? __defineSetter__()
__lookupGetter__ : ? __lookupGetter__()
__lookupSetter__ : ? __lookupSetter__()
get __proto__ : ? __proto__()
set __proto__ : ? __proto__()
[[PrimitiveValue]] : ""

這個Object對象沒有__proto__屬性，說明這個Object對象已經(jīng)是繼承的終點，所有的對象最終都會繼承于它。
我們在看看最初的String對象有個constructor屬性指向的是構(gòu)造函數(shù)function String(){}；說明每個對象都有一個constructor屬性指向創(chuàng)建它的構(gòu)造函數(shù)，所以字符串的constructor會指向String構(gòu)造函數(shù)，那么問題是在JS中，函數(shù)也是對象，那么函數(shù)的作為對象時又是如何繼承的呢，
實際上所有的構(gòu)造函數(shù)都會繼承一個特殊的匿名函數(shù)f(){};這個特殊的匿名函數(shù)只有最基本的屬性和方法：

apply : ? apply()
arguments : (...)
bind : ? bind()
call : ? call()
caller : (...)
constructor : ? Function()
length : 0
name : ""
toString : ? toString()
Symbol(Symbol.hasInstance) : ? [Symbol.hasInstance]()
get arguments : ? ThrowTypeError()
set arguments : ? ThrowTypeError()
get caller : ? ThrowTypeError()
set caller : ? ThrowTypeError()
__proto__ : Object

這個特殊的匿名函數(shù)f,做為對象又繼承了終極對象Object,雖然函數(shù)也是對象，但是作為JS中的一等公民，他又有自己的特權(quán)，匿名函數(shù)f又作為一等公民中的特殊存在，它又有什么特殊的屬性和方法呢，通過上面顯示的屬性和方法我們看到匿名函數(shù)f創(chuàng)建它的構(gòu)造函數(shù)是fuction Function(){};不要小看這個構(gòu)造函數(shù)，它是特殊的匿名函數(shù)f以自己為原型和繼承自己的屬性創(chuàng)造的，就像女媧按照自己的樣子和能力，創(chuàng)造了第一個人類，其他的人類的原型都是這個人，這個人我們簡稱始祖吧，只有簡單的屬性和方法，

arguments :null
caller : null
length : 1
name : "Function"
prototype : ? ()
__proto__ : ? ()

幾乎就只有一個名字Function;而創(chuàng)造它的匿名函數(shù) f 就像是女媧；
可以這么說，所有的函數(shù)都繼承于這個特殊匿名函數(shù) f ,都有個原型，供它的實例對象繼承，而這個原型又繼承于終極的Object對象。

總結(jié)：

JS里的所有對象分為兩類，一般對象，作為函數(shù)的對象；
一般對象首先繼承于創(chuàng)建它的原型對象，再繼承于終極Object對象，constructor屬性指向創(chuàng)建它的構(gòu)造函數(shù)；當然作為終極Object對象，雖然沒有在繼承的對象，但是有創(chuàng)造他的構(gòu)造函數(shù)即constructor屬性，function Object(){};
函數(shù)繼承于特殊的匿名函數(shù) f ,還有個原型prototype即終極Object對象供它的實例對象繼承，而它的建造者就是已自身為原型和繼承的終極大BOSS function Function(){};