深入javascript-实现“继承”

javascript学习——对象的继承 JavaScript 通过构造函数生成新对象,因此构造函数可以视为对象的模板。实例对象的属性和方法,可以定义在构造函数内部。var cat1 = new Cat('大毛', '白色');cat1.name // '大毛'cat1.color // '白色'上面代码中,Cat函数是一个构造函数,函数内部定义了name属性和color属性,所有实例对象(上例是cat1)都会生成这两个属性,即这两个属性会定义在实例对象上面。通过构造函数为实例对象定义属性,虽然很方便,但是有一个缺点。 阅读详情

我在前面介绍了,javascript的继承机制,还有如何“封装”数据和方法,今天再来说一说,如何来实现对象之间的“继承”。

先创建一个“动物”对象的构造函数。

function Animal(){
	this.species = "动物";
}
	
再来创建一个“猫”对象的构造函数。
function Cat(name,color){
	this.name = name;
	this.color = color;
}

看我是如何是实现对象之间的继承,让Cat继承Animal的。

1.通过函数绑定

 这种方法是比较简单的方法,使用call或apply方法,将父对象的构造函数绑定在子对象上,即在子对象构造函数中加一行:

functionCat(name,color){
Animal.apply(this,arguments);
this.name= name;
this.color= color;
}
varcat1 = new Cat("大毛","黄色");
alert(cat1.species);// 动物
 

2.利用 prototype 模式

这种方法是比较常见的方法,主要利用了对象的prototype属性。

如果“Cat”的prototype对象,指向一个|Animal的实例,那么所有“猫”的实例,就能继承Animal了。

Cat.prototype= new Animal();
Cat.prototype.constructor= Cat;
varcat1 = new Cat("大毛","黄色");
alert(cat1.species);// 动物

ps:

第一行代码:我们将Cat的prototype对象指向了一个Animal的实例。它相当于完全删除了prototype对象原先的值,然后赋了新值。

第二行代码:因为每个对象的prototype对象都有一个constructor属性,指向自己的构造函数,执行完第一行代码后,该属性指向的是Animal。执行该代码后,可使得该属性重新指向Cat的构造函数,保证Cat构造函数的完整性。

接下来的代码就很容易理解了,就不再做详细解释了。

3.直接继承prototype

这种方式是第二种方式的改进。针对这样的情景

functionAnimal(){ }
Animal.prototype.species= "动物";

然后,将Cat的prototype对象,指向Animal的prototype对象,这样就完美的继承了。

Cat.prototype= Animal.prototype;
Cat.prototype.constructor= Cat;
varcat1 = new Cat("大毛","黄色");
alert(cat1.species);// 动物

Ps

该方法的优缺点也是比较明显的:

优点:

这样做的优点是效率比较高(不用执行和建立Animal的实例了),比较省内存

缺点:

缺点是Cat.prototype和Animal.prototype现在指向了同一个对象,那么任何对Cat.prototype的修改,都会反映到Animal.prototype。

上面第二行代码,虽然保证了Cat的prototype的constructor指向了Cat,但是此时Animal的prototype的constructor也指向了Animal。破坏了Animal的对象的完整性。


总结:通过这三种方式,完全可以满足我们“继承”的需要了,这里主要依靠于prototype的功劳,要想熟悉这几种方式,还是要下功夫了解一下prototype对象了。

解释“this”的工作原理,原型继承如何工作,以及如何实现手写JS继承。还包括Array对象自带的方法列举,以及如何使用闭包。 这些概念涵盖了 JavaScript 的核心知识点,掌握它们能够帮助你更好地理解和使用 JavaScript。 阅读详情

相关推荐

SAP 人力资源工资配置项3---工资项配置

工资项设置

xiouluoyang的专栏 1万+

js创建对象的几种方式

js常用的几种创建对象的方式有: {} new Object() 使用字面量 工厂模式 构造函数模式(constructor) 原型模式(prototype) 构造函数+原型模式 还有一些不常用的方式,如动态原型,寄生构造函数,稳妥构造函数。 一、通过{}创建对象 demo1: 01.newObj-1.html <script> 'use strict'; //使用strict模式 /** 使用{}创建对象,等同于 new Object();

qq_41648408的博客 6226

手把手教你用ET-BERT预训练模型搞定加密流量分类(附完整代码)

本文详细介绍了如何使用ET-BERT预训练模型实现加密流量分类,包括环境配置、数据预处理、模型微调及优化策略。通过实战代码示例,帮助开发者快速掌握这一技术,提升网络安全领域的加密流量分析能力。

weixin_29166013的博客 494

前端面试题以及答案

