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