文章有点长，耐心看完，希望你有所收获！！！

创建一个对象

function User(){}
var person = new User() 
person.name = 'kattes'
person.age = 24

1. 每个函数都有一个prototype属性，那这个属性指向哪里呢？是这个函数的原型吗？
   其实，函数的prototype指向了一个对象，这个对象就是正在调用该构造函数而创建的实例的原型，也就是这个例子中的person的原型。
2. 那什么是原型呢？
   每个JavaScript对象（null除外）在创建的时候都会关联另一个对象，这个对象就是我们所说的原型，每一个对象都会从原型继承属性。

_ _ proto_ _

每一个JavaScript对象（null除外）都具有的一个属性叫 __proto__ , 这个属性指向该对象的原型。

function User(){}
var person = new User()
person.name = 'Kattes'
person.age = 24
console.log( person.__proto__  === User.prototype ); // true

既然实例对象和构造函数都可以指向原型，那么原型是否有属性指向构造函数或实例对象呢？

constructor

每个原型都有一个constructor属性指向关联的构造函数。

function User(){}
console.log(User === User.prototype.constructor); // true

实例与原型

例一：

var obj = new Object()
console.log( obj ) // {}
console.log( obj.toString() )  // [object Object]

上面这段代码,obj明明是空的,却为什么还能调用toString方法?这toString方法是哪里来的呢?

例二：

var arr = new Array()
console.log( arr.push ) //ƒ push() { [native code] }
console.log( arr.sort )  //ƒ sort() { [native code] }
console.log( arr.shift )  // ƒ shift() { [native code] }
console.log( arr.indexOf )  //ƒ indexOf() { [native code] }

通过例一例二不难看出，其实这些方法都来自于这个叫做原型的家伙。
接下来，我们用 对象.__proto__ 的方式将原型打印一下， 打印结果如下：

image.png

这是所有对象的一个隐式属性, 也就是正常情况下打印对象, 我们是看不到这个属性的，但我们依然可以通过__proto__ 这样一个比较奇怪的属性名字来访问原型对象，这个属性名称访问起来确实不够方便,实际上它还有另外一种访问方式，也是一种比较正式的访问方式, 就是通过函数名来访问。如下：

var obj = new Object()
console.log( obj.__proto__ ) // 通过实例访问原型
console.log( Object.prototype ) // 通过构造函数访问原型
console.log( obj.__proto__ === Obejct.prototype ) // true

原型链

那Object.prototype的原型呢 ？null ? 我们可以打印看一下

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

所以 Object.prototype. __proto__ 的值为 null 跟 Object.prototype 没有原型，其实表达了一个意思。
所以查找属性的时候查到 Object.prototype 就可以停止查找了。

通过以上例子，是否产生了如下疑问？

1.原型对象中的所有属性,实例对象都能随便访问吗?
2.每个实例对象都有自己的原型对象, 还是大家共用一个?
3.实例对象自己的属性和原型的属性冲突了, 会访问谁呢?
4.原型对象跟继承有什么关系?
5.原型链又是怎么来的?
疑问1 ：原型对象中的所有属性,实例对象都能随便访问吗?

function Animal(){}
Animal.prototype.age = 10
Animal.prototype.color = "yellow"
Animal.prototype.shout = function () {
    console.log("汪汪汪")
}
Animal.prototype.eat = function () {
    console.log("我要吃肉肉")
}
// 创建一个构造函数Animal，添加age、color两个属性，添加了shout、eat两个方法,接下来通过实例访问。
var dog = new Animal()
console.log( dog.age ) // 10
console.log( dog.color ) // yellow
dog.shout() //汪汪汪
dog.eat() //我要吃肉肉
// 结论 ： 原型对象中的所有属性,实例对象都能随便访问

疑问2 ：每个实例对象都有自己的原型对象, 还是大家共用一个?

function User(){}
let person1 = new User();
let person2 = new User();
console.log( person1.__proto__ === User.prototype ) // true
console.log( person2.__proto__ === User.prototype ) // true
console.log( person1.__proto__ === person2.__proto__) // true
// 结论 ： 所有实例对象共享同一个原型对象

疑问3 ：实例对象自己的属性和原型的属性冲突了, 会访问谁呢?

function User() { } 
User.prototype.name = 'Kattes';
var person = new User();
person.name = 'suncunxu';
console.log(person.name); // suncunxu
delete person.name; // 删除 person.name 属性
console.log(person.name) // Kattes
// 结论： 如果对象本身存在这个属性或方法, 会优先访问自己的，如果没有, 则访问原型的属性

注：当读取实例的属性时，如果找不到，就会查找对象的原型中的属性，如果还查不到就去原型的原型继续查找，一直找到最顶层为止。

疑问4、疑问5 ：原型对象跟继承有什么关系? 原型链又是怎么来的?
再思考一个问题，如果原型也是一个对象，那么它必然也应该有自己的原型对象,不是吗?那么我们可以通过 person.
__proto__.__proto__ 进行访问。

image.png

实例对象
实例对象.__proto__
实例对象.__proto__.__proto__
实例对象.__proto__.__proto__.__proto__

所以，原型链就是因此而来，因此而得名。
补充问题
原型对象真没有尽头吗？
答：当然不是，原型对象由浏览器自动创建, 当然也有它自己的规则
规则如下：
1.每个构造函数在诞生的时候, 都会创建一个该函数的实例对象作为默认原型
答：Person.prototype = new User();
2.而这个原型对象的原型, 则默认指向Object.prototype
答：Person.prototype.__proto__ = Object.prototype;
3.当然, Object.prototype 也是它自己的实例
答：Object.prototype = new Object();

