第4集丨JavaScript 使用原型(prototype)实现继承——最佳实战2

目录

  • 一、临时构造器方式
    • 1.1 代码实现
    • 1.2 代码分析
  • 二. 增加uber属性，用于子对象访问父对象
    • 2.1 实现分析
    • 2.2 代码实现
  • 三. 将继承封装成extend()函数
    • 3.1 代码实现
      • 3.1.1 临时构造器实现extend()
      • 3.1.2 原型复制实现extend2()
    • 3.2 代码测试
      • 3.2.1 测试extend()函数
      • 3.2.1 测试extend2() 函数
  • 四、实例对象原型继承：以实例对象为原型创建新对象
    • 4.1 功能分析
    • 4.2 功能测试

书接上集，在上集中我们给出了一个需求说明，要求利用现学的知识实现原型（prototype）继承，并且我们给出了三种实现方式。但是这三种方式各自有优缺点，都不能很好的满足要求，那是否还有其他更好的实现方式呢？

在看本文之前，诸位可以自己思考下？带着问题去学习总是能够学到更多内容。在以后的岁月中，会找一些有意义的句子，与诸君共勉。

在时间的稿纸上，每个人都在写着自己的历史。当你抓着今天时，你就会前进一步，当你丢弃今天时，你就会停滞不动。

一、临时构造器方式

上集中，我们利用prototype方式实现继承，会带来一个问题：所有的属性都指向了一个相同的对象，父对象就会受到子对象属性的影响。

如何解决这个问题？

这时就必须利用某种中介来打破这种连锁关系。我们可以用一个临时的构造器函数来充当中介。即：我们创建一个空函数f(),并将其原型设置为父级构造器，然后我们既可以用new F()来创建一些不包含父对象属性的对象，同时又可以从父对象prototype中继承一切了。

1.1 代码实现

function Shape(){}
Shape.prototype.name = "Shape";
Shape.prototype.toString = function () {return this.name;
}
function TwoDShape(){}
var F = function(){};
F.prototype = Shape.prototype;
TwoDShape.prototype = new F();
TwoDShape.prototype.constructor = TwoDShape;
TwoDShape.prototype.name = "2D Shape";
function Triangle(side, height){this.side = side;this.height = height;
}
var F = function(){};
F.prototype = TwoDShape.prototype;
Triangle.prototype = new F();
Triangle.prototype.constructor = Triangle;
Triangle.prototype.name = "Triangle";
Triangle.prototype.getArea = function () {return this.side * this.height / 2;
}
var my = new Triangle(5, 10);
console.log(my.getArea());  //25
console.log(my.name);   //Triangle
console.log(my.toString()); //Triangle
var supers = new Shape();
console.log(supers.name);   //Shape 注意

1.2 代码分析

从下图中我们可以看出my 对象的结构

在这里插入图片描述
那么这个时候toString() 方法查找分几步呢？

  • 在本类中查找
  • 在my对象的my.[[Prototype]] 中找，此时该[[Prototype]] 对象为TwoDShape的实例，里面只有一个name = "Triangele"属性。
  • 在my对象的my.[[Prototype]].[[Prototype]] 中找，为Shape的实例，同样里面也只有一个name="2D Shape" 属性
  • 在my.[[Prototype]].[[Prototype]].[[Prototype]] 中找，为Object实例，此时，就已经找到了 toString() 方法。

二. 增加uber属性，用于子对象访问父对象

2.1 实现分析

uber 属性的名字原本应该是“superclass”，但是这样一来显得JavaScript中有了类的概念（在ES6中引入了class），或许该叫super，但是super是JavaScript的保留字，因为改成uber。

  • 我们给构造函数增加一个uber属性，使其值为父类的原型Triangle.uber = TwoDShape.prototype;
  • 如下图所示，此时构造函数Triangle() 中，包含了uber属性
    在这里插入图片描述

2.2 代码实现

function Shape(){}
Shape.prototype.name = "Shape";
Shape.prototype.toString = function () {var result = [];if(this.constructor.uber){result[result.length] = this.constructor.uber.toString();}result[result.length] = this.name;return result.join(', ');
}
function TwoDShape(){}
var F = function(){};
F.prototype = Shape.prototype;
TwoDShape.prototype = new F();
TwoDShape.prototype.constructor = TwoDShape;
TwoDShape.uber = Shape.prototype;   //增加uber属性,指向父类的原型
TwoDShape.prototype.name = "2D Shape";
function Triangle(side, height){this.side = side;this.height = height;
}
var F = function(){};
F.prototype = TwoDShape.prototype;
Triangle.prototype = new F();
Triangle.prototype.constructor = Triangle;
Triangle.uber = TwoDShape.prototype;
Triangle.prototype.name = "Triangle";
Triangle.prototype.getArea = function () {return this.side * this.height / 2;
}
var my = new Triangle(5, 10);
console.log(my.getArea());  //25
console.log(my.name);   //Triangle
console.log(my.toString()); //Shape, 2D Shape, Triangle
var supers = new Shape();
console.log(supers.name);   //Shape

