前言

现代程序中如Java、C++、PHP 都是有类的概念，然后就会有封装、继承、多态...，但是在js中是没有类的概念，只有原型对象、原型链，所以深入理解原型对象、原型链还是蛮重要的

概念

js对象

js对象的创建方式有以下几种

var obj1 = {};
var obj2 = new Object();

function Person(name){
    this.name = name
}
var obj3 = new Person('张三')

构造函数

构造函数其实跟普通的函数一样，区别就是调用时前面加new，此时这个函数就被称为构造函数。还有一点区分是写法区分，大家喜欢把普通函数首字母小写，构造函数首字母大写，就像"类"一样。但是写成小写也是可以的

 function hello(name) {
     this.name = name
 }
 hello('123') // 普通函数 this指代window
 new hello('123') // 构造函数 this就是当前生成的对象
 
 function Person(name){
     this.name = name
 }
 var p = new Person('123') // 构造函数
 

原型对象

构造函数的prototype

Person.prototype就是构造函数的原型对象，它有一个constructor属性，指向当前构造函数Person

console.log(Person.prototype) // 原型对象
Person.prototype.constructor === Person  // 准则1

实例对象的__proto__

p.__proto__ === Person.prototype  // 准则2

我们知道这两个准则之后就可以分析上面的图了

实践

// 首先从最下面最简单的开始
function Foo(){}
var foo = new Foo();
foo.__proto__ === Foo.prototype //准则2

Foo.prototype.__proto__ === Object.prototype; //Foo.prototype是原型对象本质是对象，由Object生成，然后参照准则2
Object.prototype.__proto__ === null //原型型结束

Foo.prototype.constructor === Foo; ///准则1
Foo.__proto__ === Function.prototype //Foo是由Function产生的，然后参照准则2
Function.prototype.__proto__ === Object.prototype; //Function.prototype是原型对象本质是对象，由Object生成，然后参照准则2
Object.prototype.__proto__ === null //原型型结束

var obj = new Object();
obj.__proto__ === Object.prototype; //准则2
Object.prototype.constructor === Object; ///准则1
Object.prototype.__proto__ === null //原型型结束


Function.prototype.constructor === Function;
Function.prototype.__proto__ === Object.prototype; //Function.prototype是原型对象本质是对象，由Object生成，然后参照准则2
Object.prototype.__proto__ === null //原型型结束

// Function的构造函数是它本身
Function.__proto__ === Function.prototype
Function.constructor === Function

总结

1.普通对象的原型对象是构造函数的prototype，构造函数的prototype的原型对象是Object.prototype，Object.prototype的原型对象是null。

p.__proto__ === Person.prototype;
Person.prototype.__proto__ === Object.prototype;
Object.prototype.__proto__ === null;

2.所有的函数都是由Function创建的，包括Object、Array、Function。

Person.__proto__ === Function.prototype;
Object.__proto__ === Function.prototype;
Function.__proto__ === Function.prototype;

3.所有构造函数（除Object）原型对象的原型对象最终都是指向Object.prototype，而Object.prototype的原型对象是null。

Person.prototype.__proto__ === Object.prototype;
Function.prototype.__proto__ === Object.prototype;
Object.prototype.__proto__ === null;

结语

本文只是简单讲解了下原型对象、原型链的概念，深入理解原型对象、原型链(二)我们具体说说应用