关于javascript面向对象的一切

Some say JavaScript is an object-oriented language just like Java, C++, C#, etc; Some say JavaScript is an object-based language just like Visual Basic (VB). Some say it is prototype-based……

有人说JavaScript是一种面向对象的语言,就像Java,C ++,C#等。 有人说JavaScript与Visual Basic(VB)一样,是一种基于对象的语言。 有人说它是基于原型的……

From the language specification, we can find the following two paragraphs of description.

从语言规范中 ,我们可以找到以下两段描述。

ECMAScript is object-based: basic language and host facilities are provided by objects, and an ECMAScript program is a cluster of communicating objects.

ECMAScript是基于对象的:基本语言和宿主功能由对象提供,而ECMAScript程序是通信对象的群集。

ECMAScript is an object-oriented programming language for performing computations and manipulating computational objects within a host environment.

ECMAScript是一种面向对象的编程语言,用于在主机环境中执行计算和操纵计算对象。

These two descriptions confuse us even more. Is JavaScript an object-oriented and object-based language?

这两个描述使我们更加困惑。 JavaScript是一种面向对象和基于对象的语言吗?

In this article, I will work with you to uncover the veil of the JavaScript object-oriented system.

在本文中,我将与您一起探索JavaScript面向对象系统的面纱。

什么是面向对象的编程 (What Is Object-Oriented Programming)

Object-oriented programming (OOP) is a programming paradigm based on the concept of “objects”, which can contain data and code.

面向对象编程 ( OOP )是一种基于“ 对象 ”概念的编程范例 ,其中可以包含数据和代码。

In Object-Oriented Analysis and Design with Applications, Grady Booch summarized the concept of “object”. From the perspective of human cognition, an object is any of the following:

面向对象的分析和设计及其应用中, Grady Booch总结了“ 对象 ”的概念。 从人类认知的角度来看,对象是以下任何一种:

  • A tangible and/or visible thing

    有形和/或可见的东西
  • Something that may be comprehended intellectually

    可能在理智上理解的东西
  • Something toward which thought or action is directed

    思想或行动指向的东西

The object is a kind of abstraction of human beings. Using this idea in programming, we have object-oriented programming. Object-oriented programming is just a programming paradigm, programming thinking.

对象是对人类的一种抽象。 在编程中使用这个想法,我们就有了面向对象的编程。 面向对象的编程只是一种编程范例,是编程思想。

It has been proven that object-oriented programming promotes the flexibility and maintainability of programs and is widely used in large-scale project design.

已经证明,面向对象的程序设计提高了程序的灵活性和可维护性,并广泛用于大型项目设计中。

Now, almost all mainstream languages support object-oriented, such as Common Lisp, Python, C++, Objective-C, Smalltalk, Delphi, Java, Swift, C#, Perl, Ruby, PHP, etc.

现在,几乎所有主流语言都支持面向对象,例如Common Lisp,Python,C ++,Objective-C,Smalltalk,Delphi,Java,Swift,C#,Perl,Ruby,PHP等。

Photo by KOBU Agency on Unsplash KOBU Agency在 Unsplash上的 照片

什么是基于对象的编程 (What Is Object-Based Programming)

Object-based programming is actually a way of object-oriented programming. It does not use “class” but directly uses “object”. Sometimes, the term “Object-Based” is applied to prototype-based. The most representative object-based language is JavaScript.

基于对象的编程实际上是一种面向对象的编程方式。 它不使用“类”,而是直接使用“对象”。 有时,术语“基于对象”适用于基于原型的对象。 最有代表性的基于对象的语言是JavaScript。

At the beginning of the design of the JavaScript language, Brendan Eich, the designer of JavaScript, chose the prototype to realize the object-oriented concept. This may be related to the author being a scheme (a Lisp dialect) programmer. Later, due to non-technical reasons, Netscape management asked Brendan Eich make the new language to imitate Java ( Java was popular ate the time), and Brendan Eich had to add new, this and other features to make the new language look more like Java. Finally, the name of the new language has also changed to a Java-style name. JavaScript was born.

在JavaScript语言的设计之初,JavaScript的设计师Brendan Eich选择了原型来实现面向对象的概念。 这可能与作者是一个计划 (Lisp方言)程序员有关。 后来,由于非技术原因,Netscape管理层要求Brendan Eich制作新语言来模仿Java(Java在当时很流行),而Brendan Eich必须添加新功能,此功能和其他功能才能使新语言看起来更像Java。 最后,新语言的名称也已更改为Java样式的名称。 JavaScript诞生了。

JavaScript中的对象 (Objects in JavaScript)

Although the original intention of JavaScript was to use prototypes. However, because Java and object-oriented ideas ruled the birth of JavaScript and the following era, many programmers are trying to make JavaScript more like a traditional object-oriented language. Until ES6 release, ‘class’ officially entered the JavaScript standard.

尽管JavaScript的最初意图是使用原型。 但是,由于Java和面向对象的思想主导着JavaScript的诞生以及随后的时代,因此许多程序员都在尝试使JavaScript更像传统的面向对象语言。 在ES6发布之前,“类”正式进入JavaScript标准。

So what does the object-oriented programming under JavaScript prototype programming look like?

那么JavaScript原型编程下的面向对象编程是什么样的呢?

属性和方法全部在JavaScript的属性中 (Properties and Methods all in Properties in JavaScript)

The concept of “object” in OOP can contain data and code: data in the form of fields (often known as attributes or properties), and code, in the form of procedures (often known as methods).

OOP中的“对象”概念可以包含数据和代码: 字段形式的数据(通常称为属性属性 )和过程形式的代码(通常称为方法 )。

Different languages have slightly different ways of implementing properties and methods.

