前端开发：理解JavaScript 中的面向对象编程

Posted 2021-04-08 web前端网页设计

javascript 是一个强大的面向对象编程语言，但是，并不像传统的编程语言，它采用一个以原型为基础的OOP模型，致使它的语法让大多数开发人员看不懂。

另外，JavaScript 也把函数作为首要的对象，这可能会给不够熟悉这门语言的开发人员造成更大的困惑。那就是我们决定放在前面作为一个简短前言进行介绍的原因，并且在 JavaScript 里也可以用作面向对象编程的一个参考。

这个文档没有提供一个面向对象编程的规则预览，但有它们的接口概述。

命名空间

伴随一批web端的第三方库，框架和依赖JS脚本的出现，在JavaScript 开发中使用命名空间势在必行，我们尝试以该种方式避免在全局命名空间中可能出现的对象和变量名称的重复问题。不幸的是,JavaScript 并不内嵌命名空间功能，但我们可以通过使用对象来实现类似的功能。JavaScript中有很多种模式实现命名空间，但是我们将使用嵌套命名空间，这种模式如今被广泛使用。

嵌套命名空间

嵌套命名空间模式使用一个object进行泛函数式的包装，来获得一个特定于应用程序的名称。

我们从创建一个全局对象开始并绑定变量名称为 MyApp.

上面语法检查了MyApp是否被定义,如果被定义，我们将获取其引用，否则我们创建一个空的容器,该容器用于封装我们的方法和变量.

我们可以使用相同的技术去创建子命名空间，示例如下：

一旦我们装配好容器，我们能够在该容器中定义自己的方法和变量，并且在没有任何与已定义的变量或对象重名的风险下，在全局命名空间中使用。

Google’s Addy Osmani在他的文章《JavaScript命名空间模式要义》一文中深入的介绍了JavaScript命名空间模式。如果你想探究其他模式，该文将是最好的入门读物。

对象

原生对象

原生对象是语言规范的一部分，不管在什么样的运行环境下运行，原生对象都可用。原生对象包括：Array、Date、Math 和 parseInt 等。想了解所有原生对象，请参阅 JavaScript 内建对象参考

宿主对象

与原生对象不同，宿主对象是由 JavaScript 代码运行的环境创建。不同的环境环境创建有不同的宿主对象。这些宿主对象在多数情况下都允许我们与之交互。如果我们写的是在浏览器（这是其中一种运行环境）上运行的代码，会有 window、document、location 和 history 等宿主对象。

用户对象

用户对象（或植入对象）是在我们的代码中定义的对象，在运行的过程中创建。JavaScript 中有两种方式创建自己的对象，下面详述。

对象字面量

在前面演示创建命名空间的时候，我们已经接触到了对象字面量。现在来搞清楚对象字面量的定义：对象字面量是置于一对花括号中的，由逗号分隔的名-值对列表。对象字面量可拥有变量（属性）和函数（方法）。像 JavaScript 中的其它对象一样，它也可以作为函数的参数，或者返回值。

现在定义一个对象字面量并赋予一个变量：

向这个对象字面量添加属性和方法，然后在全局作用域访问：

这看起来和前面的命名空间很像，但这并不是巧合。字面量对象最典型的用法就是把代码封装起来，使之在一个封装的包中，以避免与全局作用域中的变量或对象发生冲突。由于类似的原因，它也常常用于向插件或对象传递配置参数。

如果你熟悉设计模式的话，对象字面量在某种程度上来说就是单例，就是那种只有一个实例的模式。对象字面量先天不具备实例化和继承的能力，我们接下来还得了解 JavaScript 中另一种创建自定义对象的方法。

构造函数

定义构造函数

函数是 JavaScript 一等公民，就是说其它实体支持的操作函数都支持。在 JavaScript 的世界，函数可以在运行时进行动态构造，可以作为参数，也可以作为其它函数的返回值，也可被赋予变量。而且，函数也可以拥有自己的属性和方法。JavaScript 中函数的特性使之成为可以实体化和继承的东西。

来看看怎么用构造函数创建一个自定义的对象:

创建构造函数类似于创建普通函数，只有一点例外：用 this 关键字定义自发性和方法。一旦函数被创建，就可以用 new 关键字来生成实例并赋予变量。每次使用 new 关键字，this 都指向一个新的实例。

构建函数实例化和传统面向对象编程语言中的通过类实例化并非完全不同，但是，这里存在一个可能不易被察觉的问题。

当使用 new 关键字创建新对象的时候，函数块会被反复执行，这使得每次运行都会产生新的匿名函数来定义方法。这就像创建新的对象一样，会导致程序消耗更多内存。这个问题在现代浏览器上运行的程序中并不显眼。但随着应用规则地扩大，在旧一点的浏览器、计算机或者低电耗设备中就会出现性能问题。不过不用担心，有更好的办法将方法附加给构造函数（是不会污染全局环境的哦）。

方法和原型

前面介绍中提到 JavaScript 是一种基于原型的编程语言。在 JavaScript 中，可以把原型当作对象模板一样来使用。原型能避免在实例化对象时创建多余的匿名函数和变量。

在 JavaScript 中，prototype 是一个非常特别的属性，可以让我们为对象添加新的属性和方法。现在用原型重写上面的示例看看：

这个示例中，不再为每个 Person 实例定义 sayHey 方法，而是通过原型模板在各实例中共享这个方法。

继承性

通过原型链，原型可以用来实现继承。JavaScript 的每一个对象都有原型，而原型也是对象，也有它自己的原型，周而复始...直到某个原型对象的原型是 null——原型链到此为止。

在访问一个方法或属性的时候，JavaScript 首先检查它们是否在对象中定义，如果不，则检查是否定义在原型中。如果在原型中也没找到，则会延着原型链一直找下去，直到找到，或者到达原型链的终端。

现在来看看代码是怎么实现的。可以从上一个示例中的 Person 对象开始，另外再创建一个叫 Employee 的对象。

现在 Employee 只有一个属性。不过既然员工也属于人，我们希望它能从 Person 继承其它属性。要达到这个目的，我们可以在 Employee 对象中调用 Person 的构造函数，并配置原型链。

要适应原型继承还需要一些时间，但是这一个必须熟悉的重要概念。虽然原型继承模型常常被认为是 JavaScript 的弱点，但实际上它比传统模型更强大。比如说，在掌握了原型模型之后创建传统模型简直就太容易了。

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

结论

JavaScript已经经过了长时间的发展，在此期间，按今天的标准来看，一些本不应该使用的方法，却被大量开发者使用着。根据 ES2015 的介绍，这种状况正开始慢慢改变，然而，许多开发人员仍然坚持使用一些旧的编程方式，这损害了他们的代码的关联性。理解面向对象编程方法，并将它应用在你的JavaScript项目中，对于编写可持续的代码非常有意义。

希望这篇简单的介绍可以帮助你快速理解JavaScript的面向对象编程。

下一步

如果你已经准备好深入学习前端开发，想系统的掌握JavaScript学习，欢迎加入到我们的前端开发工程师班一起学习。

最新一期的零基础前端开发课程学习马上就要开始了，零基础到高级项目实战，带给你更好的体验，这个夏天，来一场系统全面的前端课程学习吧!

这一次，你绝对不能错过了，错过一次下一次我们的开发就行半年后了！