【延伸学习】TS（JS）类的继承（prototype、call、apply，extends）

最新推荐文章于 2024-05-08 20:50:21 发布
最新推荐文章于 2024-05-08 20:50:21 发布
阅读量1.6k 收藏 18
点赞数 18
分类专栏： CocosCreator引擎源码分析 文章标签： javascript call prototype 寄生式继承 组合继承 原型模式 extends
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/a42626423/article/details/135766149
版权
文章详细介绍了JavaScript中类的继承机制，包括通过原型链、原型方法的继承、call和apply实现成员变量和方法的继承，以及ES6中的extends关键字。作者还对比了不同方式的优缺点，强调了组合继承和寄生式继承的使用和原理。
摘要由CSDN通过智能技术生成

PS：文末附上完整的代码（是在CocosCreator下运行的）

一. 基（父）类
 

//----------------------------- 狗 -----------------------------//
// “狗”类的构造函数
function Dog(name, age){
    this.name = name
    this.age = age
    this.luckyNumber = [1,2,3]
}

// 类方法，有点像静态方法，不用创建对象，用类名直接调用的方法
Dog.eat = function(){
    console.log("dog eat")
}

// 通过原型设置狗的两个原型方法
Dog.prototype.showName = function(){
    console.log("dog - name = ", this.name)
}

Dog.prototype.showAge = function(){
    console.log("dog - age = ", this.age)
}

console.log("--------------------- 狗-测试 ---------------------")
var dog = new Dog("lucky", 18)
Dog.eat()
dog.showName()
dog.showAge()
console.log("dog info = ", dog.name, dog.age)

基类包含三个成员变量（名字、年龄）还有一个后面用于测试的数组，两个原型方法（输出名字，输出年龄），还有一个类似静态函数的方法。

基类唯一测试的，就是用类名可以直接调用eat这个静态方法。

二. 继承原型方法-通过遍历prototype

//----------------------------- 狗-比熊 -----------------------------//
// 比熊的构造函数
function Dog_BX(){
    this.new_name = "bixiong"
}

// 使用原型来继承方法【写法1】
Dog_BX.prototype = {}
for(var i in Dog.prototype){
    Dog_BX.prototype[i] = Dog.prototype[i]
}

Dog_BX.prototype.showName = function(){
    console.log("dog_bx name = ", this.new_name)
}


console.log("--------------------- 比熊-测试 ---------------------")
var bx_Dog = new Dog_BX()
bx_Dog.showName()
bx_Dog.showAge()
console.log("bx_dog info = ", bx_Dog.name, bx_Dog.age, bx_Dog.new_name)

代码：
1.通过遍历基类的prototype方法，来把基类的原型方法赋值给比熊类，从而实现了方法的继承。
2.通过重写showName的原方法，实现了函数的重载。

输出：
1.showName方法的输出，证实里调用的是子类的showName，重载成功。
2.showAge也调用成功了，调用的是父类的showAge，但由于子类没继承父类的成员变量（更没有赋值了），所以输出的age是未定义。
3.输出结果也同样显示，并没有继承父类的成员变量。

核心结论：
通过遍历prototype再赋值给子类，来实现原型方法上的继承。

三.继承成员变量-通过call

//----------------------------- 狗-萨摩 -----------------------------//
// 萨摩的构造函数
function Dog_SM(age){
    // 使用call继承成员变量【写法1】
    Dog.call(this, "sm", age)
}

console.log("--------------------- 萨摩-测试 ---------------------")
var sm_Dog = new Dog_SM(10)
console.log("is function exist = ", sm_Dog.showName, sm_Dog.showAge)
console.log("sm_Dog info = ", sm_Dog.name, sm_Dog.age)

代码：
1.Dog.call，使用call来实现继承父类成员函数的功能。

输出：
1.可以看到父类的原型方法并没有被继承到。
2.父类的成员变量被继承了。

核心结论：
使用call来实现继承父类成员函数的功能。其实大致原理是通过改变this的绑定，调用父类构造函数进行赋值时，把赋值的内容赋到子类的this上，从而实现了继承父类成员函数的功能。

四.通过组合实现完美继承

//----------------------------- 狗-拉布拉多 -----------------------------//
// 拉布拉多构造函数
function Dog_LBLD(age){
    // 使用apply继承成员变量【写法2】
    Dog.apply(this, ["lbld", age])
}