三. 将继承封装成extend()函数

  • 为了代码的封装和重用，我们可以将实现继承的部分抽取出来，定义一个extend()函数。

3.1 代码实现

与extend()相比，extend2() 显得略逊一筹。因为这里执行的是子对象原型的逐一拷贝，而非简单的原型链查询。所以我们必须要记住，这种方式仅适用于只包含基本数据类型的对象，所有的对象类型（包括函数和数组）都是不可复制的，因为他们只支持引用传递。

这里toString()方法实际上是同一个函数对象。这里只是一个函数引用，函数本身并没有再次被创建。

优缺点：

  • extend2()方法的效率要低于extend()方法，主要是前者对部分原型属性进行了重建。
  • 当然了，这对于只包含基本数据类型的对象来说，是有好处的。因为这样做能使属性查找操作更多的停留在对象本身，从而减少了原型链上的查找。

3.1.1 临时构造器实现extend()

//定义extend函数
function extend(Child, Parent){var F = function () {};F.prototype = Parent.prototype;Child.prototype = new F();Child.prototype.constructor = Child;Child.uber = Parent.prototype;}

3.1.2 原型复制实现extend2()

function extend2(Child, Parent){var p = Parent.prototype;var c = Child.prototype;for (var i in p){c[i] = p[i];}c.uber = p; //扩展子类原型，增加一个uber属性
}

3.2 代码测试

3.2.1 测试extend()函数

  • 利用上述extend() 函数实现继承。

//定义Shape类
function Shape(){}
Shape.prototype.name = "Shape";
Shape.prototype.toString = function () {return this.name;
}//定义TwoDShape类
function TwoDShape(){}
extend(TwoDShape, Shape);
TwoDShape.prototype.name = "2D Shape";//定义Triangle类
function Triangle(side, height){this.side = side;this.height = height;
}
extend(Triangle, TwoDShape);
Triangle.prototype.name = "Triangle";
Triangle.prototype.getArea = function () {return this.side * this.height / 2;
}//测试
var my = new Triangle(5, 10);
console.log(my.getArea());  //25
console.log(my.name);   //Triangle
console.log(my.toString()); // Triangle
var supers = new Shape();
console.log(supers.name);   //Shape

3.2.1 测试extend2() 函数

//定义Shape类
function Shape(){}
Shape.prototype.name = "Shape";
Shape.prototype.toString = function () {return this.name;
}//定义TwoDShape类
function TwoDShape(){}
extend(TwoDShape, Shape);//extend测试结果
var td = new TwoDShape();console.log(td.name);   //Shapeconsole.log(TwoDShape.prototype.name); //Shapeconsole.log(td.__proto__.name); //Shapeconsole.log(td.hasOwnProperty("name")); //falseconsole.log(td.__proto__.hasOwnProperty("name"));   //false//extend2测试结果
var td = new TwoDShape();
console.log(td.__proto__.hasOwnProperty("name"));   //true
console.log(td.__proto__.hasOwnProperty("toString"));   //true
console.log(td.__proto__.toString == Shape.prototype.toString); //true

四、实例对象原型继承：以实例对象为原型创建新对象

4.1 功能分析

基于这种在对象之间直接构建继承关系的理念，我们可以创建一个object()函数，接受父对象，并返回一个以该对象为原型的新对象。这和Object.create() 类似。如下代码所示：

function object(o){var F = function(){};F.prototype = o;return new F();
}

如果需要访问父类，则可加添加uber属性。

function object(o){var n;var F = function(){};F.prototype = o;n = new F();n.uber = o;return n;
}

4.2 功能测试

//定义Shape类function Shape(){}Shape.prototype.name = "Shape";Shape.prototype.toString2 = function () {return this.name;}var shapeObj = new Shape();var twoDShape = object(shapeObj);twoDShape.name = "HHH"console.log(twoDShape.toString2()); //HHH
  • twoDShape 对象的结构如下所示
    在这里插入图片描述

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.hqwc.cn/news/19189.html

如若内容造成侵权/违法违规/事实不符，请联系编程知识网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

【实战项目】c++实现基于reactor的高并发服务器

【实战项目】c++实现基于reactor的高并发服务器

基于Reactor的高并发服务器，分为反应堆模型，多线程，I/O模型，服务器，Http请求和响应五部分 全局 反应堆模型 Channel 描述了文件描述符以及读写事件，以及对应的读写销毁回调函数，对应存储arg读…
阅读更多...
优化SQL查询实现高效数据检索(二)

