彻底弄懂原型、原型链

1. 关于构造函数的一切

构造函数是一种特殊的函数，主要用来初始化对象，即为对象成员变量赋初始值，它总与 new 一起使用。我们可以把对象中一些公共的属性和方法抽取出来，然后封装到这个函数里面。构造函数用于创建某一类对象，其首字母要大写且构造函数要和 new 一起使用才有意义。如果通过new操作符来调用的，就是构造函数，如果没有通过new操作符来调用的，就是普通函数。

构造函数执行过程

new 在执行时会做四件事情：
① 在内存中创建一个新的空对象。
② 让 this 指向这个新的对象。
③ 执行构造函数里面的代码，给这个新对象添加属性和方法。
④ 返回这个新对象（所以构造函数里面不需要 return ）。

构造函数的成员

JavaScript 的构造函数中可以添加一些成员，可以在构造函数本身上添加，也可以在构造函数内部的 this 上添加。通过这两种方式添加的成员，就分别称为静态成员和实例成员。

//静态成员 在构造函数本身上添加的成员 sex 就是静态成员
//静态成员只能通过构造函数来访问
Person.sex = '男'; 
console.log(Person.sex);

//实例成员：在构造函数内部创建的对象成员，只能由实例化的对象来访问
function Person(uname) {
      this.uname = uname;
      }

2. 原型prototype和__proto__

原型的作用

1.数据共享 节约内存内存空间
2.实现继承
注意：函数也是一个对象，对象不一定是函数。(对象有__proto属性，函数有prototype属性)此处说明，方便大家理解下文。
每个对象都有一个proto__属性，并且指向它的prototype原型对象（刚开始默认指向一个object空对象）

function Fn(){
}
var fn = new Fn()   //Fn是构造函数，fn 是Fn的实例对象
console.log(Fn.prototype===fn.__proto__)   //true

JavaScript 规定，每个构造函数都有一个prototype原型对象，且prototype原型对象里的constructor指向构造函数本身，constructor 主要用于记录该对象引用于哪个构造函数，它可以让原型对象重新指向原来的构造函数。prototype原型对象的所有属性和方法，都会被构造函数所拥有。我们可以把那些不变的方法，直接定义在 prototype 对象上，这样所有对象的实例就可以共享这些方法。

那么prototype 和 __proto__有什么用呢？
答案：实例对象的__proto__指向构造函数的prototype，从而实现继承。
prototype对象相当于特定类型所有实例对象都可以访问的公共容器。

原型对象this指向

1. 构造函数中的this 指向我们实例对象
2. 原型对象里面放的是方法, 这个方法里面的this 指向的是 这个方法的调用者, 也就是这个实例对象

看看代码就清楚了

function Person(name, age){
    this.name = name;
    this.age = age;
}
Person.prototype.sayName = function(){
    console.log(this.name);
}
var p1 = new Person('lilei', 20);
var p2 = new Person('hanmeimei', 25);
p1.sayName()  // lilei
p2.sayName()  // hanmeimei
p1.__proto__ === Person.prototype       //true
p2.__proto__ === Person.prototype   //true
p1.__proto__ === p2.__proto__           //true
Person.prototype.constructor === Person  //true

注意：
当Object.prototype.proto 已被大多数浏览器厂商所支持的今天，其存在和确切行为仅在ECMAScript 2015规范（ES6）中被标准化为传统功能，以确保Web浏览器的兼容性。为了更好的支持，建议只使用 Object.getPrototypeOf()。

原型语法

从前面介绍原型对象于实例对象及构造函数的关系中，我们已经知道，给原型对象添加属性和方法只要像这样定义即可：Person.prototype=name。

那么是否每定义一个Person的属性，就要敲一遍Person.prototype呢？答案是否定的，我们也可以像用对象字面量创建对象那样来创建原型对象：

从前面介绍原型对象于实例对象及构造函数的关系中，我们已经知道，给原型对象添加属性和方法只要像这样定义即可：Person.prototype=name。

那么是否每定义一个Person的属性，就要敲一遍Person.prototype呢？答案是否定的，我们也可以像用对象字面量创建对象那样来创建原型对象：

function Person(){
}
Person.prototype={
  name:"Tom",
  age:29
}
var p1=new Person();
alert(p1.name); //Tom
alert(p1.age); //29

有一点要注意，这个方法相当于重写了整个原型对象，因此切断了它与构造函数的关系，此时Person.prototype.constructor不再指向Person：

function Person(){
}
Person.prototype={
  name:"Tom",
  age:29
}
var p1=new Person();
alert(Person.prototype.constructor==Person); //false
alert(Person.prototype.constructor==Object); //true

