个人中心
文章发布
退出
作者热门文章
- Java锁的逻辑（结合对象头和ObjectMonitor）
- 还在用饼状图？来瞧瞧这些炫酷的百分比可视化新图形（附代码实现）⛵
- 自动注册实体类到EntityFrameworkCore上下文，并适配ABP及ABPVNext
- 基于Sklearn机器学习代码实战
37
4
1.前言 。
由于TypeScrip中的类不支持多继承，所以引入了混合（Mixin）的特性，可以间接实现多继承的效果.
2.正文 。
//
声明一个汽车类Vehicle，它有drive方法
class Vehicle {
drive():
void
{
console.log(
'驾驶'
)
}
}
//
声明轿车类Car，它有work方法
class Car extends Vehicle{
work():
void
{
console.log(
'上班代步'
)
}
}
//
声明越野车类Suv，它有cross方法
class Suv extends Vehicle{
cross():
void
{
console.log(
'山地越野'
)
}
}
//
声明跨界车类Crossover, 继承Car和Suv,既可以上班代步，也可以山地越野
class Crossover extends Car, Suv{
//
这里ts报错：Classes can only extend a single class. 子类只能继承一个父类
}
以上示例为了实现让Crossover类同时拥有work和cross方法，我们尝试一个类同时继承多个类，ts报错了，下面利用Mixin的特性，来实现这一功能:
class Vehicle {
drive():
void
{
console.log(
'驾驶'
)
}
}
//
声明轿车类Car，它有work方法
class Car extends Vehicle{
work():
void
{
console.log(
'上班代步'
)
}
getSpace():
void
{
console.log(
'small'
);
}
}
//
声明越野车类Suv，它有cross方法
class Suv extends Vehicle{
cross():
void
{
console.log(
'山地越野'
)
}
getSpace():
void
{
console.log(
'big'
);
}
}
//
声明跨界车类Crossover, 继承Car和Suv,既可以上班代步，也可以山地越野
class Crossover extends Vehicle {
}
//
这里需要创建需要合并类（Crossover）的同名接口，并继承多个类Car、Suv
interface Crossover extends Car, Suv {}
applyMixins(Crossover, [Car, Suv])
let crossover
=
new
Crossover()
//
该混合函数摘自TypeScript官方手册，如果derivedCtor和constructors类中存在同名方法，则后者覆盖前者
function
applyMixins(derivedCtor: any, constructors: any[]) {
constructors.forEach((baseCtor)
=>
{
Object.getOwnPropertyNames(baseCtor.prototype).forEach((name)
=>
{
Object.defineProperty(
derivedCtor.prototype,
name,
Object.getOwnPropertyDescriptor(baseCtor.prototype, name)
||
Object.create(
null
)
);
});
});
}
crossover.drive()
//
驾驶
crossover.work()
//
上班代步
crossover.cross()
//
山地越野
crossover.getSpace()
//
big，同名方法getSpace是Suv中的，applyMixins函数传入的第二个参数数组最后一个类是Suv
以上Crossover类通过Mixin实现继承Car和Suv中的方法，并且也继承了第二级类Vehicle中的方法，需要注意的是，对于同名的方法，会存在方法覆盖的问题.
3.拓展 。
利用Mixin的思想还能做一些有趣的事儿！ 。
interface AnimalConfig {
type: string
name: string
voice: string
}
class AnimalSpeak {
speak(config: AnimalConfig):
void
{
const {type, name, voice}
=
config
console.log(`${type
+ name}的叫声是${voice}~
`);
}
dogSpeak(name: string):
void
{
console.log(`小狗${name}的叫声是汪汪
~
`);
}
catSpeak(name: string):
void
{
console.log(`小猫${name}的叫声是喵喵
~
`);
}
}
function
extend<T, U>
(to: T, from: U) {
for
(const key
in
from) {
;(to as T
& U)[key] =
from[key] as any
}
return
to as T &
U
}
const context
=
new
AnimalSpeak()
const instance
=
AnimalSpeak.prototype.speak.bind(context)
extend(instance, context)
instance({type:
'小猫', name: '咪咪', voice: '喵喵'})
//
小猫咪咪的叫声是喵喵~
instance.dogSpeak(
'哮天犬')
//
小狗哮天犬的叫声是汪汪~
以上示例中context是AnimalSpeak类的实例对象，instance是一个方法，利用extend方法，将context对象中的属性方法赋值给instance，这样instance既可以当做方法使用，也可以当做对象调用其中的方法，非常灵活！ 。
脚踏实地行，海阔天空飞~ 。
。
最后此篇关于一文弄懂TypeScript中的混合（Mixin）的文章就讲到这里了,如果你想了解更多关于一文弄懂TypeScript中的混合（Mixin）的内容请搜索CFSDN的文章或继续浏览相关文章，希望大家以后支持我的博客！ 。
37
4
0
乐 mixins具有两个(或更多)性质，在同一个容器中组合多个值，或者值与角色一起。但是，据我所知，没有一种直接的方法可以检查不是由您创建的变量中的“混合性”。 这可能是个伎俩 my $foo = 3
我对 sass 比较陌生，但是当我学习它时，Sass 网站说要开始使用 @use 而不是 import，所以经过大量的反复试验，我终于弄清楚了如何使用它与导入相同。 注意:我使用 Prepros 进行
给定一个看起来像这样的代码片段，我如何编写一个函数来检查给定对象是否实现了某个混合？我尝试使用指针转换，但由于它们具有相同的基础，因此每个结果都是非空的，但我猜测有一个模板化的解决方案，但找不到我可以
我正在使用 Typescript 2.2 的 mixin，并且想使用另一个 mixin 的属性。 文档显示可以将 mixins 限制为仅混合到某些类中...... const WithLocation
我如何创建一个将嵌套的 mixin 属性用作参数的 mixin？ 我用下一个例子来解释自己。 我有一个“过渡属性”mixin: .transition-property (@props){ -we
我浏览了language documentation而且 Google Dart 似乎不支持 mixins(接口(interface)中没有方法主体，没有多重继承，没有类似 Ruby 的模块)。我对此
我想编写返回混合的函数/混合。例如我有这个 mixin: @mixin generate-offsets-from-map($class-slug,$type,$from, $to, $step) {
所有 Less 文档和教程都使用 #namespace > .mixin()当它进入命名空间时的语法。但是我发现自己更习惯于 .namespace.mixin()语法，即: .namespace()
我正在努力实现以下目标: class A { def foo() { "foo" } } class B { def bar() { "bar" } } A.mixin B def a = n
出于本问题的目的，将“mixin”视为 https://www.typescriptlang.org/docs/handbook/mixins.html 中所述的函数。 .在这种情况下，mixin 扩
如何在 vue mixins 中组合两个函数？ Vue.mixin({ methods: { functionOne: () => { console.log(1)
我需要重写 mixin 添加的一些成员函数来自第三方库。问题是:mixin 立即在多个第 3 方类定义中使用，在定义 mixin 的同一个脚本文件中。我只能在此脚本之前或之后插入自定义代码，而不能在两
我有一些基本的 mixin，它们使用媒体查询应用一些规则 .on-small(@rules) { @media (@minWidthSmall) { @rules(); } } .on-mediu
我尝试安装 npm 包。所有软件包都安装正确。 但是当我尝试使用 npm start 运行应用程序时当时发生以下错误: ERROR in ./node_modules/css-loader?{"sou
这里有两个mixin @mixin parent { .parent & { @content; } } @mixin child($child) { .#{$child} & {
我在另一个 mixins 中有一个 mixins .background(@url: @base-url , @repeat: repeat, @pos1: left, @pos2: center
我有这个: 如您所见，我目前有一个包含按钮样式混合宏的条件，无论如何我可以自动包含一个吗？例如: @mixin button($color) @include button-#{$color} 最
我有以下代码，可以很好地将各种 std::tuples 转发到我的“BaseSensor”主机类的各种 mixin。 #include // std::cout std::endl #include
我按照概述的方式组织我的 sass (scss) 文件 here ... stylesheets/ | |-- modules/ # Common modules | |
所以，这是我的第一个 mixin .3transitions (@value1,@value2,@value3,@duration){ @value: ~"@{value1},@{value2}
我是一名优秀的程序员,十分优秀！