Doctype作用?严格模式与混杂模式如何区分?答:DOCTYPE 位于文档的最前面,html标签之前,告诉浏览器以何种方式解析该文档。不同的文档模式主要影响css的呈现,尤其是盒模型的解析。所谓的混杂模式指的是浏览器以相对宽松的方式向后兼容,模拟老式浏览器站点的行为。以防止老式站点无法工作;严格模式的js的运作模式和排版是以浏览器的最高标准来执行的。一般以标准模式呈现页面浏览器根据doct...

肖肖肖丽珠的博客 2322

MatLab Desired port was :31515解决方案

前言:使用的MatLabR2022b今天突然出现了错误,在程序中打不开文件。后尝试了下面的方法,可以解决。后面还有另一种方法,上面方法如果行不通,大家可以尝试一下。搜索栏输入:firewall.cpl。找到相关项,右键属性,设置为允许。

qq_42212501的博客 1341

三菱FX3U PLC红绿灯ST编程实战:从基础逻辑到急停功能完整实现

本文以十字路口红绿灯控制为例,详细讲解了三菱FX3U PLC使用ST编程的完整实战过程。内容涵盖从基础时序逻辑、状态机设计,到急停功能、黄灯闪烁、昼夜模式切换等高级功能的实现,并提供了代码优化与调试技巧,帮助工程师掌握结构化文本在工业控制中的清晰、结构化应用。

weixin_29070861的博客 533

js中通过构造函数创建对象

