搜索
首页web前端js教程JavaScript的简单继承

JavaScript的简单继承

钥匙要点

    JavaScript使用基于原型的方法来创建面向对象的语言,该方法可以通过克隆用作原型的现有对象来重复行为。这个概念可用于模拟继承。
  • > 可以通过创建夹紧原型的函数,从而将所有成员和函数传输到新类中,从而在JavaScript中实现>
  • > JavaScript具有自己独特的面向对象编程的独特方法,但对于来自C#或C等语言的开发人员来说,重要的是要了解尝试将其熟悉的语言复制到JavaScript中可能不会产生最佳结果。取而代之的是,拥抱JavaScript的独特哲学可以解锁其全部力量。
  • >
  • >
本文是Microsoft的Web开发技术系列的一部分。感谢您支持使SitietPoint成为可能的合作伙伴。

>我的许多朋友是C#或C开发人员。他们习惯于在项目中使用继承,当他们想学习或发现JavaScript时,他们问的第一个问题之一是:“但是我该如何使用JavaScript进行继承?”> 实际上,JavaScript使用与C#或C不同的方法来创建面向对象的语言。这是一种基于原型的语言。原型制作的概念意味着可以通过克隆作为原型的现有对象来重复行为。 JavaScript中的每个对象都会从原型定义对象可以使用的一组函数和成员的原型。没有班级。只是对象。然后,每个对象都可以用作另一个对象的原型。

这个概念非常灵活,我们可以使用它来模拟从oop等sashination。

实施继承

我们使用JavaScript可视化我们想要通过此层次结构创建的内容:

首先,我们可以轻松创建Classa。因为没有明确的类,所以我们可以通过创建这样的函数来定义一组行为(so…):

>

可以使用新关键字实例化此“类”:>

JavaScript的简单继承并使用我们的对象使用它:

<span>var <span>ClassA</span> = function() {
</span>    <span>this.name = "class A";
</span><span>}</span>
>非常简单,对吗?

完整的样本只有8行长:
<span>var a = new ClassA();
</span><span>ClassA.prototype.print = function() {
</span>    <span>console.log(this.name);
</span><span>}</span>

>现在,让我们添加一个工具以在类之间创建“继承”。此工具只需要做一件事情:克隆原型:
a<span>.print();</span>
>

这正是魔术发生的地方!通过克隆原型,我们将所有成员和功能传输到新类。

>因此,如果我们要添加一个将是第一堂课的第二类,我们只需要使用此代码:>

<span>var <span>ClassA</span> = function() {
</span>    <span>this.name = "class A";
</span><span>}</span>
然后,由于classB继承了Classa的打印函数,因此以下代码正常工作:

>

<span>var a = new ClassA();
</span><span>ClassA.prototype.print = function() {
</span>    <span>console.log(this.name);
</span><span>}</span>
并产生以下输出:

我们甚至可以覆盖classB的打印功能:
a<span>.print();</span>

在这种情况下,产生的输出将看起来像这样:
var ClassA = function() {
    this.name = "class A";
}

ClassA.prototype.print = function() {
    console.log(this.name);
}

var a = new ClassA();

a<span>.print();</span>
>

>这里的诀窍是call clasta.protype获取基本打印功能。然后,由于呼叫函数,我们可以在当前对象上调用基本函数(this)。
<span>var inheritsFrom = function (child<span>, parent</span>) {
</span>    child<span>.prototype = Object.create(parent.prototype);
</span><span>};</span>
创建classC现在很明显:

>

>输出为:

<span>var <span>ClassB</span> = function() {
</span>    <span>this.name = "class B";
</span>    <span>this.surname = "I'm the child";
</span><span>}
</span>
<span>inheritsFrom(ClassB, ClassA);</span>

与JavaScript更多动手

<span>var b = new ClassB();
</span>b<span>.print();</span>
>这可能会让您感到惊讶,但是微软在许多开源JavaScript主题上拥有大量免费学习,我们的任务是随着Project Spartan的到来而创造更多的东西。查看我自己的:

WebGL 3D,HTML5和Babylon.js

简介
    >使用ASP.NET和AngularJS
  • 构建单页应用程序 HTML
  • 中的尖端边缘图形
  • 或我们团队的学习系列:
实用的性能提示,使您的HTML/JavaScript更快(从响应式设计到休闲游戏再到性能优化的7部分系列)

>现代Web平台Jumpstart(HTML,CSS和JS的基本原理)

>
    >使用HTML和JavaScript Jumpstart开发通用Windows应用程序(使用已创建的JS来构建应用程序)
  • 和一些免费工具:Visual Studio社区,Azure试用和Mac,Linux或Windows的跨浏览器测试工具。
  • >
  • 和一些哲学……
  • 得出结论,我只想清楚地表明JavaScript不是C#或C。它有自己的哲学。如果您是C#开发人员,并且您真的想接受JavaScript的全部功能,那么我可以给您的最好的提示是:不要尝试将您的语言复制到JavaScript中。没有最好或最坏的语言。只是不同的哲学!

