js原型鏈 js原型鏈是什麼？ 在思考這個問題的時候，我們可能會有很多概念，【鏈子】、【祖先】、【father】 1. 要理解 首先要理解 對象的屬性 都指向其他對象，Object.prototype 的 例外。 2. 單純從 鏈 這個這個詞來理解，js原型鏈更像是一種copy 或 引用。 簡單理解 ...
js原型鏈
js原型鏈是什麼？
在思考這個問題的時候，我們可能會有很多概念，【鏈子】、【祖先】、【father】
要理解
原型鏈首先要理解原型對象的屬性
[[Prototype]]都指向其他對象，Object.prototype 的[[Prototype]]例外。單純從
原型鏈 這個這個詞來理解，js原型鏈更像是一種copy 或 引用。簡單理解就是原型組成的鏈，js引擎會通過
__proto__一層層的往上鏈接。這條鏈就是原型鏈
- 下麵通過代碼來演示一下原型鏈
function People() {
}
People.prototype.sayHello = function() {
console.log('hello, guy!');
}
var xiaoMing = new People();
console.log(xiaoMing.sayHello()) // hello, guy!
xiaoMing.__proto__ === Person.prototype;
Object.getPrototypeOf(xiaoMing) === Person.prototype;
Object.getPrototypeOf(People) // ƒ () { [native code] }
Object.getPrototypeOf(People) === Function.prototype // true;
Object.getPrototypeOf(People.prototype)
// {constructor: ƒ, __defineGetter__: ƒ, __defineSetter__: ƒ, hasOwnProperty: ƒ, __lookupGetter__: ƒ, …}
從代碼來跟蹤：
- xiaoMing 的
__proto__指向 People.prototype - People.prototype 的
__proto__指向Object.Prototype
- 下麵進入更加模糊的關係。。
Object.getPrototypeOf(Object)
// ƒ () { [native code] }
Object.getPrototypeOf(Function)
// ƒ () { [native code] }
Function.__proto__
// ƒ () { [native code] }
Object.__proto__
// ƒ () { [native code] }
Object.getPrototypeOf(Function.prototype)
// {constructor: ƒ, __defineGetter__: ƒ, __defineSetter__: ƒ, hasOwnProperty: ƒ, __lookupGetter__: ƒ, …}
Object.getPrototypeOf(Object.prototype)
// null
Object.getPrototypeOf(100)
// Number {0, constructor: ƒ, toExponential: ƒ, toFixed: ƒ, toPrecision: ƒ, …}
constructor: ƒ Number()
toExponential: ƒ toExponential()
toFixed: ƒ toFixed()
toLocaleString: ƒ toLocaleString()
toPrecision: ƒ toPrecision()
toString: ƒ toString()
valueOf: ƒ valueOf()
__proto__: Object
[[PrimitiveValue]]: 0
// 下麵看幾種數據類型的prototype 都是？
100 instanceof Number
// false
100 instanceof Object
// false
Object.getPrototypeOf(obj)
//{constructor: ƒ, __defineGetter__: ƒ, __defineSetter__: ƒ, hasOwnProperty: ƒ, __lookupGetter__: ƒ, …}
obj instanceof Object
//true
Object.getPrototypeOf('test')
//String {"", constructor: ƒ, anchor: ƒ, big: ƒ, blink: ƒ, …}anchor: ƒ anchor()big: ƒ big()blink: ƒ blink()bold: ƒ bold()charAt: ƒ charAt()charCodeAt: ƒ charCodeAt()codePointAt: ƒ codePointAt()concat: ƒ concat()constructor: ƒ String()endsWith: ƒ endsWith()fixed: ƒ fixed()fontcolor: ƒ fontcolor()fontsize: ƒ fontsize()includes: ƒ includes()indexOf: ƒ indexOf()italics: ƒ italics()lastIndexOf: ƒ lastIndexOf()length: 0link: ƒ link()localeCompare: ƒ localeCompare()match: ƒ match()matchAll: ƒ matchAll()normalize: ƒ normalize()padEnd: ƒ padEnd()padStart: ƒ padStart()repeat: ƒ repeat()replace: ƒ replace()search: ƒ search()slice: ƒ slice()small: ƒ small()split: ƒ split()startsWith: ƒ startsWith()strike: ƒ strike()sub: ƒ sub()substr: ƒ substr()substring: ƒ substring()sup: ƒ sup()toLocaleLowerCase: ƒ toLocaleLowerCase()toLocaleUpperCase: ƒ toLocaleUpperCase()toLowerCase: ƒ toLowerCase()toString: ƒ toString()toUpperCase: ƒ toUpperCase()trim: ƒ trim()trimEnd: ƒ trimEnd()trimLeft: ƒ trimStart()trimRight: ƒ trimEnd()trimStart: ƒ trimStart()valueOf: ƒ valueOf()Symbol(Symbol.iterator): ƒ [Symbol.iterator]()__proto__: Object[[PrimitiveValue]]: ""
'test' instanceof String
//false
String('test') === 'test'
//true
String('test') instanceof String
// false
-
Object 是有Function 創建的
-
Function.prototype 的 原型是 Object.Prototype
-
Function.prototype 是 Function。
-
函數是有它自己創建的，難道是為了保持一致？？
下麵這張圖，展示更加錯綜複雜的原型鏈。
是不是很迷惑。
Object 是有Function 創建的，這個正好符合寫普通fuction的寫法，function Object() {}
只不過這次函數名是 Object而已。
看下麵如果我們把Object 重寫了。這樣只要通過Object 構造函數創建的原型都已經被改寫
function Object() {}
// undefined
var a = new Object();
// undefined
a.__proto__
// {constructor: ƒ}
var c = new Object({})
c.__proto__
// {constructor: ƒ}
var d = new Object({name: 'dd'})
d.__proto__
// {constructor: ƒ}
Object.__proto__
// ƒ () { [native code] }
最後又回到了 Function
js 就是函數式編程，一切皆函數，哈哈。
