引言

有几天没有更新JS灵魂之问的专栏系列文章了，秋招季，也在忙着备战笔试面试。今天得空再来写一篇文章，本篇要讲解的内容是关于 原型和原型链基础 ，那今天这篇看能不能问倒你了，一起来探索一下吧。

仰望星空的人，不应该被嘲笑

原型基础

原型 prototype 其实是 function对象的一个属性，但是打印出来结果它也是对象。

那我们直接看下面这个例子吧

function Foo(name,age){
    
  this.name = name;
  this.age = age;
}
Foo.prototype.sex = '男士'

var foo = new Foo('Chocolate',21);
console.log(foo.name); // Chocolate
console.log(foo.sex); // 男士

拓展：prototype是定义构造函数构造出的每个对象的公共祖先，所有被该构造函数构造出的对象都可以继承原型上的属性和方法。

原型的作用，如上述代码一样，将一些配置项写在构造函数里，对于一些写死的值或者方法，就可以直接挂载到原型上去，可以减少代码冗余。

知识点补充：

实例的 __proto__其实就是一个容器，就是为了在对象里面给 prototype设置一个键名。

来一道简单题吧，会输出什么？

function Car() {
     };
Car.prototype.name = 'Math';
var car = new Car();
Car.prototype.name = 'Benz';
console.log(car.name);

答案是 Benz，相当于进行了一次覆盖操作。

现在，我进行一点点修改，看看又会输出什么？

Car.prototype.name = 'Benz';

function Car() {
     };
var car = new Car();

Car.prototype = {
    
  name: 'Math'
}
console.log(car.name);

答案是 Benz，实例化一个car对象，首先car.name先去找构造函数找对应 name 属性，没有找到，然后就去原型对象上去找，找到对应name值为 Benz，赋值。继续往下走，发现有对原型对象重定义的操作，但是此时实例对象早就通过原本构造函数 new出来了。（简单来说，就是再定义了一个 prototype，但是没有实例化）

可能不太好理解上述表达，我们对上述代码修改一丢丢，看看又会打印什么？

Car.prototype.name = 'Benz';

function Car() {
    };
Car.prototype = {
    
  name: 'Math'
}
var car = new Car();

console.log(car.name);

答案是 Math，因为你此时重新定义了构造函数的 prototype，并且进行了实例化。

可能你会想到这个例子，这里只是更改了属性，并不是重写。

function Car() {
     };
Car.prototype.name = 'Math';
var car = new Car();
Car.prototype.name = 'Benz';
console.log(car.name);

原型链基础

下面我们就要开始讲解原型链相关了，直接看下面这个例子吧：

Professor.prototype.tSkill = 'Java';
function Professor(){
    }
var progessor = new Professor();

Teacher.prototype = progessor;
function Teacher(){
    
  this.mSkill = 'js';
}
var teacher = new Teacher();

Student.prototype = teacher;
function Student(){
    
  this.pSkill = 'html';
}

var student = new Student();

console.log(student);

原型链就是像如下例子，沿着 __protp__这条线往上找相应的原型的属性值的链条，这就是原型链。

补充，原型本身也有原型，但是原型链不可能一直链接，因此，会有一个顶端。原型链的顶端是 Object.prototype。因为Object也是有原型的。并且 Object.prototype保存了一个 toString()方法。

继续，我们对上述代码进行一点修改，然后我们修改student实例对象里面的属性值，看是否teacher实例对象也会发生变化？

Professor.prototype.tSkill = 'Java';
function Professor(){
    }
var progessor = new Professor();

Teacher.prototype = progessor;
function Teacher(){
    
  this.mSkill = 'js';
  this.success = {
    
    alibaba: '28',
    tencent: '30'
  }
}
var teacher = new Teacher();

Student.prototype = teacher;
function Student(){
    
  this.pSkill = 'html';
}

var student = new Student();
student.success.baidu = '100';
student.success.tencent = '50';
console.log(teacher,student);

结果：

上述问题明白之后，我们再来看看下面这道题，看看又会有什么变化？

Professor.prototype.tSkill = 'Java';
function Professor(){
    }
var progessor = new Professor();

Teacher.prototype = progessor;
function Teacher(){
    
  this.mSkill = 'js';
  this.students = 500;
}
var teacher = new Teacher();

Student.prototype = teacher;
function Student(){
    
  this.pSkill = 'html';
}

var student = new Student();
console.log(student.students);
student.students++;
console.log(student, teacher);

从结果我们发现，只有 student实例对象底下的 students变成了 501，而 teacher 实例对象下面的 students没有变化。因为对于原始值而言， student对象底下没有 students这个属性，于是就会创建一个，然后自加。上一题是拿到了引用地址，于是可以修改，这道题意思和如下代码类似：

let obj = {
    
	name: 'Chocolate'
}
obj.age = 21; // obj没有age属性，于是创建一个。
console.log(obj.age); 

注意，一般不推荐按照如上两种方式修改原型对象上的属性值，后文会详细介绍继承的方式，这里只是抛砖引玉。

继续，看下一题，一道经典的笔试题：

function Car(){
    
  this.brand = 'Benz';
}
Car.prototype = {
    
  brand: 'Mazda',
  intro: function(){
    
    console.log('我是' + this.brand + '车');
  }
}
var car = new Car();
car.intro();

答案是 我是Benz车，首先new出来一个实例对象，然后访问实例的 intro()方法，发现没找到，于是会沿着原型链往上找，发现存在，然后打印。关键是 this.brand，因为 this会指向这个实例，实例访问的话，会首先访问由对应构造函数实例出来的对象，发现存在，直接打印。

最后

文章产出不易，还望各位小伙伴们支持一波！

往期精选：

小狮子前端の笔记仓库

访问超逸の博客，方便小伙伴阅读玩耍~

学如逆水行舟，不进则退