js原型鏈

js原型鏈?zhǔn)鞘裁矗?/p>

在思考這個(gè)問題的時(shí)候，我們可能會(huì)有很多概念，【鏈子】、【祖先】、【father】

1. 要理解 原型鏈 首先要理解 原型

   對(duì)象的屬性 [[Prototype]] 都指向其他對(duì)象，Object.prototype 的 [[Prototype]] 例外。

2. 單純從 原型鏈 這個(gè)這個(gè)詞來理解，js原型鏈更像是一種copy 或 引用。

   簡單理解就是原型組成的鏈，js引擎會(huì)通過 __proto__ 一層層的往上鏈接。這條鏈就是原型鏈

1. 下面通過代碼來演示一下原型鏈

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

2. 下面進(jìn)入更加模糊的關(guān)系。。

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

// 下面看幾種數(shù)據(jù)類型的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 創(chuàng)建的

• Function.prototype 的 原型是 Object.Prototype

• Function.prototype 是 Function。

• 函數(shù)是有它自己創(chuàng)建的，難道是為了保持一致？？

下面這張圖，展示更加錯(cuò)綜復(fù)雜的原型鏈。

是不是很迷惑。

Object 是有Function 創(chuàng)建的，這個(gè)正好符合寫普通fuction的寫法，function Object() {}

只不過這次函數(shù)名是 Object而已。

看下面如果我們把Object 重寫了。這樣只要通過Object 構(gòu)造函數(shù)創(chuàng)建的原型都已經(jīng)被改寫

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 就是函數(shù)式編程，一切皆函數(shù)，哈哈。