zoukankan      html  css  js  c++  java
  • TypeScript完全解读(26课时)_18.Mixins混入


    本节的代码在mixin.ts文件内

    同时在index.ts内引入

    混入就是把两个对象或者类的内容混合到一起,从而实现一些功能复用。

    对象混入

    js中对象的混入

    先来看一个js中对象的混入的例子

    首先定义一个对象a
    在定义一个对象b
    a里面混入一个对象b让a里面有对象b的属性
    使用es6的Object.assign方法,a写在前面,b写在后面

    a里面就也有了b对象的属性

    b还是只有b属性

    ts中对象混入

    在ts中,是具有类型系统的

    AB现在就是一个交叉类型,这是ts自动帮你推断出来的

    当然你也可以指定它的类型是ObjectA和ObjectB的交叉类型,交叉类型就表示它既包含A的特性,又包含B的特性。

    类的混入

    看下js中类的混入

    定义类A和B,输出类A和类B,分别有funcA和funcB

    Object.getOwnPropertyNames()可以获取对象自身的属性,除去他继承来的属性,
    对它所有的属性遍历,它是一个数组,遍历一下它所有的属性名
     
    base原型对象上,添加到遍历的属性

    调用mixins2,把两个原型对象传进去
    b.pertotype就是b的原型对象
    a.pertotype就是a的原型对象
    调用了mixins2这个方法,传进去b的原型对象和a的原型对象

    创建b的实例,并输出这个b,发现里面既有funcA也有funcB

    调用b.funcA() 打印出了here

    这就是js中对类的混入

    ts中对类的混入

    ts中还要处理对类型的定义
    把两个类当做接口来继承,AB继承classAa和ClassBb,继承多个接口用逗号分隔开

    继承了两个类以后,这里要把两个类里面的所有属性和方法都要在这里定义一下

    定义一个函数mixins,从from里面forEach遍历一下,因为传入进来是一个数组,它是要混入的两个类组成的数组,要遍历它

    通过Object.getOwnPropertyNames获取当前遍历的原型对象,获取它原型对象上定义的所有属性,返回的也是一个数组
    也需要遍历他

    给base添加当前遍历的这个原型对象上的属性

    调用混入的方法

    创建classAB的实例,并输出,输出的funcA和funcB是有实际的函数体的

    classAB这里只需要定义函数的类型就可以,实际的方法体是从ClassAa和ClassBb里面继承过来的

    可以看到下划线proto下划线这个下面有继承来的两个方法funcA和funcB


    通过mixins函数,将这个ClassAa和ClassBb原型对象的属性和方法赋给ClassAB
    因为ClassAa和ClassBb有函数funcA和funcB的类型定义,所以可以吧funcA和funcB的函数实体直接赋给ClassAB,这个就是ts中的混入



     

  • 相关阅读:
    20100420 ~ 20100520 小结与本月计划
    打造第二代测试框架TestDriven 2.0(六)—— 最新测试思路分析
    C# 反射性能测试
    Java 反射与cglib.proxy与cglib.beanmap与直接赋值 性能对比
    Apache Mina 源码分析。
    msn in c#, 最新代码
    20100520 ~ 20100620 小结与本月计划
    messageflow 集成到信息系统 第一阶段 手稿
    flash > AMF > java 的对象映射关系
    我在想:也许.net的基因里面就输给了java
  • 原文地址:https://www.cnblogs.com/wangjunwei/p/10903071.html
Copyright © 2011-2022 走看看