本文是Microsoft的Web Dev技术系列的一部分。我们很高兴与您共享Spartan项目及其新的渲染引擎。在Modern.ie上获取免费的虚拟机或远程测试。

经常询问有关JavaScript继承的问题(常见问题解答)

在JavaScript中的经典和原型继承是什么区别?经典的继承,也称为构造函数继承,是从类或构造函数创建新对象的地方。这类似于继承在Java或C等语言中的工作方式。另一方面,原型继承是JavaScript所独有的。它涉及创建一个从现有对象继承属性的新对象。这是使用object.create()方法或通过将新对象的原型设置为现有对象完成的。两者之间的主要区别在于,经典的继承使用类和构造函数函数,而原型继承使用对象。

>

>原型链如何在JavaScript继承中起作用? JavaScript继承中的概念。当对象上访问属性或方法时,JavaScript首先检查该对象是否具有该属性或方法。如果没有,JavaScript然后检查对象的原型。此过程继续延续原型链,直到找到属性或方法或达到链的末端(通常是内置对象原型)。该机制允许对象从其原型继承属性和方法,从而在JavaScript中启用代码重复使用和继承。

>您能否解释JavaScript继承中的“超级”概念? JavaScript中的关键字在类的上下文中用于在对象的父母上调用函数。换句话说,“超级”使您可以在对象的父类上访问和调用功能,从而使您能够重复使用父类的方法。这在子类的构造函数中特别有用,您可能需要在其中调用父类的构造函数。

>

>我如何在JavaScript中覆盖继承的方法?

>在JavaScript继承中'构造函数'的作用是什么?用于创建和初始化对象。在继承的背景下,使用“超级”关键字在子类的构造函数中通常调用父类的构造函数函数。这允许子类继承父级的属性和方法。

>

>继承如何与JavaScript ES6类一起使用?

在引入ES6时,JavaScript现在具有更传统的基于类的语法,用于定义构造函数和使用继承。 “类”关键字用于定义类,“扩展”关键字用于创建从父类继承的子类。 “超级”关键字在子类的构造函数中使用,以调用父类的构造函数。

您可以在JavaScript中解释多个继承吗?一个对象或类可以从多个父母继承的地方。但是,可以使用Mixins模拟多个继承。混合蛋白是一种技术,对象或类可以从多个来源“混合”属性和方法。这使您可以将多个对象或类的功能组合到一个。

> javaScript中的“继承”和“组合”之间有什么区别? JavaScript中的代码。继承是对象或类从父对象或类继承属性和方法的地方。另一方面,组成是由对象由其他对象组成的地方,功能被委派给了这些组件对象。虽然继承是关于“ is-a”关系(子类是父类的一种类型),但构图是关于“ has-a”关系(一个对象具有其他对象)。

>我如何如何在JavaScript中使用JavaScript函数的继承?

函数是对象,它们可用于实现继承。这是通过定义用于创建新对象的构造函数来完成的。构造函数函数的“原型”属性是函数所有实例都将继承的对象。通过将属性和方法添加到此原型对象中,您可以使它们可用于函数的所有实例。

>

> javaScript继承的某些常见陷阱是什么?原型链与构造链之间的混淆。当对象上调用方法时,JavaScript查找原型链,而不是构造链。另一个陷阱是忘记在子构造函数中打电话给父构建器,这可能会导致意外的结果。最后,由于JavaScript使用原型继承,因此当您打算修改实例时,可能会意外修改原型。

>

以上是JavaScript的简单继承的详细内容。更多信息请关注PHP中文网其他相关文章!

声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
了解JavaScript引擎:实施详细信息了解JavaScript引擎:实施详细信息Apr 17, 2025 am 12:05 AM

理解JavaScript引擎内部工作原理对开发者重要,因为它能帮助编写更高效的代码并理解性能瓶颈和优化策略。1)引擎的工作流程包括解析、编译和执行三个阶段;2)执行过程中,引擎会进行动态优化,如内联缓存和隐藏类;3)最佳实践包括避免全局变量、优化循环、使用const和let,以及避免过度使用闭包。

Python vs. JavaScript:学习曲线和易用性Python vs. JavaScript:学习曲线和易用性Apr 16, 2025 am 12:12 AM

Python更适合初学者,学习曲线平缓,语法简洁;JavaScript适合前端开发,学习曲线较陡,语法灵活。1.Python语法直观,适用于数据科学和后端开发。2.JavaScript灵活,广泛用于前端和服务器端编程。

Python vs. JavaScript:社区,图书馆和资源Python vs. JavaScript:社区,图书馆和资源Apr 15, 2025 am 12:16 AM

