Javascript object-oriented programming (coolshell)

In the past two days, a former colleague always asked me about Javascript object-oriented things, so I simply wrote an article for him to read. This article mainly wants to explain Javascript object-oriented programming from a holistic perspective. (The writing is quite hasty, there should be inaccurate or errors. Please criticize and correct me)
In addition, this article is mainly based on ECMAScript 5 and aims to introduce new technologies. For compatibility stuff, see the last section.

First exploration
We know that the definition of variables in Javascript is basically as follows:


If you want to write it with an object, it will look like this:


So, I can access it like this:


Regarding functions, we know that Javascript functions are like this:



So, we can do this:


I believe these things are relatively simple, and everyone understands them. You can see that the javascript object function is declared directly, assigned directly, and used directly. The dynamic language of runtime.

Another relatively standardized way of writing is:


By the way, it is very simple to delete the properties of an object:

1 delete chenhao['email']

In the examples above, we can see several points like this:

Javascript data and member encapsulation is simple. No class is entirely an object operation. Pure dynamic!
This pointer in Javascript function is critical, if not, it is a local variable or a local function.
Javascript object member functions can be temporarily declared when used and a global function can be assigned directly.
Javascript member functions can be modified on instances, which means that the behavior of the same function name in different instances does not necessarily be the same.
Properties Configuration –
Let's look at the following code first:


Let’s talk about what these attribute configurations mean.

writable: Whether the value of this property can be changed.
configurable: Can the configuration of this property be changed?
enumerable: Whether this property can be traversed or listed in the for...in loop.
value: property value.
get()/set(_value): get and set accessor.
Get/Set Accessories
Regarding the get/set accessor, it means using get/set to replace value (it cannot be used with value). The example is as follows:


Let's look at a more practical example - using existing attributes (age) to construct new attributes (birth_year) through get and set:


It seems a bit troublesome to do this. You said, why don’t I write it like this:


Yes, you can do this, but with defineProperty() you can do these things:
1) Set attribute configurations such as writable, configurable, enumerable, etc.
2) Dynamically add attributes to an object. For example: some HTML DOM objects.

View object properties configuration
If you view and manage these configurations of objects, there is a program that can output the properties and configuration of objects:


call, apply, bind and this
This pointer about Javascript is very similar to C++/Java. Let's take a look at an example: (This example is very simple, I won't say much)


Let’s take a look at call and apply. The difference between these two functions is that the parameters look different, and the other is that the performance is different, and the performance of apply is much worse. (For performance, you can go to JSPerf to have a look)


But after bind, this pointer may be different, but because Javascript is dynamic. As shown in the following example


Inheritance and Overload
Through the above examples, we can actually inherit through (). Please see the code below. Student inherits from Object.


Using the above example, we can see that the properties in Person have not been really copied into the Student, but we can access them. This is because Javascript implements this mechanism with delegates. Actually, this is Prototype, Person is Student's Prototype.

When our code needs a property, the Javascript engine will first look at whether the current object has this property. If not, it will look for whether its Prototype object has this property and continue until it is found or not until there is no Prototype object.

To prove this, we can use() to test it:


So, you can also call the parent object's function in the child object's function, just like Base::func() in C++. So, we can use the parent class code by overloading the method hello, as shown below:


This one is very powerful.

combination
The thing above does not meet our requirements yet, and we may hope that these objects can be truly combined. Why combine? Because we all know that this is the most important thing in OO design. However, this does not support Javascript particularly well, and we can still do something.

First, we need to define a Composition function: (target is the object, source is the source object). The following code is still very simple, which is to take out the properties in the source one by one and define it into the target.


With this function, we can play this:


Prototype and Inheritance
Let’s talk about Prototype first. Let's look at the following routine first. This routine does not need to be explained. It is very similar to the function pointer in C language. There are many things like this in C language.

So, can we encapsulate these things? We need to use prototype. See the following example:


This is how to use prototype, which is the most important content in the JavaScript language. There are too many articles on the Internet to introduce this thing. To put it bluntly, prototype is to extend an object, and its characteristic is to return a new instance by "copying" an existing instance, rather than creating a new instance. The instances that are being copied are what we call "prototype", which is customizable (of course, there is no real copy here, it is actually just a delegation). In the example above, we extend the instance Cal to have an operation property and a calculated method.

In this way, we can achieve inheritance through this feature. Remember the Person we were in the front. The following example is to create a Student to inherit Person.


compatibility
The above codes may not necessarily run in all browsers, because the above codes follow the ECMAScript 5 specifications. For the browser compatibility list of ECMAScript 5, you can see the "ES5 Browser Compatibility Table" here.

All the code in this article has been tested in the latest version of Chrome.

Here are some functions that can be used in ES5-incompatible browsers:

()function

defineProperty() function

keys() function

() function

bind function

refer to
W3CSchool
MDN (Mozilla Developer Network)
MSDN (Microsoft Software Development Network)
Understanding Javascript OOP.