重学前端-总结：07、JavaScript对象：我们真的需要模拟类吗？

深藏阁楼爱情的钟 2021-09-28 05:38 201阅读 0赞

# 重学前端-总结：07、JavaScript对象：我们真的需要模拟类吗？ #

### 文章目录 ###

*  重学前端-总结：07、JavaScript对象：我们真的需要模拟类吗？
 *  前言
 *   *  原型概念？
     *  JavaScript 的原型
     *  早期版本中的类与原型
 *  ES6 中的类

# 前言 #

JavaScript 本身就是面向对象的，它并不需要模拟，只是它实现面向对象的方式和主流的流派不太一样.。  
开发建议：

1.  新的 ES 版本中，不再需要模拟类，而原型体系同时作为一种编程范式和运行时机制存在。
2.  javascript开发自由选择原型或者类作为代码的抽象风格，但是无论我们选择哪种，理解运行时的原型系统.
3.  使用类的思想来设计代码时，应该尽量使用 class 来声明类，而不是用旧语法，拿函数来模拟对象。

## 原型概念？ ##

JavaScript 并非第一个使用原型的语言，在它之前，self、kevo 等语言已经开始使用原型来描述对象。

原型系统的“复制操作”有两种实现思路：

1.  一个是并不真的去复制一个原型对象，而是使得新对象持有一个原型的引用；
2.  另一个是切实地复制对象，从此两个对象再无关联
3.  历史上的基于原型语言因此产生了两个流派，显然，JavaScript 显然选择了前一种方式。

## JavaScript 的原型 ##

原型系统可以用两条概括：

*  如果所有对象都有私有字段 \[\[prototype\]\]，就是对象的原型；
 *  读一个属性，如果对象本身没有，则会继续访问对象的原型，直到原型为空或者找到为止。

这个模型在 ES 的各个历史版本中并没有很大改变，但从 ES6 以来，JavaScript 提供了一系列内置函数，以便更为直接地访问操纵原型。三个方法分别为：

*  Object.create 根据指定的原型创建新对象，原型可以是 null；
 *  Object.getPrototypeOf 获得一个对象的原型；
 *  Object.setPrototypeOf 设置一个对象的原型。

展示了用原型来抽象猫和虎的例子。

## 早期版本中的类与原型 ##

在早期版本的 JavaScript 中，“类”的定义是一个私有属性 \[\[class\]\]，语言标准为内置类型诸如 Number、String、Date 等指定了 \[\[class\]\] 属性，以表示它们的类。语言使用者唯一可以访问 \[\[class\]\] 属性的方式是 Object.prototype.toString。

以下代码展示了所有具有内置 class 属性的对象：

var o = new Object;
        var n = new Number;
        var s = new String;
        var b = new Boolean;
        var d = new Date;
        var arg = function(){  return arguments }();
        var r = new RegExp;
        var f = new Function;
        var arr = new Array;
        var e = new Error;
        console.log([o, n, s, b, d, arg, r, f, arr, e].map(v => Object.prototype.toString.call(v)));

因此，在 ES3 和之前的版本，JS 中类的概念是相当弱的，它仅仅是运行时的一个字符串属性。  
在 ES5 开始，\[\[class\]\] 私有属性被 Symbol.toStringTag 代替，Object.prototype.toString 的意义从命名上不再跟 class 相关。我们甚至可以自定义 Object.prototype.toString 的行为，以下代码展示了使用 Symbol.toStringTag 来自定义 Object.prototype.toString 的行为：

var o = {  [Symbol.toStringTag]: "MyObject" }
    console.log(o + "");

这里创建了一个新对象，并且给它唯一的一个属性 Symbol.toStringTag，我们用字符串加法触发了 Object.prototype.toString 的调用，发现这个属性最终对 Object.prototype.toString 的结果产生了影响。

new 运算接受一个构造器和一组调用参数，实际上做了几件事：

*  以构造器的 prototype 属性（注意与私有字段 \[\[prototype\]\] 的区分）为原型，创建新对象；
 *  将 this 和调用参数传给构造器，执行；
 *  如果构造器返回的是对象，则返回，否则返回第一步创建的对象。

new 这样的行为，试图让函数对象在语法上跟类变得相似，但是，它客观上提供了两种方式，一是在构造器中添加属性，二是在构造器的 prototype 属性上添加属性。

下面代码展示了用构造器模拟类的两种方法:

第一种方法是直接在构造器中修改 this，给 this 添加属性。

第二种方法是修改构造器的 prototype 属性指向的对象，它是从这个构造器构造出来的所有对象的原型。

没有 Object.create、Object.setPrototypeOf 的早期版本中，new 运算是唯一一个可以指定 \[\[prototype\]\] 的方法（当时的 mozilla 提供了私有属性 \_\_proto\_\_，但是多数环境并不支持），所以，当时已经有人试图用它来代替后来的 Object.create，我们甚至可以用它来实现一个 Object.create 的不完整的 pollyfill，见以下代码：

Object.create = function(prototype){ 
        var cls = function(){ }
        cls.prototype = prototype;
        return new cls;
    }

这段代码创建了一个空函数作为类，并把传入的原型挂在了它的 prototype，最后创建了一个它的实例，根据 new 的行为，这将产生一个以传入的第一个参数为原型的对象。

这个函数无法做到与原生的 Object.create 一致，一个是不支持第二个参数，另一个是不支持 null 作为原型，所以放到今天意义已经不大了。

# ES6 中的类 #

ES6 中引入了 class 关键字，并且在标准中删除了所有 \[\[class\]\] 相关的私有属性描述，类的概念正式从属性升级成语言的基础设施，从此，基于类的编程方式成为了 JavaScript 的官方编程范式。

我们先看下类的基本写法：

class Rectangle { 
      constructor(height, width) { 
        this.height = height;
        this.width = width;
      }
      // Getter
      get area() { 
        return this.calcArea();
      }
      // Method
      calcArea() { 
        return this.height * this.width;
      }
    }

*  通过括号和大括号来创建方法，数据型成员最好写在构造器里面。
 *  类的写法实际上也是由原型运行时来承载的，逻辑上 JavaScript 认为每个类是有共同原型的一组对象，类中定义的方法和属性则会被写在原型对象之上。
 *  此外，最重要的是，类提供了继承能力:

class Animal {  
      constructor(name) { 
        this.name = name;
      }
      
      speak() { 
        console.log(this.name + ' makes a noise.');
      }
    }
    
    class Dog extends Animal { 
      constructor(name) { 
        super(name); // call the super class constructor and pass in the name parameter
      }
    
      speak() { 
        console.log(this.name + ' barks.');
      }
    }
    
    let d = new Dog('Mitzie');
    d.speak(); // Mitzie barks.

以上代码创造了 Animal 类，并且通过 extends 关键字让 Dog 继承了它，展示了最终调用子类的 speak 方法获取了父类的 name。