4. 但是, Object.prototype不再拥有原型对象
   答：Object.prototype.__proto__ = null
5. 因此,原型对象是有上限的
   person1.__proto__ 可访问
   person1.__proto__.__proto__ 可访问
   person1.__proto__.__proto__.__proto__ 为null

原型作用：（拓展作用）

function User(){
    this.age = 24
}
User.prototype.name = 'kattes'
let person = new User()
console.log( person.name ) //'kattes'

总结： 如果所有实例对象都有共同的方法或者属性，那么可以尝试将这个方法或者属性放在原型里面。（如上面的name属性）

instanceof （拓展）

例：a instanceof b => 表示判断对象a的原型链(__proto__)上有没有一个是b函数的prototype，如果有，那么 a instanceof b == true,如果没有，那么a instanceof b == false。由于一般所有的原型链最终都会指向顶端的Object.prototype，所以它们(任何对象) instanceof Object.prototype 基本上都等于 true。

Object 和 Function 的关系

Object

在javaScript中任何东西都是对象，任何一个对象内部都有另一个对象叫__proto__，即原型，当然对象的proto本身也是一个对象，它自己也有自己的proto，这样一级一级向上，就构成了一个proto链，即原型链。当然原型链不会无限向上，它有个终点，可以称为原型链的顶端Object.prototype，它是一个特殊的对象，它的proto为null。

obj.__proto__.__proto__......__proto__ === null;

但是对象并不是凭空产生的，它一般是某一个class，确切说是构造函数的实例。JavaScript和其它面向对象的语言不太一样，它没有所谓的class，而是用函数来模拟class。定义了一个函数，实际上就定义了一个class，函数本身就是class的constructor，例如：

function foo(){}
let a = new foo()

通过上面的例子得出:

a.__proto__ === foo.prototype;

当然foo.prototype也是个对象，它自然也有proto，默认指向Object.prototype，即：

foo.prototype.__proto__ === Object.prototype;

而Object.prototype已经没有原型了，它的__proto__是null。这是JavaScript里一个很特殊的对象，它就是原型链的顶端。以上就构成了由对象a开始的原型链：

a.__proto__ == foo.prototype; 
a.__proto__.__proto__ == Object.prototype; 
foo.prototype.__proto__ == Object.prototype;

因此：

a instanceof foo === true;
a instanceof Object === true;

Function

上面说了，JavaScript里任何东西都是对象，包括函数，可以称为函数对象。所以foo也是对象，那foo的原型proto是什么？它是谁的instance？
JavaScript里定义了一个特殊的函数叫Function，可以称作是所有函数的爸爸，所有的函数都是它的实例，因此你可以认为，定义foo的时候发生了这样的事情：

let foo = new Function(args, function_body);

因此：

foo.__proto__ === Function.prototype;
foo instanceof Function === true;

注意这里的Function.prototype，这也是JavaScript里一个特殊的对象，Chrome的console里要是输入Function.prototype，根本什么也打印不出来，如打印什么 native code，就是说它是内部实现的。
这个原型链还没到顶，Function.prototype仍然有原型proto，指向Object.prototype，所以我们最终有：

Function.prototype.__proto__ == Object.prototype
foo.__proto__.__proto__ === Object.prototype;
foo instanceof Object === true;

现在有个问题来了，那Function自己呢？它其实也是个函数，也是个对象，它的proto指向谁？答案是它自己的prototype，即：

Function.__proto__ === Function.prototype;
Function instanceof Function === true;
Function.__proto__.__proto__ === Object.prototype;
Function instanceof Object === true;

总结一下：所有的函数 instanceof Function === true，当然Function instanceof Function === true，不过后者严格来说并不准确，Function并不是它自己创造自己的，而应该看作JavaScript里原生的一个函数对象，只不过它的__proto__指向了它自己的prototype而已。

Object 与 JavaScript 的关系

这是JavaScript比较奇葩的一个地方，也是不太让人容易接受的一点。
我们知道一般任何对象都是Object的instance，因为原型链的顶端都指向Object.prototype。那么Object本身是什么？Object也是个函数，而任何函数都是Function的实例对象，比如Array，String，当然Object也包括在内，它也是Function的实例，即：

Object.__proto__ === Function.prototype;
Object instanceof Function === true

同时，Function是个对象，它的原型是Function.proto，指向Function.prototype，并且这个原型链向上继续指向Object.prototype，即：

Function.__proto__.__proto__ === Object.prototype;
Function instanceof Object === true

因此，JavaScript在这里就出现了常见的蛋鸡问题（先有鸡还是先有蛋）：

Object instanceof Function === true
Function instanceof Object === true

到底谁先谁后，谁主谁次？好吧，这个问题我就不讨论了，此文章编不下去了，深究也没啥意义，实在要分主次的话，无非就是比谁嗓门儿大，谁打架更厉害而已，但foo instanceof function 并不意味着obj就是这个function创建出来的，只不过是foo的原型链上有function.prototype而已。

文章总结：以上就是JavaScript的原型、原型链以及拓展知识，文章比较长，希望你能耐心看完并有所收获，当然也很开心你能看到这儿，如你有更好的方式方法，请留言告知，相互学习才能更快进步.