原型和原型链

提示：文章为前端面试题目记录，顺序比较随意,内容来自各位大佬的回答。

---

一、JS原型

JS的复杂类型都是对象类型（Object），而JS不是一门完全面向对象编程的语言，所以如何涉及继承机制，就是一个问题。

1.构造函数

因为JS中没有类（Class）这个概念，所以JS的设计者使用了构造函数来实现继承机制。

构造函数创建一个实例的过程：
（1）创建一个新对象
（2）将构造函数的作用域赋值给新对象（这样this就指向了新对象）
（3）执行构造函数中的代码（为新对象添加实例属性和实例方法）
（4）返回新对象

// 构造函数
function Person(name, age) {
    this.name = name;
    this.age = age;
}

// 生成实例
const p = new Person('zhangsan', 18);

如上述代码所示，JS通过构造函数来生成实例。但是又出现了一个新的问题，在构造函数中通过this赋值的属性或者方法，是每个实例的实例属性以及实例方法，无法共享公共属性。所以又设计出了一个原型对象，来存储这个构造函数的公共属性以及方法。

2.原型对象

JS的每个函数在创建的时候，都会生成一个属性prototype，这个属性指向一个对象，这个对象就是此函数的原型对象。该原型对象中有个属性为constructor，指向该函数。这样原型对象和它的函数之间就产生了联系。
现在有1个类A,我想要创建一个类B,这个类是以A为原型的,并且能进行扩展。我们称B的原型为A。当调用构造函数创建一个实例的时候，实例内部将包含一个内部指（很多浏览器这个指针名字为__proto__）指向构造函数的prototype，这个连接存在于实例和构造函数的prototype之间。

2.1 prototype的定义

javascript中的每个类都有prototype属性，其prototype属性的解释是：返回对象类型原型的引用。每一个构造函数都有一个属性叫做原型。这个属性非常有用：为一个特定类声明通用的变量或者函数。你不需要显式地声明一个prototype属性，因为在每一个构造函数中都有它的存在。你可以看看下面的例子：

function Test(){}
console.log(Test.prototype); 

2.2 constructor的定义

对象的constructor属性用于返回创建该对象的函数，也就是我们常说的构造函数。

在JavaScript中，每个具有原型的对象都会自动获得constructor属性。除了arguments、Enumerator、Error、Global、Math、RegExp、Regular Expression等一些特殊对象之外，其他所有的JavaScript内置对象都具备constructor属性。例如：Array、Boolean、Date、Function、Number、Object、String等。

2.3 javascript的方法：

（1）类方法,相当于静态成员，由类名+点（.)的方式调用
（2）对象方法,非静态成员，由实例化对象调用
（3）原型方法,相当于扩展类的功能

//类
function People(name)
{
  this.name=name;
  //对象方法，由实例化的对象访问，类似于c#、java、c++类中的非静态成员
  this.Introduce=function(){
    alert("My name is "+this.name);
  }
}
 
//类方法,与具体实例无关，只能使用“类名.属性或方法"的形式访问，类似于c#、java、c++类中的静态成员
People.Run=function(){
  alert("I can run");
}
 
//原型方法，对People类的进行扩展，由实例化的对象访问
People.prototype.IntroduceChinese=function(){
  alert("我的名字是"+this.name);
}
 
//测试
var p1=new People("Windking");
p1.Introduce();
People.Run();
p1.IntroduceChinese();

二、JS原型链

1.引入

 // 构造函数
    function Preson(name, age) {
      this.name = name;
      this.age = age;
    }
    // 所有实例共享的公共方法
    Preson.prototype.say = function (word) {
      console.log(`${this.name}说：${word}`);
    }

    const p1 = new Preson('张三', 18); // 创建一个Person实例对象
    p1.hasOwnProperty('say') // false 说明不是定义在其本身上的
    p1.say('hello world'); // 调用公共方法 打印：张三说：hello world

这里就要思考了，为什么我们构造的p1这个实例对象，它可以调用到Person这个构造函数的原型对象上的方法呢？明明只有在构造函数内部通过this来赋值的属性或者方法才会被实例所继承，为什么在构造函数的原型对象上定义的say方法也能通过实例来调用到呢？这里就引出了原型链这个概念。

2.proto

每个通过构造函数创建出来的实例对象，其本身有个属性__proto__，这个属性会指向该实例对象的构造函数的原型对象，这么说好像有点绕，我们看下图

3.原型链

现在我们知道了，当访问一个对象的某个属性时，会先在这个对象本身属性上查找，如果没有找到，则会通过它的__proto__隐式属性，找到它的构造函数的原型对象，如果还没有找到就会再在其构造函数的prototype的__proto__中查找，这样一层一层向上查找就会形成一个链式结构，我们称为原型链。

作者：月光也会跟着我
链接：https://juejin.cn/post/6984678359275929637
来源：稀土掘金