不同的语言实现属性和方法的方式略有不同。

关于javascript面向对象的一切_第1张图片

As you can see from the table, JavaScript implements properties and methods uniformly through JavaScript Properties.

从表中可以看到,JavaScript通过JavaScript属性统一实现属性和方法。

The following code shows how to create an object in JavaScript.

以下代码显示了如何在JavaScript中创建对象。

动态 (Dynamic)

The most unique feature of objects in JavaScript is that objects are highly dynamic. Unlike most class-based object languages, properties can be added to objects dynamically by assigning values to them.

JavaScript中对象最独特的功能是对象是高度动态的。 与大多数基于类的对象语言不同,可以通过为对象分配值来将属性动态添加到对象。

The following code shows how to add properties to an object at runtime.This kind of feature is very complicated for the Java language.

下面的代码显示了如何在运行时向对象添加属性。对于Java语言而言,这种功能非常复杂。

对象类型 (The Object Type)

An Object is logically a collection of properties. Each property is either a data property, or an accessor property:

从逻辑上讲,对象是属性的集合。 每个属性都是data属性accessor属性

数据属性 (Data Property)

A data property associates a key value with an ECMAScript language value and a set of Boolean attributes.

数据属性将键值与ECMAScript语言值和一组布尔属性相关联。

  • Value: The value retrieved by a get access of the property.

    值:通过属性的get访问获取的值。
  • Writable: Decide whether the property’s value attribute can be changed.

    可写:确定是否可以更改属性的value属性。
  • Enumerable: Decide whether the property can be enumerated by a for-in.

    可枚举:确定属性是否可以用for-in枚举。
  • Configurable: Decide whether the property can be deleted or changed its attributes.

    可配置:决定是否可以删除该属性或更改其属性。

访问属性 (Access Property)

An accessor property associates a key value with one or two accessor functions, and a set of Boolean attributes. The accessor functions are used to store or retrieve an ECMAScript language value that is associated with the property.

访问器属性将键值与一个或两个访问器函数以及一组布尔属性相关联。 访问器函数用于存储或检索与属性关联的ECMAScript语言值 。

  • Get: The value is a function object or undefined. Called when the property value is accessed.

    获取:该值是一个函数对象或未定义。 在访问属性值时调用。
  • Set: The value is a function object or undefined. Called when the property value is assigned.

    设置:该值为函数对象或未定义。 分配属性值时调用。
  • Enumerable: Decide whether the property can be enumerated by a for-in.

    可枚举:确定属性是否可以用for-in枚举。
  • Configurable: Decide whether the property can be deleted or changed its attributes.

    可配置:决定是否可以删除该属性或更改其属性。

Object.getOwnPropertyDescriptor() (Object.getOwnPropertyDescriptor())

This method permits examination of the precise description of a property.

该方法允许检查属性的精确描述。

We have defined two attributes here. By viewing the attributes through the function Object.getOwnPropertyDescriptor(), we can see that the attributes we defined are all data property, writable, enumerable, configurable their default values are all true.

我们在这里定义了两个属性。 通过使用Object.getOwnPropertyDescriptor()函数查看属性,我们可以看到定义的属性都是数据属性, writableenumerableenumerable configurable它们的默认值均为true

Object.defineProperty() (Object.defineProperty())

If you want to define a new property directly on an object, or modifies an existing property on an object, you can use the method Object.defineProperty() .

如果要直接在对象上定义新属性,或修改对象上的现有属性,则可以使用Object.defineProperty()方法

When creating an object, you can also use the get and set to create access property. The code is as follows:

创建对象时,还可以使用getset来创建访问属性。 代码如下:

Using getOwnPropertyDescriptor, we know we define an access property. Unlike data properties, getter or setter functions are executed every time the property is accessed. Here our getter function returns 37, so call object1.property1 gets 37 every time.

使用getOwnPropertyDescriptor ,我们知道我们定义了一个访问属性。 与数据属性不同,每次访问该属性时都会执行gettersetter函数。 这里我们的getter函数返回37 ,因此每次调用object1.property1都会得到37

Here we can know a JavaScript Object is logically a collection of properties. Properties are identified using key values. A property key value is either an ECMAScript String value or a Symbol value. The value is either a data property value or an accessor property value.

在这里,我们可以知道JavaScript对象在逻辑上是属性的集合。 使用键值标识属性。 属性键值可以是ECMAScript字符串值或符号值。 该值可以是数据属性值,也可以是访问器属性值。

结论 (Conclusion)

Through the above, we understand that the object design of JavaScript is very different from the other class-based object-oriented mainstream languages.

通过以上内容,我们了解到JavaScript的对象设计与其他基于类的面向对象的主流语言非常不同。

Although the design is special, JavaScript provides a complete object system, so it is still an object-oriented language.

尽管设计很特殊,但是JavaScript提供了完整的对象系统,因此它仍然是一种面向对象的语言。

If you want to understand the origin of the JavaScript object system, you must forget all the knowledge about “class-based object-oriented”. Use the human’s initial cognition of objects to understand the design ideas of JavaScript.

如果您想了解JavaScript对象系统的起源,则必须忘记所有有关“基于类的面向对象”的知识。 使用人类对对象的最初认知来理解JavaScript的设计思想。

Fortunately, starting from ES6, JavaScript provides a lot of syntactic sugar to help us complete object-oriented programming.

幸运的是,从ES6开始,JavaScript提供了很多语法糖来帮助我们完成面向对象的编程。

Thanks for reading.

谢谢阅读。

有关JavaScript的其他信息: (Others about JavaScript:)

翻译自: https://medium.com/@saneryee_studio/all-about-javascript-object-oriented-694cb74569b3

你可能感兴趣的:(关于javascript面向对象的一切)