javascript的原型继承-JavaScript 中的面向对象编程

2023-08-29 0 4,700 百度已收录

介绍

JavaScript 是一种功能强大的面向对象编程语言,但与传统编程语言不同的是,它使用基于原型的 OOP 模型,导致其句型大多数开发人员无法理解。 此外,JavaScript 还将函数视为主要对象,这会给不熟悉该语言的开发人员带来更多困扰。 这就是为什么我们决定将其放在上面作为简要介绍,同时也作为 JavaScript 中面向对象编程的参考。

本文档不提供面向对象编程规则的预览,但对其套接字进行了概述。

命名空间

随着越来越多的第三方库、框架和Web依赖的出现,JavaScript开发中的命名空间势在必行。 我们必须尽量避免全局命名空间中的对象和变量之间发生冲突。

不幸的是,JavaScript 不提供对命名空间编译的支持,但我们可以使用对象来达到相同的结果。 我们有很多模式在 JavaScript 中实现命名空间套接字,但我们涵盖了嵌套命名空间,这是该领域最常用的模式。

嵌套命名空间

嵌套命名空间模式使用对象文字将功能与特定应用程序的特定名称捆绑在一起。

我们最初创建一个全局对象并将其参数化为一个名为 MyApp 的变量。

上面的句型将检查 MyApp 是否已经定义。 如果它已经被定义,我们只需将它作为参数提供给我们自己javascript的原型继承,但是,我们创建一个空容器来保存我们的函数和变量。

我们还可以使用相同的技术来创建子命名空间。 例如:

一旦启动容器,我们就可以在(容器)内部定义函数和变量,并在全局命名空间中调用它们,而不会冒与现有定义冲突的风险。

Goggle 的 Addy Osmani 在《基本 JavaScript 命名空间模式》一文中介绍了 JavaScript 中命名模式的内部概述。 如果您想探索不同的模式,这是一个很好的起点。

目的

如果您编写过 JavaScript 代码,那么您就使用过对象。 JavaScript 具有三种类型的对象:

原生对象

本机对象是语言规范的一部分,无论运行在什么样的操作环境中,本机对象都是可用的。 原生对象包括:Array、Date、Math、parseInt 等。所有原生对象请参见 JavaScript 内置对象参考

宿主对象

与本机对象不同,宿主对象是由 JavaScript 代码运行的环境创建的。 不同的环境创建不同的宿主对象。 在大多数情况下,这些宿主对象允许我们与它们交互。 如果我们编写在浏览器(这是操作环境之一)上运行的代码,就会有窗口、文档、位置和历史记录等宿主对象。

用户对象

用户对象(或植入对象)是在我们的代码中定义的、在运行时创建的对象。 在 JavaScript 中创建自己的对象有两种方法,下面简要介绍。

对象字面量

当我们上面演示命名空间的创建时,我们已经接触到了对象字面量。 现在澄清对象字面量的定义:对象字面量是用冒号分隔的名称-值对列表,括在花括号中。 对象字面量可以具有变量(属性)和函数(方法)。 与 JavaScript 中的其他对象一样,它也可以用作函数的参数,或作为返回值。

现在定义一个对象文字并将其分配给一个变量:

向该对象文字添加属性和技巧,然后全局访问它:

这看起来很像上面的命名空间,但这并非巧合。 文字对象最典型的用途是将代码封装在封装包中,以防止与全局范围内的变量或对象发生冲突。 出于类似的原因,它也经常用于将配置参数传递给插件或对象。

如果您熟悉设计模式,就会发现对象字面量是一种单例,即只有一个实例的模式。 对象字面量本身并不具有实例化和继承的能力。 接下来,我们必须了解另一种在 JavaScript 中创建自定义对象的方法。

构造函数定义构造函数

函数是 JavaScript 的一等公民,这意味着其他实体支持的所有操作都受到支持。 在JavaScript的世界里,函数可以在运行时动态构造,可以作为参数,也可以作为其他函数的返回值,还可以赋值给变量。 此外,函数可以有自己的属性和技巧。 JavaScript 中函数的本质使它们可实例化和可继承。

让我们看看如何使用构造函数创建自定义对象:

创建构造函数与创建普通函数类似,但有一个例外:自发性和技巧是使用 this 关键字定义的。 创建函数后,可以使用 new 关键字创建该函数并将其分配给变量。 每次使用 new 关键字时, this 都指向一个新实例。

构造函数实例化与传统面向对象编程语言中通过类实例化没有太大区别,但这里有一个可能不太明显的问题。

当使用new关键字创建新对象时,函数块会被重复执行,这会导致每次运行时都会定义一个新的匿名函数。 这就像创建一个新对象一样,会导致程序消耗更多的显存。 这个问题在现代浏览器上运行的程序中并不明显。 但随着应用程序规则的扩展,较旧的浏览器、计算机或低功耗设备可能会出现性能问题。 但不要害怕,有更好的方法将方法附加到构造函数(它不会污染全局环境)。

方法和原型

正如前面的介绍中提到的,JavaScript 是一种基于原型的编程语言。 在 JavaScript 中,原型可以像对象模板一样使用。 原型可以防止在实例化对象时创建冗余的匿名函数和变量。

在 JavaScript 中,prototype 是一个非常特殊的属性,它允许我们向对象添加新的属性和技术。 现在用原型重新绘制里面的示例javascript的原型继承,瞧:

在此示例中,不是为每个 Person 实例定义 sayHey 方法,而是通过原型模板在实例之间共享该技术。

遗产

通过原型链,可以利用原型进行实例继承。 JavaScript中的每个对象都有一个原型,而这个原型是另一个对象,这个对象也有自己的原型,如此往复……直到一个原型对象的原型为空——原型链到此结束。

当访问方法或属性时,JavaScript 首先检查它们是否在对象中定义,如果没有,则检查原型中。 如果在原型中没有找到,就会沿着原型链继续寻找,直到找到,或者到达原型链的末尾。

现在让我们看看代码是如何实现的。 您可以从上一个示例中的 Person 对象开始,创建另一个名为 Employee 的对象。

现在员工只有一项财产。 但由于 Employee 也是一个 Person,我们希望它继承 Person 的其他属性。 为此,我们可以调用Employee对象中Person的构造函数并配置原型链。

习惯原型继承需要一些时间,但这是一个您必须熟悉的重要概念。 虽然原型继承模型经常被认为是 JavaScript 的弱点,但它实际上比传统模型更强大。 例如,掌握了原型模型后,创建传统模型就太容易了。

ECMAScript 6 引入了一组新的关键字来实现类。 尽管新设计看起来非常接近传统的基于类的开发语言,但它们并不相同。 JavaScript 仍然基于原型。

综上所述

JavaScript 已经存在很长时间了,在那段时间里,许多开发人员正在使用当今标准不应该使用的技巧。 随着ES2015的推出,这种情况开始逐渐改变,然而,许多开发人员一直坚持一些旧的编程方法,这损害了他们代码的相关性。 理解面向对象编程并将其应用到你的 JavaScript 项目中对于编写可持续的代码非常有意义。

我希望这个简短的介绍能够帮助您实现这一目标。

通过:

收藏 (0) 打赏

感谢您的支持,我会继续努力的!

打开微信/支付宝扫一扫,即可进行扫码打赏哦,分享从这里开始,精彩与您同在
点赞 (0)

悟空资源网 javascript javascript的原型继承-JavaScript 中的面向对象编程 https://www.wkzy.net/game/173341.html

常见问题

相关文章

官方客服团队

为您解决烦忧 - 24小时在线 专业服务