ES6—类的实现原理

Heier 发布于2019-08-20 14:22 / 1412人阅读

摘要：对应转码将提出这个方面即是判断的是否有指向的对象。同样再转码中，找到了对应的确保为的关联到给添加这个属性设置的内置与相关联可以看出背后是通过的原型链实现的。其中对应的转码其中实现了的原理。显示绑定的内置到，即在中执行原型链上关联的属性。

ES6篇

一段符合ES6语法的代码

    class a{
      constructor(y,z){
        this.y =y;
        this.z =z;
      }
      render(){
        console.log(1)
      }
    }
    
    class b extends a{
      constructor(m,n){
        super();
        this.m=m;
        this.n=n;
      }
      
      render(){
        console.log(2);
      }
    }

我在babel官网上输入，查看转码(),代码长很多，从中找出关键点：

class

constructor

extend

super

class

声明class class a(){}
查看对应转码 var a = function(){return a}()
可以看出声明一个class就是通过创建并执行一个匿名函数，在这个匿名函数中声明function a,最后返回a。

constructor

 
 constructor(y,z){
        this.y =y;
        this.z =z;
     }

对应转码:

function a(y, z) {
        _classCallCheck(this, a);

        this.y = y;
        this.z = z;
    }

将_classCallCheck(this,a)提出

function _classCallCheck(instance, Constructor) { 
    if (!(instance instanceof Constructor)) { 
        throw new TypeError("Cannot call a class as a function");
     } 
}

这个方面即是判断this的[[prototype]]是否有指向a.prototype的对象。即是判断原本是不是有a这个function。？？感觉解释的不好。
然后再在a(本质是function，但可以被称作class)中声明属性y，z。
接下来，在class a中有一个render方法，

_createClass(a, [{
    key: "render",
    value: function render() {
      console.log(1);
    }
}]);

通过_createClass方法，可以给a添加render方法。

将_createClass提出来看。

var _createClass = function () { 
    // 给对象添加属性
    function defineProperties(target, props) {
     for (var i = 0; i < props.length; i++) { 
         var descriptor = props[i]; 
         descriptor.enumerable = descriptor.enumerable || false; //默认不可枚举
         descriptor.configurable = true;//可配置修改属性
         if ("value" in descriptor) descriptor.writable = true;
         Object.defineProperty(target, descriptor.key, descriptor);//给target添加属性
      } 
    }
    // 返回函数
    return function (Constructor, protoProps, staticProps) { 
        if (protoProps) defineProperties(Constructor.prototype, protoProps); 
        if (staticProps) defineProperties(Constructor, staticProps); 
        return Constructor; 
    }; 
}();//立即执行

由上推断es6给class添加的属性、方法背后是es5对给对象添加属性的方法。

extend

同样再转码中，找到了对应的_inherits(b, _a)

function _inherits(subClass, superClass) { 
    // 确保superClass为function
    if (typeof superClass !== "function" && superClass !== null) { 
        throw new TypeError("Super expression must either be null or a function, not " + typeof superClass);
    } 
    // subClass.prototype的[[prototype]]关联到superClass superClass.prototype
    // 给subClass添加constructor这个属性
    subClass.prototype = Object.create(superClass && superClass.prototype, { 
        constructor: { 
            value: subClass, 
            enumerable: false, 
            writable: true, 
            configurable: true 
        } 
    });
    // 设置subclass的内置[[prototype]]与superClass相关联
    if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass;
}

可以看出extend背后是通过js的原型链实现的。
其中在class b extends a中要将a传入b中。

super

其中对应的转码：

function b(m, n) {
    _classCallCheck(this, b);

    var _this = _possibleConstructorReturn(this, (b.__proto__ || Object.getPrototypeOf(b)).call(this));

    _this.m = m;
    _this.n = n;
    return _this;
  }

其中_possibleConstructorReturn实现了super的原理。

function _possibleConstructorReturn(self, call) {
  if (!self) {
      throw new ReferenceError("this hasn"t been initialised - super() hasn"t been called"); 
  } 
  //显示绑定b的内置[[prototype]]到this，即在b中执行b原型链上关联的属性。
  return call && (typeof call === "object" || typeof call === "function") ? call : self; 
}

GPU云服务器云服务器类的实现队列实现原理 cdn实现原理 webrtc实现原理

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/81578.html

ES6类以及继承的实现原理

摘要：中通过关键字，定义类经过转码之后可以看到类的底层还是通过构造函数去创建的。在中，构造函数是可以直接运行的，比如。如果你有静态属性，会直接添加到构造函数上。不是很好理解，可以通过下面的方式理解是一个实例，是构造方法的原型。 ES6中通过class关键字，定义类 class Parent { constructor(name,age){ this.name = na...

Warren 2019-08-22 17:05 评论0 收藏0
javascript之模拟类继承

摘要：欢迎关注我的博客正文让我来构造函数其实，模拟一个类的方式非常的简单构造函数。我们先来看一个例子这里通过构造函数模拟出来的类，其实和其他语言的类行为上是基本一致的，唯一的区别就是它不具备私有方法。前言 ES6时代的来临，使得类继承变得如此的圆滑。但是，你有思考过ES6的类继承模式吗？如何去实现它呢？类继承对于JavaScript来说，实现方式与Java等类语言大不相同。熟悉JavaS...

Jochen 2019-08-22 11:07 评论0 收藏0
es6类和继承的实现原理

摘要：类的实现转换前转换后可见的底层依然是构造函数调用方法判断当前函数调用前是否有关键字。若构造函数前面没有则构造函数的不会不出现在的原型链上，返回。典型的寄生继承用父类构造函数的创建一个空对象，并将这个对象指向子类构造函数的。代表父类构造函数。在阅读文章之前，您至少需要对JavaScript原型继承有一定了解，如果觉得有所欠缺，可以先了解下我这篇文章：https://segmentfau...

haitiancoder 2019-08-23 14:35 评论0 收藏0
JavaScript 工作原理之十五－类和继承及 Babel 和 TypeScript 代码转换探秘

摘要：使用新的易用的类定义，归根结底也是要创建构造函数和修改原型。首先，它把构造函数当成单独的函数且包含类属性集。该节点还储存了指向父类的指针引用，该父类也并储存了构造函数，属性集和及父类引用，依次类推。原文请查阅这里，略有删减，本文采用知识共享署名 4.0 国际许可协议共享，BY Troland。本系列持续更新中，Github 地址请查阅这里。这是 JavaScript 工作原理的第...

GeekGhc 2019-08-29 16:05 评论0 收藏0
JavaScript 工作原理之十五－类和继承及 Babel 和 TypeScript 代码转换探秘

摘要：使用新的易用的类定义，归根结底也是要创建构造函数和修改原型。首先，它把构造函数当成单独的函数且包含类属性集。该节点还储存了指向父类的指针引用，该父类也并储存了构造函数，属性集和及父类引用，依次类推。原文请查阅这里，略有删减，本文采用知识共享署名 4.0 国际许可协议共享，BY Troland。本系列持续更新中，Github 地址请查阅这里。这是 JavaScript 工作原理的第...

BigNerdCoding 2019-08-02 11:00 评论0 收藏0