typescript 的 polyfill 学习1-Class 继承篇

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

Class 继承

js 是多范式的编程语言，同样也是支持面向对象编程的，类是面向对象中是很重要的概念。

区别于传统的java,c#基于模板的类，js是基于原型的。

类继承一般是通过原型链的方式来实现，在es3时代，可以使用Base.js这个库来进行类编程。

而ES6通过关键字class来定义类，这种语法糖让写法更加清晰，更像传统的类编程，也因此屏蔽了原型链的细节，会减少初学者的困惑，不过也因为这样就失去了理解js本身的语法特性的机会。

下面用ts写的两个类，我们看看转成es5后，js是怎么模拟这个语法糖的。

代码使用amd进行模块封装：

{

    "compilerOptions": {

        "outDir": "./dist/",

        "sourceMap": true,

        "noImplicitAny": false,

        "module": "amd",

        "target": "es5",

        "jsx": "react"

    },

    "include": [

        "./src/**/*"

    ]

}

ts代码：

 

//基类

export class A {

    public  Pro1:string  = "pro1";//公共成员

    private fPro1:string  = "fPro1";//私有成员

    //私有方法

    private  fMethod1():string{

        return "123";

    }

    //保护方法（可继承的方法）

    protected pMethod1():string{

        return "456";

    }

    //公共方法

    public  Method1(){

    }

}

//子类B

export class B  extends A {

        public  Pro2:string  ="Pro2";

        private fPro2:string ="fPro2";

        constructor(para:string){

            super();         //构造器重载

            this.fPro2 = para ;

        }

        public  Method2(){

        }

        //方法重载

        protected pMethod1():string{

            return  super.pMethod1();

        }

        private  fMethod2():string{

                     return "123";

                }

    }

我们定义了基类A，并且定义了私有变量，保护变量，公共变量，私有方法，保护方法，公共方法

定义了继承类B，同样定义了自己的成员，并且构造器重载和保护方法重载

父类的实现

 var A = /** @class */

    (function() {

        function A() {

            this.Pro1 = "pro1";

            this.fPro1 = "fPro1";

        }

        A.prototype.fMethod1 = function() {

            return "123";

        }

        ;

        A.prototype.pMethod1 = function() {

            return "456";

        }

        ;

        A.prototype.Method1 = function() {}

        ;

        return A;

    }()); //闭包作用域

可以看到，通过闭包的的作用域里面新建构造函数给变量A赋值一个构造函数

构造函数里面对类成员变量进行初始化，并且在原型对象（显示原型）定义类方法。里面js里面没有访问修饰符，我们看到私有方法和公有方法的定义并没有区别。

子类的实现

var B = /** @class */

    (function(_super) {

        __extends(B, _super);

        function B(para) {

            var _this = _super.call(this) || this;

            _this.Pro2 = "Pro2";

            _this.fPro2 = "fPro2";

            _this.fPro2 = para;

            return _this;

        }

        B.prototype.Method2 = function() {}

        ;

        B.prototype.pMethod1 = function() {

            return _super.prototype.pMethod1.call(this);

        }

        ;

        B.prototype.fMethod2 = function() {

            return "123";

        }

        ;

        return B;

    }(A));

    exports.B = B;

子类定义的闭包函数传入父类（基类）A做为参数_super,同样也是返回构造函数B.

跟父类不同的是，首先通过调用 __extends函数，对B 和 _super 做了处理。根据js

函数提升的特性，此时B 这个构造函数已经被定义，所以__extends函数的调用应该是在最后面。

在讲解__extends函数之前，我们先看看重载的定义。

首先是构造器的重载。构造函数通过调用 A.call(this),父类被调用，父类的构造函数被执行。

这里我们顺便复习一下new 操作符的执行原理：

var obj  = {};//我们创建了一个空对象obj

obj.__proto__ = Base.prototype;//我们将这个空对象的__proto__成员指向了Base函数对象prototype成员对象

Base.call(obj);//我们将Base函数对象的this指针替换成obj，然后再调用Base函数，于是我们就给obj对象赋值了一个id成员变量，这个成员变量的值是”base”，关于call函数的用法。

这样我们就知道，当我们new B()的时候，就开始执行B构造函数里面的代码.

在这里，__extends做了什么处理呢，我们来分析一下：

__extends 实现

var __extends = (this && this.__extends) || (function() {

    var extendStatics = Object.setPrototypeOf || ({

        __proto__: []

    }instanceof Array && function(d, b) {

        d.__proto__ = b;

    }

    ) || function(d, b) {

        for (var p in b)

            if (b.hasOwnProperty(p))

                d[p] = b[p];

    }

    ;

    return function(d, b) { //d：父类 b:子类

        extendStatics(d, b);

        function __() {

            this.constructor = d;

        }

        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype,

        new __());

    }

    ;

})();

同样的，函数都是在闭包里面定义的。__extends(B, _super);得知，我们传入父类和子类函数。

首先通过 extendStatics 函数的处理。extendStatics函数这边先不介绍，最后再说。

因为：

new B().__ proto__ === B.prototype

通过上面构造函数的代码里面知道，类成员都是在构造函数里面定义的，其中

方法成员全部定义在prototype里面给所有成员共享。

对于类实例来说，也就是new B() 出来的对象来说，方法成员要全部存放在__ proto__里面的，但是成员方法的来源并不一样，有的是来自于子类，有的来自于

父类，甚至来自与父父类...

如果我们通过原型链来实现的话，很自然的我们希望，每一级的父类对应原型链上的每一级。

  也就是说我们希望：

          new B().__ proto__             存放B定义的所有方法成员 

          new B().__ proto__.__ proto__  存放A定义的所有方法成员

          .......

左边是继承链，右边是继承链

我们可能会这么做， B.prototype = new A(), 这个时候new B()的原型对象上的确存在了A和B 的所有成员方法，但是至少有两个问题：

原型对象上还放着变量成员，变量成员不应该被共享
第一级的原型对象上面应该只存放子类B的成员方法

我们看看他们是怎么解决的，既然直接实例A不行，那就是new 一个空的对象。

d.prototype =  new __();

为了保证该空对象有原型功能，我们这么做。

function __() {

            this.constructor = d;

        }

然后

__.prototype = b.prototype

这样就保证了 new B().__ proto__.__ proto__ 存放A定义的所以方法成员

很完美，我们看看整体代码：

////d：父类 A  b:子类 B

function __() {

            this.constructor = d;

        }

        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype,

        new __());

静态成员

我们知道，传统面向对象编程语言静态成员可以通过 static 指定，静态成员跟方法成员一样，可以被共享，typescript也是有static 关键字的，最终也是定义在原型对象上面。

extendStatics(d, b); // 通过命名我们也知道，这个是为了解决静态成员的

var extendStatics = Object.setPrototypeOf || ({

        __proto__: []

    }instanceof Array && function(d, b) {

        d.__proto__ = b;

    }

    ) || function(d, b) {

        for (var p in b)

            if (b.hasOwnProperty(p))

                d[p] = b[p];

    }

    ;

这个比较简单，通过代码我们得知，这个其实就是Object.setPrototypeOf函数及其等价的代码。

Object.setPrototypeOf 定义：

将一个指定的对象的原型设置为另一个对象或者null(既对象的[[Prototype]]内部属性).

B.__ proto__ = A , 为什么需要等价代码呢，是因为 proto 并不是标准（虽然每个浏览器都支持了）。

好了，我们看一下一个子类实例的效果: