JavaScript 原型（prototype）、原型链、原型继承全解析

末蓝、 2023-09-30 09:53 1阅读 0赞

### 文章目录 ###

*  1. 什么是原型，为啥要有原型？
 *  2. prototype、\_\_proto\_\_、\[\[Prototype\]\]
 *  3. 用现代方法操作原型
 *  4. 原型链
 *  5. 原型继承
 *  6. ES6的面向对象
 *  7. 结语

# 1. 什么是原型，为啥要有原型？ #

什么是原型，为啥要有原型呢？这问题一上来确实不好回答。不妨换个思路思考：如果JS中没有原型，会怎么样？

> 首先，如果没有原型，对象的一些方法我们可能无法调用了

比如：

let str = 'hello, world';
    str.split(',');  // ['hello', ' world']
    str.hasOwnProperty('length'); // true

上面的代码我们定义了一个字符串`str`，并调用了它`split`和`hasOwnProperty`方法。你是否想过，为什么`str`会有这些方法，它们是在哪里定义的？

我们能调用这两个方法，借助的就是原型的力量。

我们能调用`split`方法是因为`str`是`String`类型的，而`String`的原型上就定义了`split`方法。  
你可使用`Object.getOwnPropertyNames`发现它们：  
![713354c187a243458d9a71efe87f8367.png][]  
`String.prototype`上并没有发现`hasOwnProperty`方法，为啥也能调用呢？这是因为`String`是`Object`的子类，而`Object`的原型上定义了`hasOwnProperty`方法：  
![watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5oCd5ZCb5ruh5pyI_size_20_color_FFFFFF_t_70_g_se_x_16][]  
其次，如果没有原型，很多方法可能都要以全局方法的方式存在，就像`parseInt`和`parseFloat`一样。记忆这些方法是件难事，而原型像是容器，将一个类的方法都聚到一起，使我们可以直接通过对象访问它们。

如果你有面向对象的基础知识的话，你会发现上面说的就是对象三大特性的“封装”和“继承”。

所以什么是原型，为啥要有原型？简单说就是为了实现`面向对象`。条条大路通罗马，有些编程语言的面向对象是基于类（`class`）的，像Java，有些是基于原型（`prototype`）的，像JS。

上面我故意避开原型、原型链的一些知识（后面会讲），就是为了方便大家理解。

# 2. prototype、**proto**、\[\[Prototype\]\] #

JS里面的对象都是有原型的（`Object.create(null)`除外），一些书籍、标准或规范喜欢用`[[Prototype]]`来表示。  
而对象又分为函数对象，以及函数对象`new`出来的普通对象。

*  prototype 是函数对象的属性，代表函数的原型;
 *  \_\_proto\_\_是普通对象的属性，用来指向对应函数构造器的原型;

我们用`Fn`代表函数对象，用`obj`代表它创建的普通对象，那么：

obj.__proto__ === Fn.prototype;  // obj 是 Fn创建的
    Fn.__proto__ === Function.prototype; // Fn 是Function创建

不管是`prototype`，还是`__proto__`，它们都是原型对象`[[Prototype]]`的引用，或者说访问器。只是`prototype`是函数用来访问原型的，而`__proto__`是普通对象用来访问原型的。它俩指向的都是同一个原型对象。

![watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5oCd5ZCb5ruh5pyI_size_20_color_FFFFFF_t_70_g_se_x_16 1][]

# 3. 用现代方法操作原型 #

`__proto__` 并不推荐使用，一是只有浏览器才支持的比较好，二是`__proto__`可能被误当做对象的键而被修改，导致代码产生bug。

我们应该使用更现代的方法代替`__proto__`，比如：

*  `Object.create(proto, [descriptors])` —— 利用给定的原型和可选的属性描述来创建一个新对象。
 *  `Object.getPrototypeOf(obj)`—— 返回指定对象的原型。
 *  `Object.setPrototypeOf(obj, proto)`—— 设置对象的原型。