因此，如果想要让它重新指向Person，可以显示的进行赋值：

function Person(){
}
Person.prototype={
 constructor:Person,
 name:"Tom",
 age:29
}
var p1=new Person();
alert(Person.prototype.constructor==Person); //true
alert(Person.prototype.constructor==Object); //false

总结
最后，我们拿一个例子，再来理理构造函数、原型对象以及实例对象之间的关系：

function Person(name,age){
  this.name=name;
  this.age=age;
}
Person.prototype.sayName=function(){
  alert(this.name);
}
var p1=new Person("Tom",20);
alert(Person.prototype); //object
alert(Person.prototype.constructor==Person); //true
alert(p1.constructor==Person); //true
alert(p1.__proto__==Person.prototype); //true
alert(p1.__proto__.__proto__==Object.prototype); //true
alert(p1.__proto__.__proto__.constructor==Object); //true
alert(Person.constructor==Function); //true
alert(Object.prototype.constructor==Object);

3. 原型链

按照之前的理论，如果自身没有该方法，我们应该去Array.prototype对象里去找，但是你会发现arr.__proto__上压根就没有valueOf方法，那它是从哪里来的呢？

那为什么我们在Array.prototype.__proto__里找到了valueOf方法呢？
这就需要探讨一下查找valueOf方法的过程了。
当我们试图去访问一个对象的属性时，它不仅仅在该对象上搜寻，还会搜寻该对象的原型，以及该对象的原型的原型（爸爸没钱问爷爷要），依次层层向上搜索，直到找到一个名字匹配属性或到达原型链的末尾（null）。
查找valueOf的过程

1. 当前实例对象obj，查找obj的属性或方法，找到后返回。

2. 没有找到，通过obj. proto，找到obj构造函数的prototype并且查找上面的属性和方法，找到后返回。

3. 没有找到，把Array.prototype当做obj，重复以上步骤
   当然不会一直找下去，原型链是有终点的，最后查找到Object.prototype时，Object.prototype.proto === null，意味着查找结束。

我们来看看上图的关系

arr.__proto__ === Array.prototype
true
Array.prototype.__proto__ === Object.prototype
true
arr.__proto__.__proto__ === Object.prototype
true

// 原型链的终点
console.log(Object.prototype.__proto__ === null)//true

console.log(Object.prototype.proto === null)//true
原型链如下：
arr —> Array.prototype —> Object.prototype —> null
这就是传说中的原型链，层层向上查找，最后还没有就返回undefined

4. 构造函数、原型与实例之间的关系

每个构造函数都有一个原型对象，原型对象都包含一个指向构造函数的指针（constructor），而实例都包含一个指向原型对象的内部指针(proto)。
那么假如我们让原型对象等于另一个类型的实例，结果会怎样？显然，此时的原型对象将包含一个指向另一个原型的指针，相应地，另一个原型中也包含着一个指向另一个构造函数的指针。假如另一个原型又是另一个类型的实例，那么上述关系依然成立。如此层层递进，就构成了实例与原型的链条。这就是所谓的原型链的基本概念。

图中由相互关联的原型组成的链状结构就是原型链，也就是蓝色的这条线。

5. 关于继承

继承是指一个对象直接使用另外一个对象的属性和方法。

由此可见只要实现属性和方法的继承，就达到继承的效果，

• 得到一个对象的属性
• 得到一个对象的方法

属性如何继承？

我们先创建一个Person类

function Person (name, age) {
    this.name = name
    this.age = age
}

// 方法定义在构造函数的原型上
Person.prototype.getName = function () { console.log(this.name)}

此时我想创建一个Teacher类，我希望它可以继承Person所有的属性，并且额外添加属于自己特定的属性；

一个新的属性，subject——这个属性包含了教师教授的学科。

定义Teacher的构造函数

function Teacher (name, age, subject) {
    Person.call(this, name, age)
    this.subject = subject
}

属性的继承是通过在一个类内执行另外一个类的构造函数，通过call指定this为当前执行环境，这样就可以得到另外一个类的所有属性。

我们实例化一下看看

var teacher = new Teacher('jack', 25, Math)

teacher.age
25
teacher.name
"jack"

很明显Teacher成功继承了Person的属性

方法如何继承？

我们需要让Teacher从Person的原型对象里继承方法。我们要怎么做呢？

我们都知道类的方法都定义在prototype里，那其实我们只需要把Person.prototype的备份赋值给Teacher.prototype即可

Teacher.prototype = Object.create(Person.prototype)

Object.create简单说就是新建一个对象，使用现有的对象赋值给新建对象的__proto__

可能有人会问为什么是备份呢？