// 使用原型来继承方法【写法2】
var obj = function() {}
obj.prototype = Dog.prototype
Dog_LBLD.prototype = new obj()




console.log("--------------------- 拉布拉多-测试 ---------------------")
var lbld_Dog = new Dog_LBLD(5)
lbld_Dog.showName()
lbld_Dog.showAge()
console.log("lbld_Dog info = ", lbld_Dog.name, lbld_Dog.age)

代码：
1.上面使用了call，这里使用apply，实现了成员变量的继承。
PS：我还没太分得清call和apply的区别，也就一个传可变长参数，一个传数组作为参数……
2.通过把Dog.prototype赋值给obj，再new一个obj给Dog_LBLD实现了原型方法的继承。
PS：为什么要写得这么绕？大致就和深拷贝浅拷贝的原理有关，下文【5】再详述吧。

输出：
简单概括，就是成员变量和原型函数都继承下来了，实现了完美的继承。

核心结论：
分别通过不同的方式组合起来实现了成员变量和原型函数的继承。
虽然标题的“完美”二字只是代表成员变量和原型函数都同时继承下来的意思，但当前这种继承方式应该是避开了浅拷贝的问题了，算是比较好的继承方法了。

PS：上文我写了两种成员变量，两种原型函数的继承法防，都可以选出来组合着使用的。

五.原型链直接继承（不建议这样做）

function Dog_BM(){

}

Dog_BM.prototype = new Dog("BoMei", 9)




console.log("--------------------- 博美-测试 ---------------------")
var bm_Dog = new Dog_BM()
var bm_Dog2 = new Dog_BM()
bm_Dog.age = 10
bm_Dog.luckyNumber.push(4)
bm_Dog.showName()
bm_Dog.showAge()
console.log("bm_dog info = ", bm_Dog.name, bm_Dog.age, bm_Dog.luckyNumber)
console.log("bm_dog2 info = ", bm_Dog2.name, bm_Dog2.age, bm_Dog2.luckyNumber)

代码：
1.非常简单的，直接new Dog赋值给prototype

输出：
1.成功调用了父类的showName以及showAge方法，并能显示出name和age两个成员函数来。
2.根据【bm_dog info】显示，也顺利的对age和luckyNumber数组进行修改。
3.这种写法方便时方便，但有个致命的缺点，他对引用的处理是浅拷贝的，可以看到，我们只修改了bm_Dog的luckyNumber数组，添加了4进去，可bm_dog2的luckyNumber数组居然也有4. 所以强烈不建议使用这种方式来做继承。 此处也回应了上文【4】中对prototype的处理为什么要这么绕了。

PS：在【4】中对prototype的处理中，我也尝试过用更简单的处理方法：
Dog_LBLD.prototype = Dog.prototype
这样写更加大错特错，因为这样二者的原型函数就会指向同一个内存，当我在Dog_LBLD里重载showName时，最终发现，连父类Dog的ShowName也被修改了。

核心结论：
写法很简单，缺点很明显，就是通过浅拷贝来做继承，要是成员变量存在引用，修改成员变量时，可能会影响到所有对象的成员变量。

六.寄生式组合继承（最优解）

//----------------------------- 狗-金毛 -----------------------------//
function Dog_JM(age){
    // 使用apply继承成员变量【写法2】
    Dog.apply(this, ["jinmao", age])
}

// 使用原型来继承方法【写法3】
Dog_JM.prototype = Object.create(Dog.prototype)




console.log("--------------------- 金毛-测试 ---------------------")
var jm_Dog = new Dog_JM(5)
jm_Dog.showName()
jm_Dog.showAge()
console.log("jm_Dog info = ", jm_Dog.name, jm_Dog.age, jm_Dog.luckyNumber)

容许我说一段废话文学吧……有点气死我了……

文章写到此处，其实前5个例子都是我手打，我都能理解的……最后这第六个例子，我看别的文章里说的，说是做继承的最优解。因为别的文章中有提到一种“组合继承”的方式，需要调用多次父类构造函数，效率不是最优（我以为他说的组合继承就是我【4】里面写得那种……）。用这种寄生式继承能完美解决，而这种方式一个我不理解的地方就是Object.create，我不知道他的实现源码是什么。 所以我就当做他是原型继承我想到的第三种方法……

后来我觉得不能不求甚解，就跑去找Object.create的实现源码，结果发现，Object.create这个方法的内部逻辑就是文章【4】里面原型继承的【写法2】………………  当时我写【4】的时候就觉得很好了，还用“完美继承”来形容……

