原型链
原型链实际上是JavaScript中的完成继续的机制，在搞懂原型链之前起首要搞懂几个观点：this，一般对象和函数对象，组织函数，new
this
this关于很多人来讲是殽杂不清的观点，然则想要弄清楚原型链我们必需相识什么是this
起首，this只能在存在与函数中
其次，this实际上是当前函数地点上下文环境，再简朴一点也能够理解为this返回一个当前函数地点的对象，也就是说想要晓得this是什么我们只需要关注是谁挪用了this地点的函数就能够了
如下边的代码zhao.sayName()是zhao挪用的sayName函数所以sayName中的this天然指的就是zhao这个对象，而下方 var liName = zhao.sayName语句是将sayName这个函数赋值给liName，挪用liName就相当于在最顶层也就是window下直接挪用sayName,this的指向天然就是window这个最顶层对象
var name = "Li"
var zhao = {
name: "Zhao",
sayName: function () {
console.log(this.name);
}
}
zhao.sayName() // Zhao
var liName = zhao.sayName;
liName() // Li一般对象与函数对象
JavaScript中一切都能够看做对象，然则实际上对象也是有区分的，对象分为一般对象和函数对象
// 一般对象
var o1 = {}
var o2 = new Object()
var o3 = new f1()
// 函数对象
function f1(){}
var f2 = function(){}
var f3 = new Function()
console.log(typeof f1); //function
console.log(f1.prototype); //true
console.log(typeof f2); //function
console.log(f2.prototype); //true
console.log(typeof f3); //function
console.log(f3.prototype); //true
console.log(typeof o1); //object
console.log(o1.prototype); //undefined
console.log(typeof o2); //object
console.log(o2.prototype); //undefined
console.log(typeof o3); //object
console.log(o3.prototype); //undefined通常经由过程function构建的对象都是函数对象,而且只要函数对象才有prototype属性，一般对象没有
prototype 原型
prototype又是什么呢？
当我们建立函数的时刻，编译器会自动为该函数建立一个prototype属性，这和属性指向一个包括constructor属性的对象，而这个属性又默许指回原函数，读起来有点绕对吧，大概是如许的
function Person() {
// prototype = {
// constructor: Person,
// }
}每一个函数对象都有一个prototype（原型）属性，在我看来prototype属性的意义：
- 建立对象的模板
- 公然的同享空间
这两点等进修了下边new敕令你就会邃晓了
constructor 组织函数
函数对象的一种用法就是组织函数，经由过程组织函数能够构建一个函数对象的实例（一般对象）
function Person(name, age ){
this.name = name;
this.age = age;
this.sayHello = function(){
console.log(`Hello! my name is ${this.name}`);
};
}
var person1 = new Person("kidder", 28);
person1.sayHello(); // Hello! my name is kidder
console.log(person1.constructor); //[Function:Person]根据通例，组织函数的定名以大写字母开首，非组织函数以小写字母开首,经由过程组织函数组织的一般对象都邑有一个constructor（组织函数）属性，该属性指向组织该对象的组织函数
new敕令
new敕令的事情机制
- 建立一个空对象作为要返回对象的实例
- 将这个空对象的原型(__ proto __)指向组织函数的prototype属性
- 将这个空对象赋值给组织函数内部的this
- 实行组织函数内部的代码
原型链
下面我们来看看组织函数构建一个一般对象的时刻发作了什么
var Person = function (name) {
this.name = name;
this.age = 18;
};
Person.prototype.sayHello = function(){
console.log(`Hello! my name is ${this.name}`);
};
var li = new Person("Li");
console.log(li.name); // Li
console.log(li.age); // 18
li.sayHello(); // Hello! my name is Li- 建立一个空对象作为要返回对象的实例
{}- 将这个空对象的原型(__ proto __)指向组织函数的prototype属性
{
__proto__:Person.prototype;
}- 将这个空对象赋值给组织函数内部的this
this = {
__proto__:Person.prototype;
}实行组织函数内部的代码
this = { __proto__:Person.prototype; name: "Li"; age: 18; }
所以li这个对象中只要name和age两个属性，为何li.sayHello()会输出Hello! my name is Li呢？
这就是原型链，当给定的属性在当前对象中找不到的状况下，会沿着__proto__这个属性一向向对象的上游去寻觅，直到__proto__这个属性指向null为止，假如找到指定属性，查找就会被截断，住手
上面这张图是悉数JavaScript的原型链系统，为了让这张图更直观所以我将组织函数的prototype属性零丁提了出来，恩，实在画在组织函数内部也可，但同时由于对象是援用范例，所以如许画也没缺点吧
_ proto _ 和 prototype
这两个属性常常会被我们殽杂，那末我们回过甚再来总结一下
prototype：只要函数对象才具有的属性，它用来寄存的是组织函数愿望构建的实例具有的同享的属性和要领，主要用于组织函数的实例化
_proto_ : 一切对象都具有的属性，它指向的是当前对象在原型链上的上级对象，主要作用是让编译器在由__proto__这个属性组成的原型链上查找特定的属性和要领
补充
prototype的同享属性
var Person = function (name) {
this.name = name;
this.age = 18;
};
Person.prototype.sayHello = function(){
console.log(`Hello! my name is ${this.name}`);
};
var li = new Person("Li");
var Person1 = function () {
};
Person.prototype.name = "Li"
Person.prototype.age = 18
Person.prototype.sayHello = function(){
console.log(`Hello! my name is ${this.name}`);
};
var Li = new Person1();
关于Person和Person1两种组织函数的写法有什么差别呢？
一般来讲写在prototype原型对象中的属性和要领都是公用的，也就是说写在组织函数中的属性在构建一般对象的时刻，都邑在新对象中从新定义，也就是从内存的角度来讲又会多占用一些内存空间，所以我们将组织函数的一切属性和要领都写在prototype原型中不好吗？
然则原型函数也是有缺点的：
- 不够天真
var Person = function () {
};
Person.prototype.name = "Li"
Person.prototype.age = 18
Person.prototype.sayHello = function(){
console.log(`Hello! my name is ${this.name}`);
};
var li = new Person();
var zhao = new Person();这类体式格局组织的一切对象都是一个模板，虽然我们也能够在当前对象下举行修正，但如许一点也不文雅，不规整，而且从某种意义上来讲也是对内存的糟蹋
- 关于援用范例的修正会被悉数同享
var Person = function () {
};
Person.prototype.name = "Li"
Person.prototype.age = 18
Person.prototype.friends = ["ZhangSan", "LiSi"]
Person.prototype.sayHello = function(){
console.log(`Hello! my name is ${this.name}`);
};
var li = new Person();
var zhao = new Person();
li.friends.push("WangWu");
console.log(zhao.friends); // [ 'ZhangSan', 'LiSi', 'WangWu' ]在JavaScript中，基础范例的修正能够明白的经由过程建立或修正在当前对象下的属性对原型链举行截断，然则像数组，对象这类援用范例的值虽然也能够经由过程在当前对象中建立该属性来对原型链举行截断，然则一不注意就可能会涌现上面这类状况直接对原型举行了修正
组织函数与原型相结合
所以，用组织函数来定义实例属性，用原型定义要领和同享的属性，如许写就比较文雅了
function Person(name, age){
this.name = name;
this.age = age;
this.friends = ["ZhangSan", "LiSi"];
}
Person.prototype.sayHello = function(){
console.log(`Hello! my name is ${this.name},${this.age}岁了`);
};
var li = new Person("li", 18);
var zhao = new Person("zhao", 16);
li.sayHello();
// Hello! my name is li, 18岁了
zhao.sayHello();
// Hello! my name is zhao,16岁了
li.friends.push("WangWu");
console.log(zhao.friends);
// [ 'ZhangSan', 'LiSi' ]建立对象的几种体式格局
- 组织函数体式格局
法一用组织函数组织一个新对象
var A = function () { };
var a = new A();
console.log(a.constructor); // [Function:A]
console.log(a.__proto__ === A.prototype); //true
- 字面量体式格局
法二的实质来讲和法一是一样的,就是隐式挪用原生组织函数Object来组织新对象
var a = {};
// var a = new Object();
console.log(a.constructor); // [Function:Object]
console.log(a.__proto__ === Object.prototype); //true
- create体式格局
法三Object.create是以一个一般对象为模板建立一个新对象
var a1 = {a:1}
var a2 = Object.create(a1);
console.log(a2.constructor); // [Function:Object]
console.log(a2.__proto__ === a1);// true
console.log(a2.__proto__ === a1.prototype); //false
所以除了Object.create建立对象的体式格局，能够说：__ proto __ === constructor.prototype;
constructor
前面我们说道prototype的时刻举行原型属性的赋值的时刻，采纳的是逐项赋值，那末当我直接将对象赋值给prototype属性的时刻会发作什么呢？
function Person() { }
Person.prototype = {
name : "Li",
age : 18,
sayHello : function () {
console.log(`Hello! my name is ${this.name},${this.age}岁了`);
}
};
var li = new Person();
console.log(li instanceof Object); // true
console.log(li instanceof Person); // true
console.log(li.constructor === Person); // false
console.log(li.constructor === Object); // true
console.log(Person.prototype.constructor); // Object这时刻我们就发明我们构建的li对象的constructor不再指向它的组织函数Person，而是指向了Object,而且Person原型Person.prototype的constructor指向也指向了Object，这是什么原因呢？
实在，泉源涌现在Person.prototype上，上边我们提到过，实在我们在写组织函数的时刻实际上是如许的
function Person() {
// prototype = {
// constructor : Person
// }
}当我们构建Person组织函数的时刻，编译器会自动天生一个带有指向Person的constructor属性的对象，并把这个对象赋值给Person.prototype，我们又晓得js中对象是援用范例，当我们运用Person.prototype.name=…的时刻实际上是对这个对象的修正，而运用Person.prototype={…}实际上是将这个属性底本的指针指向了另一个新建立的对象而不是本来编译器自动建立的谁人：
而li的constructor属性天然是继续自Person.prototype,所以constructor天然也就随着改变了，假如在编程的过程当中constructor这个属性很主要的话能够经由过程下面的体式格局
function Person() { }
Person.prototype = {
constructor：Person
name : "Li",
age : 18,
sayHello : function () {
console.log(`Hello! my name is ${this.name},${this.age}岁了`);
}
};
var li = new Person();
console.log(li instanceof Object); // true
console.log(li instanceof Person); // true
console.log(li.constructor === Person); // true
console.log(li.constructor === Object); // false
console.log(Person.prototype.constructor); // Person结语：
参考：《JavaScript高等程序设计》
这是我对JS原型链部份的总结与思索，也是我写的第一篇这么正式的手艺文档，若有马虎的地方，迎接人人批评指正