使用`Object.setPrototypeOf`方法要求传入的原型要么是null要么是一个对象。这里的“对象”指的是引用类型的对象，如果是非null的基本类型就会报错：  
![watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5oCd5ZCb5ruh5pyI_size_20_color_FFFFFF_t_70_g_se_x_16 2][]  
但是直接使用`__proto__`修改原型就能绕过限制：  
![watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5oCd5ZCb5ruh5pyI_size_16_color_FFFFFF_t_70_g_se_x_16][]  
所以使用`__proto__`并不是很安全，但是为了方便演示，下面内容可能还会出现它的身影。

# 4. 原型链 #

前面说了对象都有`__proto__`属性，而在JS中万物皆对象，`obj.__proto__`也是个对象，它也有`__proto__`属性，也就是`obj.__proto__.__proto__`，只要`__proto__`存在，就可以这么一直访问下去，直到`__proto__`返回`null`。这样就形成了一个链条，叫做原型链。

![watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5Luj56CB5ZCbLg_size_20_color_FFFFFF_t_70_g_se_x_16][]

上面是原型链的简单示意图，可以看到：

1.  所有对象的原型最终都会追溯到`Object.prototype`，所以对象都是`Object`的实例
2.  所有函数对象都是`Function`的实例，`Object`也是函数，所以`Function`和`Object`互为父亲.
3.  `Object.prototype.__proto__`值为`null`，因为原型链不能形成闭环。如果`Object.prototype.__proto__`为某个非空对象，那这个对象的原型链上最终还会出现`Object.prototype`，就形成了一个环，原型链就无法结束了。

![watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5oCd5ZCb5ruh5pyI_size_10_color_FFFFFF_t_70_g_se_x_16][]

为了避免成环，JS不允许用户向`Object.prototype.__proto__`赋值：  
![9ec7e80f12af471e9a6a0d8e0bb25ff9.png][]  
自定义的函数也不能让原型链成环：  
![watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5oCd5ZCb5ruh5pyI_size_20_color_FFFFFF_t_70_g_se_x_16 3][]  
那原型链有什么用途呢，我理解主要有两点：

1.  属性继承，当访问对象的属性时，首先从对象自身查找，没有就沿着原型链查找，直到找到或者原型链结束为止；
2.  instanceof，instanceof的原理就是借助原型链；

instanceof在我的另一篇文章[《js typeof、instanceof区别一次给你讲明白》][js typeof_instanceof]中有详细介绍，感兴趣的可以去看，这里重点介绍原型和继承。

# 5. 原型继承 #

JS采用的是原型继承机制，这个和Java等编程语言的类继承机制不同，原型继承机制是通过原型对象继承，而类继承机制则是通过类继承。

不要带着对类继承的认识，看待JS的原型继承，这样你会很别扭。

JS的继承可以发生在两个普通对象之间，比如：

let animal= {
         name: 'animal' };
    let dog = {
         __proto__: animal };
    dog.name; // animal

我们可以说：对象`dog`从原型对象`animal`上继承属性。

不过为了大家理解方便，我下面还是用`Animal`和`Dog`这两个类，来演示原型继承。

直接使用原型链实现继承：

继承关系如图所示：

![watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5oCd5ZCb5ruh5pyI_size_15_color_FFFFFF_t_70_g_se_x_16][]

这是学完原型链能直接想到的方式，它还有一种变体：

Dog.prototype = Object.create(Animal.prototype); 
    Dog.prototype.constructor = Dog;  // 修复constructor的指向问题

这两种方式本质都是利用原型链，只是由于第二种方式是直接覆盖子类原型，需要注意修复`constructor`指向问题，而且给子类原型添加属性和方法时，需要在`Object.create`调用之后，否则刚添加的属性和方法又被覆盖了。

直接使用原型链的继承都存在一点问题：只能从原型对象上继承，对于那些定义在父类构造函数中的属性和方法，是无法继承的。。

这里的`eat`方法是直接在父类构造方法中定义的，`Animal.prototype`中并不存在此方法，因此不能被基于原型的继承方式继承。我们可以通过“借用父类构造方法”的方式修复这个问题：

`Animal.apply(this, arguments)`（或者`Animal.call`）的作用就是调用父类的构造方法来初始化子类的实例，这样在父类构造方法中定义的属性和方法，就在子类实例上重新赋值了一遍。