核心结论：
所以这个方法【6】其实和方案【4】是一模一样的………………

七.extends

//----------------------------- 狗-贵宾 -----------------------------//
class Dog2{
    protected name

    constructor(name){
        this.name = name
    }

    showName = function(){
        console.log("Dog2 name = ", this.name)
    }
}

class Dog_GB extends Dog2{
    private age
    constructor(name, age){
        // 初始化父类构造函数
        super(name)
        this.name = name
        this.age = age
    }

    getName(){
        return this.name
    }

    getAge(){
        return this.age
    }
}

代码：
1.父类一个成员变量，一个成员函数，一个构造函数。
2.子类构造函数一定要调用super对父类进行初始化，然后子类新增二个成员函数和一个成员变量。

输出：
1.成功使用了父类的方法。
2.成功使用了子类的方法来获取父类的成员变量，证明成员变量继承成功。

核心结论：
就是用extends来做了一个类的继承测试……

以上就是对继承的全部测试了，下面贴上完全的全部代码：

const {ccclass, property} = cc._decorator;

//----------------------------- 狗 -----------------------------//
// “狗”类的构造函数
function Dog(name, age){
    this.name = name
    this.age = age
    this.luckyNumber = [1,2,3]
}

// 类方法，有点像静态方法，不用创建对象，用类名直接调用的方法
Dog.eat = function(){
    console.log("dog eat")
}

// 通过原型设置狗的两个原型方法
Dog.prototype.showName = function(){
    console.log("dog - name = ", this.name)
}

Dog.prototype.showAge = function(){
    console.log("dog - age = ", this.age)
}

//----------------------------- 狗-比熊 -----------------------------//
// 比熊的构造函数
function Dog_BX(){
    this.new_name = "bixiong"
}

// 使用原型来继承方法【写法1】
Dog_BX.prototype = {}
for(var i in Dog.prototype){
    Dog_BX.prototype[i] = Dog.prototype[i]
}

Dog_BX.prototype.showName = function(){
    console.log("dog_bx name = ", this.new_name)
}

//----------------------------- 狗-萨摩 -----------------------------//
// 萨摩的构造函数
function Dog_SM(age){
    // 使用call继承成员变量【写法1】
    Dog.call(this, "sm", age)
}

//----------------------------- 狗-拉布拉多 -----------------------------//
// 拉布拉多构造函数
function Dog_LBLD(age){
    // 使用apply继承成员变量【写法2】
    Dog.apply(this, ["lbld", age])
}

// 使用原型来继承方法【写法2】
var obj = function() {}
obj.prototype = Dog.prototype
Dog_LBLD.prototype = new obj()

//----------------------------- 狗-博美 -----------------------------//
function Dog_BM(){

}

Dog_BM.prototype = new Dog("BoMei", 9)

//----------------------------- 狗-金毛 -----------------------------//
function Dog_JM(age){
    // 使用apply继承成员变量【写法2】
    Dog.apply(this, ["jinmao", age])
}

// 使用原型来继承方法【写法3】
Dog_JM.prototype = Object.create(Dog.prototype)

//----------------------------- 狗-贵宾 -----------------------------//
class Dog2{
    protected name

    constructor(name){
        this.name = name
    }

    showName = function(){
        console.log("Dog2 name = ", this.name)
    }
}

class Dog_GB extends Dog2{
    private age
    constructor(name, age){
        // 初始化父类构造函数
        super(name)
        this.name = name
        this.age = age
    }

    getName(){
        return this.name
    }

    getAge(){
        return this.age
    }
}

@ccclass
export default class NewClass extends cc.Component {

