Javascript 原型链

Javascript 原型链

四月 30, 2020

js原型链

js原型链是什么？

在思考这个问题的时候，我们可能会有很多概念，【链子】、【祖先】、【father】

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

    对象的属性 [[Prototype]] 都指向其他对象，Object.prototype 的 [[Prototype]] 例外。

  1. 单纯从 原型链 这个这个词来理解，js原型链更像是一种copy 或 引用。

    简单理解就是原型组成的链，js引擎会通过 __proto__ 一层层的往上链接。这条链就是原型链

  1. 下面通过代码来演示一下原型链
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

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
  1. 下面进入更加模糊的关系。。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
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 构造函数创建的原型都已经被改写

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

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 就是函数式编程，一切皆函数，哈哈。