不过这里还有一个问题，就是静态属性的继承问题。静态属性和方法就是直接定义在类上的属性和方法，它即不属于原型对象，也不属于实例，而是属于类（或函数）本身，因此无法被继承。

其实这也不算是个问题，因为静态属性在一些编程语言中本就无法继承，比如Java。不过JS这门语言太过动态且灵活了，要实现静态属性继承，也是很容易的。

关键代码就一行：

Dog.__proto__ = Animal;

我们把`Dog`当成一个普通对象，将`Dog.__proto__`设置成父类，这样当我们访问`Dog`的静态属性和方式时，如果`Dog`类上没有，就会到`Animal`上找。

上面的写法差不多是不借助ES6语法情况下，写出的比较完美的继承了。

下面是完整的继承关系图：

![watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5oCd5ZCb5ruh5pyI_size_20_color_FFFFFF_t_70_g_se_x_16 4][]

我们使用三个技巧分别实现了原型属性、实例属性和静态属性的继承，最后我们再总结一下。

实现原型继承：

// 方式1：使用__proto__
    Dog.prototype.__proto__ = Animal.prototype;
    // 方式2：使用ES6的Object.setPrototypeOf代替__proto__
    Object.setPrototypeOf(Dog.prototype, Animal.prototype);
    // 方式3：使用Object.create
    Dog.prototype = Object.create(Animal.prototype);
    Dog.prototype.constructor = Dog;

实现父类实例属性继承：

// 在子类构造方法中执行
    Animal.apply(this, arguments);

实现静态属性继承：

Dog.__proto__ = Animal;
    // 或使用ES6的方法
    Object.setPrototypeOf(Dog, Animal);

原型属性继承和静态属性继承本质都是基于原型链，区别在于原型链是作用于类上，还是作用于原型对象上。

实例属性的继承除了上面说的用`apply`或`call`方法，还有一种写法：

Dog.prototype = new Animal(); // 用父类示例作为子类原型
    Dog.prototype.constructor = Dog; // 修复constructor指向

这种方式使用父类的一个实例作为子类的原型，因为是父类的实例，这个实例自然继承了父类的原型属性，同时又包含实例属性。尽管看着很棒，但是由于无法向父类构造方法传参，因此也是个“鸡肋”的方法，了解即可。

# 6. ES6的面向对象 #

单就原型的知识，上面的内容已经足够了。本节是一些扩展，不感兴趣，可以不用了解。  
我们都知道ES6引入了基于`class`的面向对象，你可以用更标准的方式来编写面向对象代码。前面的例子，可以用`class`改写一下：

class Animal {
         // 父类
    	constructor() {
        
    		this.eat = function() {
         console.log('疯狂进食...'); } // 实例方法
    	}
    	run() {
         console.log('奔跑...'); }
    }
    class Dog extends Animal {
         // 子类继承父类
    	woof() {
         console.log('汪汪汪...') }
    }
    let dog = new Dog(); // 定义子类实例
    // 调用父类方法
    dog.run(); // 奔跑...
    // 调用父类的实例方法
    dog.eat(); // 疯狂进食...
    dog.woof(); // 汪汪汪...

看着简洁很多。

当然本节的内容不是介绍ES6的`class`，而是告诉你，ES6的`class`只是语法糖，其本质还是原型。上面的代码可以使用[Babel][]将其编译成ES6之前的写法：