    onLoad(){
        console.log("--------------------- 狗-测试 ---------------------")
        var dog = new Dog("lucky", 18)
        Dog.eat()
        dog.showName()
        dog.showAge()
        console.log("dog info = ", dog.name, dog.age, dog.luckyNumber)

        console.log("--------------------- 比熊-测试 ---------------------")
        var bx_Dog = new Dog_BX()
        bx_Dog.showName()
        bx_Dog.showAge()
        console.log("bx_dog info = ", bx_Dog.name, bx_Dog.age, bx_Dog.new_name)

        console.log("--------------------- 萨摩-测试 ---------------------")
        var sm_Dog = new Dog_SM(10)
        console.log("is function exist = ", sm_Dog.showName, sm_Dog.showAge)
        console.log("sm_Dog info = ", sm_Dog.name, sm_Dog.age)

        console.log("--------------------- 拉布拉多-测试 ---------------------")
        var lbld_Dog = new Dog_LBLD(5)
        lbld_Dog.showName()
        lbld_Dog.showAge()
        console.log("lbld_Dog info = ", lbld_Dog.name, lbld_Dog.age, lbld_Dog.luckyNumber)

        console.log("--------------------- 博美-测试 ---------------------")
        var bm_Dog = new Dog_BM()
        var bm_Dog2 = new Dog_BM()
        bm_Dog.age = 10
        bm_Dog.luckyNumber.push(4)
        bm_Dog.showName()
        bm_Dog.showAge()
        console.log("bm_dog info = ", bm_Dog.name, bm_Dog.age, bm_Dog.luckyNumber)
        console.log("bm_dog2 info = ", bm_Dog2.name, bm_Dog2.age, bm_Dog2.luckyNumber)

        console.log("--------------------- 金毛-测试 ---------------------")
        var jm_Dog = new Dog_JM(5)
        jm_Dog.showName()
        jm_Dog.showAge()
        console.log("jm_Dog info = ", jm_Dog.name, jm_Dog.age, jm_Dog.luckyNumber)

        console.log("--------------------- 贵宾-测试 ---------------------")
        var gb_Dob = new Dog_GB("guibin", 13)
        gb_Dob.showName()
        console.log("gb_Dog info = ", gb_Dob.getName(), gb_Dob.getAge())
    }
}

全部输出日志：