/* js中通过构造函数创建对象 * 通过this完成属性的定义 */ function Person(name,age){ this.name = name; this.age = age; //这样定义的缺点:每次创建对象会占用新的内存空间 /* this.say = function(){ alert(this.name+","+this.age); }*/ th

qq1099866969的专栏 1304

DIY电磁炉核心驱动方案:IR2153PBF自振荡半桥芯片实战指南(附电路图)

本文详细介绍了IR2153PBF自振荡半桥驱动芯片在DIY电磁炉核心驱动方案中的实战应用。该芯片集成了振荡器与600V高压驱动能力,仅需少量外围元件即可生成互补带死区的PWM信号,极大简化了半桥逆变电路设计。文章深入解析了其工作原理、关键参数,并提供了完整的电路设计、PCB布局指南及调试步骤,帮助电子爱好者构建稳定高效的感应加热驱动核心。

beer8的博客 585

深刻理解JavaScript基于原型的面向对象

  主题一、原型   一、基于原型的语言的特点   1 只有对象,没有类;对象继承对象,而不是类继承类。   2  “原型对象”是基于原型语言的核心概念。原型对象是新对象的模板,它将自身的属性共享给新对象。一个对象不但可以享有自己创建时和运行时定义的属性,而且可以享有原型对象的属性。   3 除了语言原生的顶级对象,每一个对象都有自己的原型对象,所有对象构成一个树状的层级系统...

4 the simplicity and beauty 463

【2026最新版】python点云处理算法汇总(长期更新版)

python点云处理算法整理。博客长期更新,最近一次更新时间为:2026年10月4日。

点云侠的博客 42万+

芒果YOLOv7改进48:主干篇:独家首发改进:目标检测新范式骨干PPHGNetv2改进版,充分融合信息特征,提升YOLOv7检测能力

YOLOv7代码改进实践 | 独家首发改进 PPHGNetv2 改进版结构

包括YOLOv5、YOLOv7、YOLOv8等模型改进 1849

javascript王国的一次旅行,一个没有类的世界怎么玩转面向对象?

1 前言作为Java 帝国的未来继承人,Java小王子受到了严格的教育, 不但精通Java语言、Java虚拟机、java类库和框架,还对各种官方的Java规范了如指掌。...

码农翻身 711

Open3D 读取、保存、显示点云【2025最新版】

paint_uniform_color给所有的点上一个统一的颜色。博客长期更新,本文最近更新时间为:2025年1月1日。

点云侠的博客 37万+

JavaScript实现"继承"

实现方法:在javascript中没有继承的概念,ECMAScript中提出了原型链的概念,并将原型链作为实现继承的主要方式 基本思想:利用原型让一个自定义类继承另一个类的属性和方法 //定义父类person function person(n,a,p){ this.name=n; this.age=a; this.phone=p; } //父类方法 person.proto

luokai_586524的博客 250

复分析 阿尔福斯(Ahlfors) 第三版答案 英文

答案分为十章,有部分习题没有答案,全英文复分析阿尔福斯(Ahlfors) 第三版答案

efm32 入门.pdf

本PDF共计22页,介绍的是操作驱动API,下载与否自己斟酌。

javascript 用函数实现“继承”

一、知识储备: 1、枚举属性名称的函数: (1)for...in:可以在循环体中遍历对象中所有可枚举的属性(包括自有属性和继承属性) (2)Object.keys():返回数组(可枚举的自有属性) (3)Object.getOwnPropertyNames():所有的自有属性 3、属性的特性:数据属性和存取器属性 (1)数据属性:可写(writable) 可枚举(enumerable...

weixin_30853329的博客 143

lwip-2.0.3

lwip是瑞典计算机科学院(SICS)的Adam Dunkels 开发的一个小型开源的TCP/IP协议栈。实现的重点是在保持TCP协议主要功能的基础上减少对RAM 的占用。

子类继承父类的所有属性和方法_js中的继承问题

面向对象编程很重要的一个方面,就是对象的继承。A 对象通过继承 B 对象,就能直接拥有 B 对象的所有属性和方法。这对于代码的复用是非常有用的。大部分面向对象的编程语言,都是通过“类”(class)实现对象的继承。传统上,JavaScript 语言的继承不通过 class(ES6 引入了class 语法),而是通过“原型对象”(prototype)实现。那么在JS中常见的继承方式有几种呢?方式一、...

weixin_39581995的博客 1493

假人有限元模型

假人模型,车辆碰撞假人有限元模型,适合做乘员安全的研究者利用

JavaScript ES5 模拟实现“继承”

本文尝试用JavaScript(ES 5)模拟实现,面向对象语言中的“继承”机制。

编程架构三分天下:分层、分治、分时序。 649

实现javaScript对象的"继承"的两种方法(prototype与闭包)

实现javaScript对象的"继承"的两种方法(prototype与闭包)

不能说的秘密的博客 2551

Javascript:图形解释如何实现“ 单继承 、多继承 、掺入 “

前提知识 Javascript:必须知道的Javascript知识点之“原型链” Javascript:必须知道的Javascript知识点之“this指针” Javascript:用 "脑图软件" 学习 “面向对象” 几个内置核心方法学习 代码示例 1 var Base = function (name) { 2 this.name = name; 3 }; ...

weixin_30929295的博客 104

JavaScript里面向对象的继承:不使用构造函数实现"继承"

一、什么是"非构造函数"的继承? //比如,现在有一个对象,叫做"中国人"。 var Chinese = { nation:'中国' }; //还有一个对象,叫做"医生"。 var Doctor ={ career:'医生' }   请问怎样才能让"医生"去继承"中国人",也就是说,我怎样才能生成一个"中国医生"的对象?   这里要注意,这...

weixin_30387339的博客 76

混合对象 "类" ---js实现继承的两种方式

类理论类:数据和操作数据的行为的互联 js中没有类,类是它的一种设计模式。

qq_26746521的博客 682

聊聊js中的"继承"

前提你先完全理解了原型链以及new的作用,否则先补一补再来看。 继承 如果一个类别A“继承自”另一个类别B,就把这个A称为“B的子类别”,而把B称为“A的父类别”也可以称“B是A的超类“ 继承是类与类之间的关系,所以new 构造函数不是继承 继承的作用 子类具有父类的属性和方法 思考:es6之前,js没有类,也就没有继承,为什么说js有继承? 我认为这是个悖论,js真的没有继承,不管是es5还是e...

weixin_34255793的博客 167

由 OO 继承来谈谈 javascript 继承

在大多数面向对象语言中,基本上的都支持继承,首先来宽泛的谈谈大多数 OO 语言的继承方式,之后具体到 javascript 来看看其继承有什么不同之处。 [b]1. 实现继承:[/b]实现继承是指派生类(子类)继承了基类(父类)的所有属性和方法,并且有且只有一个基类。 优点是可以直接使用基类的所有属性和方法,缺点不言而喻,基类的一些不必要的方法也会被子类所继承。 比如:基类定义了...

firefly_zp的专栏 204

学习JavaScript"继承"

“类” JavaScript本没有类的概念,但是为了模仿其他面向对象语言,于是人为的创造了JavaScript中的“类”。其实都是利用了函数的一种特殊特性:所有的函数默认都会拥有一个名为prototype的公有并且不可枚举的属性,它会指向另一个对象。 function Foo() { // ... } Foo.prototype; // { } 复制代码这个对象通常被称为Foo的原型。这个对象是在...

weixin_30265171的博客 80

前端基本功(七):javascript中的继承(原型、原型链、继承的实现方式)

1. js的继承机制 javascirpt没有"子类"和"父类"的概念,也没有"类"(class)和"实例"(instance)的区分,全靠一种很奇特的"原型链"(prototype chain)模式,来实现继承。继承意味着复制操作,然而 JavaScript 默认并不会复制对象的属性,相反,JavaScript 只是在两个对象之间创建一个关联,这样,一个对象就可以通过委托访问另一个对象的属性和函...

weixin_34054866的博客 320
上一篇: 深入javascript-封装对象
下一篇: 深入Jquery-$.ajax 、$.get、$.post、$.get 、JSON
chenjinge7
博客等级 码龄15年 64粉丝 67原创
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明:

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

余额充值