"use strict";
    
    function _inheritsLoose(subClass, superClass) {
         subClass.prototype = Object.create(superClass.prototype); subClass.prototype.constructor = subClass; _setPrototypeOf(subClass, superClass); }
    
    function _setPrototypeOf(o, p) {
         _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) {
         o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
    
    function _defineProperty(obj, key, value) {
         if (key in obj) {
         Object.defineProperty(obj, key, {
         value: value, enumerable: true, configurable: true, writable: true }); } else {
         obj[key] = value; } return obj; }
    
    var Animal = /*#__PURE__*/function () {
        
      // 父类
      function Animal() {
        
        this.eat = function () {
        
          console.log('疯狂进食...');
        }; // 实例方法
    
      }
    
      var _proto = Animal.prototype;
    
      _proto.run = function run() {
        
        console.log('奔跑...');
      };
    
      return Animal;
    }();
    
      // 静态属性
    _defineProperty(Animal, "KIND", '哺乳动物');
      // 静态方法
    _defineProperty(Animal, "printKind", function () {
        
      console.log(Animal.KIND);
    });
    
    var Dog = /*#__PURE__*/function (_Animal) {
        
      _inheritsLoose(Dog, _Animal);
    
      function Dog() {
        
        return _Animal.apply(this, arguments) || this;
      }
    
      var _proto2 = Dog.prototype;
    
      // 子类继承父类
      _proto2.woof = function woof() {
        
        console.log('汪汪汪...');
      };
    
      return Dog;
    }(Animal);

代码虽多，但仔细看就会发现，使用的技巧都是前文讲过的，如果有不懂的，再反复看看第5小结的内容。

# 7. 结语 #

最后，码字不已，还望支持，如果有讲的不对的地方也希望留言更正。

[713354c187a243458d9a71efe87f8367.png]: https://img-blog.csdnimg.cn/713354c187a243458d9a71efe87f8367.png
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5oCd5ZCb5ruh5pyI_size_20_color_FFFFFF_t_70_g_se_x_16]: https://img-blog.csdnimg.cn/4e1d12f9ead84f73b3922506654a40a6.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5oCd5ZCb5ruh5pyI,size_20,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5oCd5ZCb5ruh5pyI_size_20_color_FFFFFF_t_70_g_se_x_16 1]: https://img-blog.csdnimg.cn/b1f2b83449854e83a558b520274ad776.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5oCd5ZCb5ruh5pyI,size_20,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5oCd5ZCb5ruh5pyI_size_20_color_FFFFFF_t_70_g_se_x_16 2]: https://img-blog.csdnimg.cn/dda3b4c59e6a424daf1d4282a215f8fb.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5oCd5ZCb5ruh5pyI,size_20,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5oCd5ZCb5ruh5pyI_size_16_color_FFFFFF_t_70_g_se_x_16]: https://img-blog.csdnimg.cn/783413c4410149eba64c9affbe4eba0f.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5oCd5ZCb5ruh5pyI,size_16,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5Luj56CB5ZCbLg_size_20_color_FFFFFF_t_70_g_se_x_16]: https://img-blog.csdnimg.cn/d9b953a71370425e85411afac931c25d.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5Luj56CB5ZCbLg==,size_20,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5oCd5ZCb5ruh5pyI_size_10_color_FFFFFF_t_70_g_se_x_16]: https://img-blog.csdnimg.cn/09f3a064114445b4b0c7753e2371aa90.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5oCd5ZCb5ruh5pyI,size_10,color_FFFFFF,t_70,g_se,x_16
[9ec7e80f12af471e9a6a0d8e0bb25ff9.png]: https://img-blog.csdnimg.cn/9ec7e80f12af471e9a6a0d8e0bb25ff9.png
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5oCd5ZCb5ruh5pyI_size_20_color_FFFFFF_t_70_g_se_x_16 3]: https://img-blog.csdnimg.cn/8a4b7d761e0647b79f18617d8e0b1450.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5oCd5ZCb5ruh5pyI,size_20,color_FFFFFF,t_70,g_se,x_16
[js typeof_instanceof]: https://blog.csdn.net/qq_23365135/article/details/123475357
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5oCd5ZCb5ruh5pyI_size_15_color_FFFFFF_t_70_g_se_x_16]: https://img-blog.csdnimg.cn/7e08fdbcfe554471a94aebed2a1e6867.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5oCd5ZCb5ruh5pyI,size_15,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5oCd5ZCb5ruh5pyI_size_20_color_FFFFFF_t_70_g_se_x_16 4]: https://img-blog.csdnimg.cn/3fb904e492f44be0b0a2dccef44b282f.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5oCd5ZCb5ruh5pyI,size_20,color_FFFFFF,t_70,g_se,x_16
[Babel]: https://www.babeljs.cn/repl