JS中原型的理解

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

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

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

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

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

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

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

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]] : ""

這個(gè)Object對(duì)象沒(méi)有__proto__屬性，說(shuō)明這個(gè)Object對(duì)象已經(jīng)是繼承的終點(diǎn)，所有的對(duì)象最終都會(huì)繼承于它。
我們?cè)诳纯醋畛醯腟tring對(duì)象有個(gè)constructor屬性指向的是構(gòu)造函數(shù)function String(){}；說(shuō)明每個(gè)對(duì)象都有一個(gè)constructor屬性指向創(chuàng)建它的構(gòu)造函數(shù)，所以字符串的constructor會(huì)指向String構(gòu)造函數(shù)，那么問(wèn)題是在JS中，函數(shù)也是對(duì)象，那么函數(shù)的作為對(duì)象時(shí)又是如何繼承的呢，
實(shí)際上所有的構(gòu)造函數(shù)都會(huì)繼承一個(gè)特殊的匿名函數(shù)f(){};這個(gè)特殊的匿名函數(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

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

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

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

總結(jié)：

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