Python和JavaScript在社区、库和资源方面的对比各有优劣。1)Python社区友好,适合初学者,但前端开发资源不如JavaScript丰富。2)Python在数据科学和机器学习库方面强大,JavaScript则在前端开发库和框架上更胜一筹。3)两者的学习资源都丰富,但Python适合从官方文档开始,JavaScript则以MDNWebDocs为佳。选择应基于项目需求和个人兴趣。

从C/C到JavaScript:所有工作方式从C/C到JavaScript:所有工作方式Apr 14, 2025 am 12:05 AM

从C/C 转向JavaScript需要适应动态类型、垃圾回收和异步编程等特点。1)C/C 是静态类型语言,需手动管理内存,而JavaScript是动态类型,垃圾回收自动处理。2)C/C 需编译成机器码,JavaScript则为解释型语言。3)JavaScript引入闭包、原型链和Promise等概念,增强了灵活性和异步编程能力。

JavaScript引擎:比较实施JavaScript引擎:比较实施Apr 13, 2025 am 12:05 AM

不同JavaScript引擎在解析和执行JavaScript代码时,效果会有所不同,因为每个引擎的实现原理和优化策略各有差异。1.词法分析:将源码转换为词法单元。2.语法分析:生成抽象语法树。3.优化和编译:通过JIT编译器生成机器码。4.执行:运行机器码。V8引擎通过即时编译和隐藏类优化,SpiderMonkey使用类型推断系统,导致在相同代码上的性能表现不同。

超越浏览器:现实世界中的JavaScript超越浏览器:现实世界中的JavaScriptApr 12, 2025 am 12:06 AM

JavaScript在现实世界中的应用包括服务器端编程、移动应用开发和物联网控制:1.通过Node.js实现服务器端编程,适用于高并发请求处理。2.通过ReactNative进行移动应用开发,支持跨平台部署。3.通过Johnny-Five库用于物联网设备控制,适用于硬件交互。

使用Next.js(后端集成)构建多租户SaaS应用程序使用Next.js(后端集成)构建多租户SaaS应用程序Apr 11, 2025 am 08:23 AM

我使用您的日常技术工具构建了功能性的多租户SaaS应用程序(一个Edtech应用程序),您可以做同样的事情。 首先,什么是多租户SaaS应用程序? 多租户SaaS应用程序可让您从唱歌中为多个客户提供服务

如何使用Next.js(前端集成)构建多租户SaaS应用程序如何使用Next.js(前端集成)构建多租户SaaS应用程序Apr 11, 2025 am 08:22 AM

本文展示了与许可证确保的后端的前端集成,并使用Next.js构建功能性Edtech SaaS应用程序。 前端获取用户权限以控制UI的可见性并确保API要求遵守角色库

See all articles

热AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool

Undress AI Tool

免费脱衣服图片

Clothoff.io

Clothoff.io

AI脱衣机

AI Hentai Generator

AI Hentai Generator

免费生成ai无尽的。

热门文章

R.E.P.O.能量晶体解释及其做什么(黄色晶体)
1 个月前By尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.最佳图形设置
1 个月前By尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.如果您听不到任何人,如何修复音频
1 个月前By尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.聊天命令以及如何使用它们
1 个月前By尊渡假赌尊渡假赌尊渡假赌

热工具

安全考试浏览器

安全考试浏览器

Safe Exam Browser是一个安全的浏览器环境,用于安全地进行在线考试。该软件将任何计算机变成一个安全的工作站。它控制对任何实用工具的访问,并防止学生使用未经授权的资源。

记事本++7.3.1

记事本++7.3.1

好用且免费的代码编辑器

MinGW - 适用于 Windows 的极简 GNU

MinGW - 适用于 Windows 的极简 GNU

这个项目正在迁移到osdn.net/projects/mingw的过程中,你可以继续在那里关注我们。MinGW:GNU编译器集合(GCC)的本地Windows移植版本,可自由分发的导入库和用于构建本地Windows应用程序的头文件;包括对MSVC运行时的扩展,以支持C99功能。MinGW的所有软件都可以在64位Windows平台上运行。

DVWA

DVWA

Damn Vulnerable Web App (DVWA) 是一个PHP/MySQL的Web应用程序,非常容易受到攻击。它的主要目标是成为安全专业人员在合法环境中测试自己的技能和工具的辅助工具,帮助Web开发人员更好地理解保护Web应用程序的过程,并帮助教师/学生在课堂环境中教授/学习Web应用程序安全。DVWA的目标是通过简单直接的界面练习一些最常见的Web漏洞,难度各不相同。请注意,该软件中

PhpStorm Mac 版本

PhpStorm Mac 版本

最新(2018.2.1 )专业的PHP集成开发工具