原型链详解「1」

原型链详解

1.对象类型

对象分为两种，普通对象和函数对象，Object和Function是JS自带的函数对象，下面举例说明

var o1 = {};
var o2 = new Object()
var o3 = new f1()

function f1(){}
var f2 = function(){}
var f3 = new Function('str','console.log(str)')

console.log(typeof o1) //object
console.log(typeof o2) //object
console.log(typeof o3) //object

console.log(typeof f1) //function
console.log(typeof f2) //function
console.log(typeof f3) //function

console.log(typeof Object) //function
console.log(typeof Function) //function

其中o1 o2 o3为普通对象，f1 f2 f3为函数对象，如何区分呢？其实很简单，只要是通过new Function()创建的都是函数对象，其他的都是普通对象，f1 f2归根结底都是通过new Function（）创建的，而且JS中自带的Object和Function都是通过new Function()创建的，所以打印typeof的时候返回的是function类型。

2.构造函数

下面，先来定义一个构造函数

function Person(name,age,sex){
    this.name = name
    this.age = age
    this.sex = sex
}
let person1 = new Person('rose',21,'女')
let person2 = new Person('John',25,'男')

上述例子中的person1和person2都是构造函数Person的实例，构造函数的实例都带有一个constructor属性，该属性是一个指针，指向自身的构造函数，也就是Person，所以以下等式成立

console.log(person1.constructor == Person) //true
console.log(person2.constructor == Person) //true

从上述中，提取出构造函数和实例的两个概念：

• person1和person2都是构造函数Person的实例
• 实例person1和person2都具有一个constructor属性指向自身的构造函数

3.原型对象

当在js中定义一个对象的时候（函数也是对象，只不过是对象的一种特殊形式），都会包含一些预定义的属性。其中每个函数对象都会带有一个prototype属性，这个属性也是一个指针，指向函数的原型对象

function Person(){}
Person.prototype.name = 'John'
Person.prototype.age = 25
Person.prototype.sex = '男'
Person.prototype.sayName = function(){
  console.log(this.name)
}
let p1 = new Person(); 
p1.sayName() // John
let p2 = new Person();
p2.sayName() // John
console.log(p1.sayName() === p2.sayName()) // true

下面我们打印一下p1这个实例：

这个_proto_是什么东西？下面先看一张图

这张图中主要存在三个角色，构造函数（Person）、远行对象（Person.Prototype）、实例（person1、person2）
那么他们三个之间的关系是什么样的呢？
从图中可以看出构造函数Person具有一个prototype属性实例中具有[[prototype]]属性，其实这个[[prototype]]就是浏览器控制台打印出的_proto_，接下来我们再看：

展开这个proto对象，我们可以看到这个对象中存在着一个叫constructor的属性，并且值是Person的函数，这就符合了上面讲述的**实例的constructor属性指向自身的构造函数这个概念。**而且这个对象中还存在一个proto属性，下面我们展开这个proto属性：

展开这个proto对象我们发现，这里面存在着一些Object原生的方法，toString、valueOf等等等等，并且这里面不再存在proto属性，到这里你是不是发现了一些端倪？好，下面我们继续说一下prototype。
在刚才展开的对象中我们没有看到prototype这个属性，这是为什么呢？事先声明一下，prototype是函数对象才具有的一个属性，那么函数对象在哪呢？这时候就用到了刚才提到的constructor属性，因为constructor是实例用来指向自身构造函数的一个属性，我们来看：

我们打开这个函数对象，果不其然，里面带有prototype属性，并且还带有proto属性（任何对象都带有proto属性，因为函数也是对象，只不过是对象的一种特殊形式），下面我们展开这个prototype对象：

为什么prototype属性又不见了？因为刚才说过，只有函数对象才具有prototype属性，因为原型对象是一个普通对象，所以当然没有prototype属性啦，但是具有proto属性，同样这个proto属性也是指向Object，同时在这个对象中我们还看到了constructor属性，指向的还是Person构造函数。
原型对象和构造函数的关系是什么样的呢？因为实例带有constructor属性并且指向其构造函数，原型对象也具有一个constructor属性，同样指向它的构造函数，就有以下等式：

person1.constructor == Person
Person.prototype.constructor == Person
//那么以下等式成立
person1.constructor == Person.prototype.constructor
//person1和Person.prototype存在着什么样的关系呢？

那么就得出了以下结论：

• 当定义一个对象的时候，任何对象都具有proto属性，只有函数对象才具有prototype属性
• 通过proto属性会形成一个链，这个链会逐级向上，直到Object.prototype，Object.prototype的proto是null，这也就是所谓的原型链
• 实例和原型对象都具有一个constructor属性指向它的构造函数
• 实例的proto指向了其构造函数的原型对象
• 原型对象是构造函数的一个实例
  总结如下图：
  
  原型对象其实就是普通对象，但是Function.prototype除外，它是函数对象，但是它并没有prototype属性，前文说过函数对象都具有prototype属性，但是这个对象很特殊，所以要特别记住

console.log(Function.prototype.prototype) //undefined

Function的原型对象的constructor属性指向的是他本身，这点和其他的原型对象相同

console.log(Function.prototype.constructor == Function) //true

那么为什么说Function.prototype是函数对象呢？
上文提到过函数的几种命名方式，其中一种是let a = new Function()一般来说new构造函数生成的实例应该是普通对象，但是a为函数对象，因为a和Function.prototype都是Function的实例，他们两个的类型一致，所以，Function.prototype是一个不具有prototype属性的函数对象。
下一章我们详细讲述一下_proto_这属性