几个重要概念
__proto__(前后都是两条杠)
prototype
constructor
普通对象
函数对象
构造器(构造函数)
实例(实例是个普通对象)
ps:第一次认真梳理知识点,有点浅显,希望读完你所收获。如有错误,也望及时指出,感激不尽!
复制代码
一. constructor / prototype 和__proto__
每个对象都有__proto__ ,而prototype只有函数对象才有
复制代码
1. 有时候当前对象没有我们想用的方法,所以我们就想看看它的原型上有木有,要怎么样才能获取到当前对象的原型呢?
答:__proto__
上图中: obj.__proto__ === Object.prototype
首先 Object.prototype叫做obj的**原型对象**,这个对象里包含了所有对外共享的属性和方法。
复制代码
举个例子:
var function Person(name){
this.name = name;
}
var p1 = new Person('林蛋大');
console.log(p1.__proto__); //Person.prototype
console.log(p1.__proto__ === Person.prototype); //true
复制代码
其次,我们在控制台看到了很眼熟很扎眼的 constructor,它是什么鬼?
复制代码
2. constructor 被包含在大括号{}中,说明它是原型对象中的一个属性。这个属性是干嘛的?请看以下代码
以下写法同 Person.prototype.constructor 直观地用数学思维理解:等号两边写谁都一样
console.log(p1.__proto__.constructor ); //Person
复制代码
也就是说,原型对象里有一个叫constructor的属性,它指向自己的构造器(构造函数) 所以,一般用constructor属性来获取当前对象的构造函数
纳尼?这是什么情况?岂不是我们有好多种获取构造函数的方法?Nice!
如下:
p1.constructor === p1.__proto__.constructor
p1.constructor === Person.prototype.constructor
用数学思维左右置换,互求,是可以的
复制代码
p1这个对象是Person的一个实例,因为它是Person new 出来,Person是它的构造器,所以它的constructor指向了Person;
另外,Person.prototype是一个对象,它的constructor也指向了Person,是不是可以理解为:Person.prototype 也是Person的一个实例?
实际上是真的可以这样理解的,我查阅了很多资料,虽然是伪相同,但网上大多数人都觉得这样更容易理解原型和原型链
中场小结:
-
通过__proto__可以获取原型,一直往一层层获取,一直__proto__直到结果为null就是尽头了。走完这个流程就是走完了你当前对象的原型链。(这一块后面细讲)
-
通过constructor可以获取当前对象的构造函数
-
任何对象都有原型,任何对象都可能是别的对象的原型,那什么叫原型?通俗的理解:原型是个对象,拿出来共享的属性和方法的集合。所有对象的原型(—proto__)都指向其构造器的 prototype属性。
-
在实际编码中会用到这三个属性做继承,这里有个坑,如下:
function Person(name) {
this.name = name
}
// 修改原型
Person.prototype.getName = function() {}
var p = new Person('楚中天')
console.log(p.__proto__ === Person.prototype) // true
console.log(p.__proto__ === p.constructor.prototype) // true
// 重写原型
Person.prototype = {
getName: function() {}
}
var p = new Person('楚中天')
console.log(p.__proto__ === Person.prototype) // true
console.log(p.__proto__ === p.constructor.prototype) // false
why false????
复制代码
这是因为给Person.prototype赋值的是一个对象直接量{getName: function(){}},使用对象直接量方式定义的对象,它的构造器(constructor)指向的是根构造器Object
所以这个时候p.constructor === Object为true,它现在的构造器是个叫做Object的构造器(构造函数),而已经不是叫做Person的构造器了,你让他们怎么相等?这种继承注定会失败
那么怎么办?这个时候要改很简单,只要把constructor给指回来就好了,这是写原型继承的时候最最最重要的坑!
Person.prototype = {
getName: function() {}
}
var p = new Person('jack')
p.constructor = Person; //就是这一行,核心重点
!
console.log(p.__proto__ === Person.prototype) // true
console.log(p.__proto__ === p.constructor.prototype) // true
复制代码
二. 原型链
上节说到__proto__可以获取原型,一直往上获取就能拿到整条链子,怎么个获取法?口说不清我们直接看代码:
var function Person(name){
this.name = name;
}
var p1 = new Person('林蛋大');
//不打印的话,你知道以下会输出什么吗?
1. p1.__proto__ ?
2. Person.prototype.__proto__ ?
复制代码
- 肯定能秒答:Person.prototype
- 也就是构造函数Person的原型,既然是函数,那么肯定是Function.prototype 此处你的脑子需要有一条链子的形象:
你先把这图放脑子里等着,我们先来分析第2题,:
p1.__proto__ ? Person.prototype
p1.__proto__.__proto__?
复制代码
- 此题要一步一步从左往右推导:从第一题得出p1__proto__ 就是Person.prototype
- 故此题所求的是Person.prototype的原型对象,而求原型对象的方法是__proto__
- Person.prototype是个对象,所以脑子里应该能秒闪出来:Object.prototype
综上所述,第2题要求的是p1的构造器的原型对象。 答案如下:
Person.prototype.__proto__ ?Object.prototype
骚问法:
p1.__proto__.__proto__ ?Object.prototype
变态问法:
p1.constructor.__proto__ ? Object.prototype
p1.__proto__.constructor.prototype.__proto__ ? Object.prototype
Person.prototype.constructor.prototype.__proto__ ? Object.prototype
晕了?请翻到上面两个constructor的等式,左右置换一下:
p1.__proto__.constructor 就是Person
Person.prototype.constructor 就是Person
懂了吧?嘿嘿~
复制代码
第2题分析完了,我们来看看链子怎么求。
我们往上追溯原型链的目的,无非就是找些方法或者属性来满足当前的coding需要,所以---
- 先找p1的上级,也就是它的构造器Person上有木有,而所有的属性和方法都是固定放在prototype里的,我们一键到达原型对象里翻找:
由 p1.__proto__ 得到 Person.prototype,发现构造器Person的集合里没有我们想要的
复制代码
- Person的集合里没有,我们只好再往上找了,仍然使用一键到达原型集合的唯一方法__proto__
由 Person.__proto__ 得到 Function.prototype,发现构造器Function的集合里还是没有
复制代码
- 再往上找:
由 Function.__proto__ 得到 Object.prototype,发现构造器Object的集合里还是没有
复制代码
- 不要放弃,继续追溯,坚持就是胜利:
由 Object.__proto__ 得到 null,纳尼????
复制代码
祖宗十八代找遍,都找到类人猿了,还是没有找到我们要用的方法或者属性,只有一个解释:你要找的家伙尚未出世(不存在)。
这个时候如果你强行调用这个方法或者使用这个属性,运行后你就会得到一串红色大字:‘ XXX is undefined .....’
以上就是我们本着解决实际需要的初衷,追溯原型链的过程。
打个比方就是p1的家族世代修炼,每一代都修炼出自己的独门绝学,然后传给后代,最后面的p1就继承到了以上所有祖宗的绝学(属性和方法)
在JS的世界里大家都是分散的对象,总有个机制把他们连接起来才能去运转去工作去产出,所以js作者设计了这一套继承机制,这也就是所谓的原型链。
你能看到这里,说明你是一位好学勤奋的同学,给你一个萌萌哒鼓励~
不过我们还是要继续这个又臭又长的裹脚布啊
console.log(p1.arguments) // arguments 从哪里来的?
console.log(Person.call(window)) // call 方法从哪里来的?
复制代码
相信大家也看过很多代码,经常突然冒出arguments,找遍全世界也没有找到arguments是在哪里声明的。毕竟p1中并没有arguments属性,找到它的原型Person,上面也没有,哪儿冒出来的?
按照上面的分析,只好往上追溯打印一下翻找,果然---
console.log(Function.prototype) // function() {} (一个空的函数)
console.log(Object.getOwnPropertyNames(Function.prototype));
/* 输出
["length", "name", "arguments", "caller", "constructor", "bind", "toString", "call", "apply"]
*/
复制代码
顺利被我们找出arguments和call,getOwnPropertyNames是顶级公民Object.prototype里的属性和方法,所有的对象都能继承到它的属性和方法,它的角色相当于老祖宗(初代)大家自行打印一下,它的方法和属性非常多。
但是!Function.prototype居然是个空函数,为什么?请看下一节
三. 特殊公民 Function.prototype
所有函数对象(注意区别普通对象)的__proto__都指向Function.prototype,也就是说它是所有函数对象的原型对象,而且它是一个空函数(Empty function)
先不管它是空函数什么的,来看看下列JS世界中各类构造器的原型,你会很惊讶他们都是同一个:
Number.__proto__ === Function.prototype // true
Number.constructor == Function //true
Boolean.__proto__ === Function.prototype // true
Boolean.constructor == Function //true
String.__proto__ === Function.prototype // true
String.constructor == Function //true
// 所有的构造器都来自于Function.prototype,甚至包括根构造器Object及Function自身
Object.__proto__ === Function.prototype // true
Object.constructor == Function // true
// 所有的构造器都来自于Function.prototype,甚至包括根构造器Object及Function自身
Function.__proto__ === Function.prototype // true
Function.constructor == Function //true
Array.__proto__ === Function.prototype // true
Array.constructor == Function //true
RegExp.__proto__ === Function.prototype // true
RegExp.constructor == Function //true
Error.__proto__ === Function.prototype // true
Error.constructor == Function //true
Date.__proto__ === Function.prototype // true
Date.constructor == Function //true
复制代码
JavaScript中有内置(build-in)构造器/对象共计12个(ES5中新加了JSON),这里列举了可访问的8个构造器。剩下的如Global是不能直接访问的,Arguments仅在函数调用时由JS引擎创建;另外还有Math,JSON是以对象形式存在的,无需new,对象形式的__proto__是Object.prototype。
如下
Math.__proto__ === Object.prototype // true
Math.construrctor == Object // true
JSON.__proto__ === Object.prototype // true
JSON.construrctor == Object //true
复制代码
上面说的函数对象当然包括自定义的。如下
// 函数声明
function Person() {}
// 函数表达式
var Perosn = function() {}
console.log(Person.__proto__ === Function.prototype) // true
console.log(Man.__proto__ === Function.prototype) // true
复制代码
这些打印结果说明:所有的构造器(构造函数)都来自于 Function.prototype,甚至包括根构造器Object及Function自身。所以所有构造器都继承了Function.prototype的属性及方法。 故,函数是唯一一个typeof 结果是function 的类型。
那么上一节的问题,说Function.prototype怎么是个空函数啊?不止是它,如果你求Array构造器的原型,也是一个空数组:
console.log(Function.prototype) // function() {} (一个空的函数)
console.log(Array.prototype) // [ ] (一个空的数组)
复制代码
怎么办?故技重施啊!它自己没有,它的原型肯定有鸭!
//首先 Function.prototype/Array.prototype是个对象
console.log(Function.prototype.__proto__ === Object.prototype ) //true
console.log(Array.prototype.__proto__ === Object.prototype ) //true
//Object.prototype的原型呢?null,到世界的尽头了
console.log(Object.prototype.__proto__ === null )//true
复制代码
到世界尽头了?刚才明明说object也是function 创建的,那么Object的原型对象应该是Function.prototype 才对啊!因为所有对象的原型,都指向自己的构造器的prototype属性。
如果能这样的话,会是什么样子?请看:
如果 Object.prototype.__proto__ === Function.prototype 为true,
那么继续往上找 Function.prototype.__proto__ === Object.prototype
再继续往上 Object.prototype.__proto__ === Function.prototype
再再继续往上 Function.prototype.__proto__ === Object.prototype
.........
复制代码
死循环,这条链子没完没了了????而且还没多大意义!
所以设计者让Object.prototype 指向null, 整条链子快乐结束。
四. 灵魂面试题
function Person(name) {
this.name = name
}
var p2 = new Person('king');
核心点:__proto__是求原型对象的,也就是求构造器的prototype属性 ===>原型对象是构造器的一个属性,本身是个对象
constructor 是求构造器的 ====> 构造器的prototype属性的对象集合里也有constructor,这个prototype里的constructor指向构造器自己
console.log(p2.__proto__)//Person.prototype
console.log(p2.__proto__.__proto__)//结合上题,也就是Person.prototype的__proto__,Person.prototype本身是个对象,所以这里输出:Object.prototype
console.log(p2.__proto__.__proto__.__proto__)//同理,这里是求Object.prototype的__proto__,这里输出:null
console.log(p2.__proto__.__proto__.__proto__.__proto__)//null后面没有了,报错
console.log(p2.__proto__.__proto__.__proto__.__proto__.__proto__)//null后面没有了,报错
console.log(p2.constructor)//Person
console.log(p2.prototype)//undefined p2是实例对象,不是函数对象,是没有prototype属性滴
console.log(Person.constructor)//Function 一个空函数
console.log(Person.prototype)//打印出Person.prototype这个对象里所有的方法和属性
console.log(Person.prototype.constructor)//Person
console.log(Person.prototype.__proto__)//Person.prototype是对象,所以输出:Object.prototype
console.log(Person.__proto__)//Function.prototype
console.log(Function.prototype.__proto__)//Object.prototype
console.log(Function.__proto__)//Function.prototype
console.log(Object.__proto__)//Function.prototype
console.log(Object.prototype.__proto__)//null
复制代码
转载于:https://juejin.im/post/5cf646466fb9a07eb3096802