0zien0
关注
  • 18
    点赞
  • 踩
  • 18
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
ts 使用 prototype 实现单例模式并支持推断
阿豪
04-04 792
原文链接: ts 使用 prototype 实现单例模式并支持推断 ...
TS bind call apply区别以及实现
最新发布
百合花的IT
06-18 498
Ts中bind call apply区别以及实现
TS学习之类
weixin_30892037的博客
10-27 482
定义类 class Person { name: string; //属性 constructor(_name: string) { this.name = _name; } //构造函数 sayHello(): string { return "Hi,everyone" } //方法...
TS-类的继承
qq_40147756的博客
05-08 930
ts 中类的继承
typescript学习之路(四) —— ts类的继承（包含es5以及es6的类继承）
北极那企鹅丶
11-21 4466
上一文已经写了es5，es6等类的定义，所以本章主要写es5和es6的继承，由于es6的继承和ts的继承如出一辙，只是加了类型定义而已，所以ts的继承稍微写下，不会太详细。 文章目录es5继承原型链继承构造函数继承组合继承es6继承ts继承 es5继承 原型链继承 所谓原型链继承，就是将一个实例对象挂载到另一个原型上。即继承对象的prototype = new 实例化的对象 // 声明一个Pa...
ts（typescript）面向对象之类的继承
twinkle的博客
01-23 2243
ts（typescript）面向对象之类的继承 类继承的作用 继承可以描述类与类之间的关系， 例如： 在斗地主的小游戏中，我们只看牌,牌里面有分4种花色的牌（除了大小王）,♥，♠，♦，♣，我们可以知道♥的牌是牌,♠的牌是牌……,形如：在中文的描述种，什么是什么，例如 A 是 B，我们就可以理解成 A 是 B的子集（数学角度上）B 包含 A 在程序编程思想中，如果A和B都是类，并且可以描述为A是B，则A和B形成继承关系： B是父类，A是子类 B派生A，A继承自B B是A的基类，A是B的派生类 如果A继
17-ts中的类的继承
m0_46163764的博客
01-20 2000
TypeScript中类的继承 ​ TypeScript中类的继承和es6一样，通过extends关键字进行继承。子类在继承后若要复写父类的constructor方法需要先调用super()方法，并且要传入父类中构造函数定义的参数。如下代码中复写父类的constructor方法中先调用了super()方法，并传入了父类的constructor()方法中要求传入的参数age。如果子类的方法和父类的同名，子类中的方法会覆盖父类的方法。 //父类Animal class Animal{ age: numb
ts学习---原型
D_JOY_W的博客
06-20 1111
原型学习
JavaScript & TypeScript 学习总结
ningziya的博客
07-10 259
typescript:javasscript的超集 ，添加了类型系统的 JavaScript，适用于任何规模的项目。 我们都知道JavaScript是一种弱类型的语言。而TypeScript增强了它的类型。 静态类型是指编译阶段就能确定每个变量的类型 编译ts文件(生成对应的js文件，) 原始数据类.........
详解Typescript中继承的实现
黑洞视界的博客
05-19 3057
学习javascript也有一段时间了，打算从今天开始记录自己的一些理解。 此篇文章主要是记录自己对Typescript在编译成es5的代码时如何实现继承的理解。 关于闭包的原理和原型继承，请参考《JavaScript高级程序设计》，上面解释地很清楚。
typeScript学习
唯爱赞多的博客
03-02 3683
ts学习
typescript-prototype:TypeScript原型
03-21
打字稿原型 该软件包包含Typescript软件包原型的简单示例。它是一部分，以学习如何编写标准代码和TDD的常用用法。 请参阅文档以及如何在上进行。并逐步查看此代码的开发 与 在 安装 该软件包不是自洽的：它需要安装 。 然后您可以通过github下载该软件包： $ git clone https://github.com/bilardi/typescript-prototype 或者您可以通过npm安装： $ npm install simple-sample 用法 阅读文件中的单元测试以使用它。这是最佳做法。 import { MyClass } from 'simple-sample' ; console . log ( new MyClass ( true ) ) ; 发展 逐步测试代码是普遍使用的方法，而unittest模块是单元测试和功能测试的良好开端。 使用单元测试模
TS装饰器介绍
getTheCheeseOfGod的博客
09-18 3852
装饰器模式简介 装饰器模式是一种重要的设计模式，它能够以对客户透明的方式动态地给一个对象附加上更多的责任，为明晰它的概念，请看下面的例子： 在一个末日生存游戏里，你有一个安全屋和一张床，每次睡觉都可以恢复一定的精力，但是初始的床什么都没有，每天睡在木板上只能恢复20点精力，某天你出外搜寻了材料并制作了一个床垫，将床垫放在床上，每次睡觉可以额外恢复20点精力，之后你又找到了被絮和三件套，甚至还给床进行改装增加了按摩功能，每次睡觉可以额外恢复的精力越来越多了… 在这个例子中，对于使用床的人而言，“睡觉”这个
复盘Js
qq_40519017的博客
07-09 402
1、call,apply和bind call和apply可以调用函数,改变this,实现继承和借用别的对象的方法; 1.1 call和apply用法 间接调用函数,改变作用域的this值 劫持其他对象的方法 var foo = { name:"张三", logName:function(){ console.log(this.name); } } var bar={ name:"李四" }; foo.logName.call(bar);//李四 // 实质是cal
prototype的使用和普通函数的this的类型规定(ts中)
weixin_49665042的博客
06-23 1128
prototype的使用和普通函数this的type类型
JavaScript之继承
TSORA-C的博客
05-28 125
JavaScript之继承什么是继承继承方式属性拷贝原型式继承原型链继承借用构造函数组合继承借用构造函数 + 深拷贝 以下内容转载编辑自LiYajie 什么是继承 js中的继承就是获取存在对象已有属性和方法的一种方式. 继承方式 属性拷贝 就是将对象的成员复制一份给需要继承的对象. // 创建父对象 var superObj = { name:'liyajie', age:25...
【TS笔记】继承
m0_56688210的博客
07-31 2459
TS继承
TS继承的使用
weixin_42491648的博客
11-15 1105
ts类继承extends使用super关键字 使用
深度掌握TS继承(上)
coder__wang的博客
12-09 1569
只有深度掌握TS继承，才会拥有更深厚的 JS 原型、原型链功底，也能为阅读Vue3,React 源码或其他流行框架源码铺路，因为不管是哪种源码，JS原型链继承一定会用到！
ts extends多个类
07-28
在 TypeScript 中，一个类可以通过使用 `extends` 关键字来继承另一个类。与其他面向对象语言类似，TypeScript 不支持多继承，即一个类只能直接继承自一个父类。 例如，我们有两个类 `A` 和 `B`，如果想让一个类 `C` 继承这两个类，我们可以通过以下方式实现： ```typescript class A { // ... } class B { // ... } class C extends A { // ... } const c = new C(); ``` 在上面的例子中，类 `C` 继承自类 `A`，但没有继承自类 `B`。这是因为 TypeScript 不支持多继承。如果你想在一个类中使用 `A` 和 `B` 类的功能，可以考虑使用组合或接口的方式来解决。 希望这个回答对你有帮助！如有更多问题，请随时提问。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值