因为如果直接赋值，那会是引用关系，意味着修改Teacher. prototype，也会同时修改Person.prototype，这是不合理的。

另外注意一点就是，在给Teacher类添加方法时，应该在修改prototype以后，否则会被覆盖掉，原因是赋值前后的属性值是不同的对象。

最后还有一个问题，我们都知道prototype里有个属性constructor指向构造函数本身，但是因为我们是复制其他类的prototype，所以这个指向是不对的，需要更正一下。
如果不修改，会导致我们类型判断出错

继承方法的最终方案：

Teacher.prototype = Object.create(Person.prototype)
Teacher.prototype.constructor = Teacher

hasOwnProperty

在原型链上查询属性比较耗时，对性能有影响，试图访问不存在的属性时会遍历整个原型链。

遍历对象属性时，每个可枚举的属性都会被枚举出来。 要检查是否具有自己定义的属性，而不是原型链上的属性，必须使用hasOwnProperty方法。

hasOwnProperty 是 JavaScript 中唯一处理属性并且不会遍历原型链的方法。

原型的指向的改变

function Person(name) {
    this.name = name;
}
Person.prototype.eat = function () {
    console.log(this.name+"吃东西");
};
Person.prototype.sleep = function () {
    console.log(this.name+"睡觉");
}
function Student(school) {
    this.school = school;
}
Student.prototype.write = function () {
    console.log("写作业");
}
Student.prototype = new Person("小华");
//改变Student()构造函数的指向
//让Student()构造函数的原型对象指向Person的实例对象
 
var s1 = new Student("某某高中");
s1.eat();//小华吃东西
s1.sleep();//小华睡觉
s1.write();
//Uncaught TypeError: s1.write is not a function
//因为Student()的原型的指向改变，所以找不到write()方法
console.dir(Student);
console.dir(s1);

代码图解

__proto__指向该对象所在的构造函数的原型对象。如上图所示：Studend()构造函数的原型(prototype)指向了Person()的实例对象（new Person(“小华”)），所以Studend()的实例对象s1的__proto__也指向了Person()的实例对象((new Person(“小华”)）。而实例对象((new Person(“小华”)）的__proto__指向了其所在的构造函数Person()的原型对象在这个原型对象中，找到了eat()方法和sleep()方法。
从这个例子中，可以发现，利用原型可以实现继承。面向对象的编程语言中有（class）类的概念，但是JavaScript不是面向对象的语言，所以js中没有类**（class）（ES6中实现了class）,但是js可以模拟面向对象的思想编程，js中通过构造函数来模拟类的概念。
改变原型的指向可以实现方法的继承。借用构造函数继承，主要解决属性的问题。
组合继承就是指：将改变原型的指向和借用构造函数两者结合在一起实现继承。

6. 你们要的面试题

试题1

var A=function(){}
A.prototype.n=1
var b=new A()
A.prototype={
n:2,
m:3
}
var c=new A()
console.log(b.n,b.m,c.n,c.m)//1,undefined,2,3

试题2

var F=function(){};
Object.prototype.a=function(){
console.log('a()')
};
Function.prototype.b=function(){
console.log('b()')
}
var f=new F();
f.a()//a()
f.b()//报错找不到b这个函数
F.a()//a()
F.b()//b()![请添加图片描述](https://img-blog.csdnimg.cn/c8335beab0444960985c012ea78e79f2.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDg2OTg2Ng==,size_16,color_FFFFFF,t_70)

试题3

function Foo() {
    Foo.a = function() {
        console.log(1)
    }
    this.a = function() {
        console.log(2)
    }
}
Foo.prototype.a = function() {
    console.log(3)
}
Foo.a = function() {
    console.log(4)
}
Foo.a();
let obj = new Foo();
obj.a();
Foo.a();

• Foo.a() 的输出值为 4。此时并没有调用 Foo 构造函数。
• obj.a() 的输出值为 2。虽然原型上也有 a 方法。但是实例对象 obj 上也有 a 方法，所以会先在自身找，找不到时才去原型链上找。
• Foo.a() 的输出值为1。调用了构造函数 Foo 之后，Foo 内部的 this.a 方法覆盖了外层的 Foo.a 。
  

试题4

function Person(name){
 this.name = name;
};
var jack = new Person("jack");

解析：

//实例对象的原型链：
jack.__proto__ === Person.prototype;
Person.prototype.__proto__ === Object.prototype;
jack.__proto__.__proto__ === Object.prototype;

//构造函数的原型链：
Person.__proto__ === Function.prototype;
Function.prototype === Function.__proto__;
Function.prototype.__proto__ === Object.prototype;
Function.__proto__.__proto__ === Object.prototype;
Person.__proto__.__proto__ === Object.prototype;