手把手教你学会js的原型与原型链，猴子都能看懂的教程_js原型教程(1)

3.1:原型对象中 constructor 与构造函数的关系

先说结论：原型对象中constructor是指向构造函数的。你可能会说 口说无凭，我要你证明给我看。既然你都有这样的疑问了，那我就满足你。

function Foo() {

}
var fo = new Foo();
console.log(Foo.prototype.constructor);//ƒ Foo() {}

打印结果

我们会发现Foo.prototype.constructor 是指向Foo这个构造函数的。下面我们在来做一步验证，看下是不是真的是这样。

function Foo() {
  
}
var fo = new Foo();
console.log(Foo.prototype.constructor===Foo);//true

我们会发现Foo.prototype.constructor===Foo是true,所以我们可以肯定的是Foo.prototype.constructor就是指向Foo函数的

所以原型对象中 constructor 与构造函数的关系图解如下：

3.2:原型对象中__proto__与构造函数的关系

你可能会想原型对象中的__proto__是不是指向Foo呢？其实不是的。看如下代码

console.log(Foo.prototype.__proto__===Foo)//false

我们会发现打印是false,那么它是指向的谁的呢？这个问题问的好，他到底指向谁,先打印看下就知道了 我们会惊奇的发现Foo.prototype.__proto__指向的是Object的原型。你可能又会有疑惑，为啥是Object?其实Object就是最顶层的原型，如果没有这层限制，当根据原型链去找一个不存在的数据，我们怎么会知道它没找到呢!!

所以我们可以的得出结论是Foo.prototype.__proto__指向的是Object.prototype

论证:Foo.prototype.__proto__是否指向的是Object.prototype

function Foo() {
  
}
var fo = new Foo();
console.log(Foo.prototype.__proto__===Object.prototype)//true

可以看出他们的打印是相等的，所以之前说的Foo.prototype.__proto__===Object.prototype结论是成立的。 细心的同学可能会有这样的疑问？Object.prototype__proto__指向谁呢？其实它指向的是null。

console.log(Object.prototype.__proto__)//null

其实到这里我们还可以继续丢出一个疑问？既然我们知道了Object的函数原型对象，那肯定有自己的constructor，那它的constructor是谁呢？下面我们继续探讨。

3.3:Object函数原型与constructor关系

结论：Object原型中的constructor指向的是Object函数。

代码验证如下：

console.log(Object.prototype.constructor)

打印后我们发现指向的是Object的函数，在继续进行验证

console.log(Object.prototype.constructor===Object)

所以在这里我们可以很确定看到Object.prototype.constructor就是指向Object函数的。既然Object是函数它肯定也是有自己的Prototype的，它的Prototype肯定是指向Object的函数原型对象的。

所以：Object函数原型与constructor关系

其实这里也已经形成了原型链了，我们是可以发现如果fo在自己的原型上找不到，他就会父类的原型上去找，这样一层层的向上查找，其实就像一个链条一样的，所以叫做原型链。当然这里也不是永无止境的，找到最后都找不到就返回了null。

其实到这里最基本原型知识我们差不多已经掌握了。但是其实我们可以继续来探讨下,Foo函数和Object函数它有没有__proto__呢？其实是有的，为什么？因为函数的本质其实也是一个对象，下面我们就对函数是不是一个对象的问题进行探讨。

4函数其实也是一个对象

function bar() {}
bar.names = "戈亚";
console.log(bar.names);

通过打印我们确实看到了names打印出来的，所以我们也能证明函数的确是一个对象，只不过是一个比较特殊的对象而已。所以我们可以说上面的Foo函数和Object函数也是一种对象。既然是对象它肯定也有自己__proto__,那么它的__proto__指向谁呢？

5函数的__proto__

结论：函数的__proto__其实是指向Functon原型对象。

下面来进行验证，具体代码如下

function Foo(){}
var p1 = new Foo();
console.log(Person.__proto__)

这个可能有点不明显,下面我们换种方法进行验证，如下：

function Foo() {}
var p1 = new Foo();   
console.log(Foo.__proto__)
console.log(Foo.__proto__===Function.prototype)
console.log(Object.__proto__===Function.prototype)
console.log(Foo.__proto__===Object.__proto__)

所以我们可以说函数的__proto__其实是指向Functon原型对象。即Object/Foo都是Fuction的实例对象

所以：函数的__proto__指向Function的原型的图解如下：

6Function的原型和原型链

6.1:Function原型中的指向

6.1.1：Function原型中的constructor

结论：Function原型中的constructor的指向Function函数

我们可以以Foo这个函数来做验证,代码如下：

 function Foo() {} 
//Foo.__proto__:这里其实已经是Function的原型对象了
console.log(Foo.__proto__.constructor === Function);

通过打印其实我们可以看出Function原型对象中的constructor其实是指向的Function函数。那么它的__proto__指向的是谁呢？

6.1.2:Function原型中的__proto__的指向

结论：Function原型中的__proto__指向的是Object的原型对象

 function Foo() {} 
//Foo.__proto__:这里其实已经是Function的原型对象了
  console.log(Foo.__proto__.__proto__===Object.prototype);

通过打印其实我们可以看出Function原型对象中的__proto__其实是指向Object的原型对象的。其实也很好理解，原型对象本来就是一个对象，既然是对象肯定有自己的原型，我们都知道所有对象的父类就是Object。

所以：Function原型对象的图解：

6.2:Function函数的原型

6.2.1:Function函数的原型中的prototype

我们通过前面的总结中是可以知道，函数中的prototype是指向该函数的原型对象的。所以我们这里是Function函数中的prototype就是指向Functon函数的原型对象。

6.2.2:Function函数的原型中的__proto__

结论：Function函数的原型中的__proto__是指向Funtion原型的。 代码如下：

console.log(Function.__proto__===Function.prototype)

React

• 介绍一下react

• React单项数据流

• react生命周期函数和react组件的生命周期

• react和Vue的原理，区别，亮点，作用

• reactJs的组件交流

• 有了解过react的虚拟DOM吗，虚拟DOM是怎么对比的呢

• 项目里用到了react，为什么要选择react，react有哪些好处

• 怎么获取真正的dom

• 选择react的原因

• react的生命周期函数

• setState之后的流程

• react高阶组件知道吗？

• React的jsx，函数式编程

• react的组件是通过什么去判断是否刷新的

• 如何配置React-Router

• 路由的动态加载模块

• Redux中间件是什么东西，接受几个参数

• redux请求中间件如何处理并发

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】