优化SQL查询实现高效数据检索(二)

大家好，本文将接着上文，继续介绍SQL查询优化的重要性以及如何优化SQL查询以实现更快的数据检索。 适当使用通配符 适当使用通配符对于优化SQL查询尤为重要，特别是在匹配字符串和模式方面。通配符是用于SQL查询中查找特定模式的特殊字符&…
阅读更多...
K8s（kubernetes）集群搭建及dashboard安装、基础应用部署

K8s（kubernetes）集群搭建及dashboard安装、基础应用部署

基础介绍 概念 本质是一组服务器集群，在集群每个节点上运行特定的程序，来对节点中的容器进行管理。实现资源管理的自动化。 功能 自我修复弹性伸缩服务发现负载均衡版本回退存储编排 组件 控制节点(master)-控制平面 APIserver：资源操作…
阅读更多...
Linux ❀ Openssh 8.9p1源码升级教程

Linux ❀ Openssh 8.9p1源码升级教程

文章目录 升级操作注意事项：1. 安装依赖2. 执行升级2.1 上传压缩包并保存配置2.2 开始升级 升级操作注意事项： 编译过程需要依赖，必须安装完成!!!SSH服务升级过程可能会导致无法远程连接服务器!!!若必须远程登录必须确认telnet服务可用!!!升…
阅读更多...
第四十六章Java包（package）

第四十六章Java包（package）

在编写 Java 程序时，随着程序架构越来越大，类的个数也越来越多，这时就会发现管理程序中维护类名称也是一件很麻烦的事，尤其是一些同名问题的发生。有时，开发人员还可能需要将处理同一方面的问题的类放在同一个目录下&a…
阅读更多...
Android - AIDL

Android - AIDL

一、概念 二、使用 2.1 Server 端 2.1.1 创建 .aidl 文件 Module右键→New→AIDL→AIDL File（如果不可选，在build.gradle的buildFeatures节点添加aidl true）。 在创建的接口中定义抽象方法。 interface IDemoAidlInterface {//自己的业…
阅读更多...
【STM32MP135】修复EMMC模式启动时，uboot启动识别为usb0设备问题

【STM32MP135】修复EMMC模式启动时，uboot启动识别为usb0设备问题

文件路径：u-boot-stm32mp-v2021.10-stm32mp1-r1/arch/arm/dts/stm32mp135d-atk.dts 文件路径：u-boot-stm32mp-v2021.10-stm32mp1-r1/configs/stm32mp13_defconfig
阅读更多...
基于霍夫变换的航迹起始算法研究（Matlab代码实现）

基于霍夫变换的航迹起始算法研究（Matlab代码实现）

目录 💥1 概述 📚2 运行结果 🎉3 参考文献 👨‍💻4 Matlab代码 💥1 概述 一、设计内容 利用Hough变换处理量测得到的含杂波的二维坐标，解决多目标航迹起始问题。使用Matlab进行仿真&#x…
阅读更多...
TeeChart for.NET Crack

TeeChart for.NET Crack

TeeChart for.NET Crack TeeChart for.NET为各种图表需求提供了图表控件，包括金融、科学和统计等重要的垂直领域。它可以处理您的数据，在各种平台上无缝创建信息丰富、引人入胜的图表，包括Windows窗体、WPF、带有HTML5/Javascript渲染的ASP.N…
阅读更多...
k8s+springboot+CronJob 定时任务部署

k8s+springboot+CronJob 定时任务部署

kubernetesspringbootCronJob 定时任务配置如下代码： cronjob.yaml k8s 文件 apiVersion: batch/v1 kind: CronJob metadata:name: k8s-springboot-demonamespace: rz-dt spec:failedJobsHistoryLimit: 3 #执行失败job任务保留数量successfulJobsHistoryLimit: 5 …
阅读更多...
2023.7月最新版idea安装Jrebel实现热部署，可解决后端启动等待时间过长问题

2023.7月最新版idea安装Jrebel实现热部署，可解决后端启动等待时间过长问题

2023.7最新版idea热部署配置 一 下载jrebel插件二 激活我使用的方法 三 配置方式1 设置自动编译2 设置 compiler.automake.allow.when.app.running3 勾选项目，然后以Rebel方式启动 4 Settings查看Activation情况四 报错解决1 启动失败 2 端口被占用 五 总结 一 下载…
阅读更多...
vue3+vite+Ts 基于Antv/x6 绘制流程图

vue3+vite+Ts 基于Antv/x6 绘制流程图

需求效果： 需求： 实现一个流程图，双击可对相应的组件进行一些功能操作； 工具栈： 这里使用antv/x6， 基于vue3vitets进行开发 官网地址： https://x6.antv.antgroup.com/examples/showcase/pra…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023