Implementation of the oop[2]--class for Topsy-JavaScript

Overview

What are we talking about when we talk about object-oriented programming?
The first thing we're talking about are concepts: objects, classes, encapsulation, inheritance, polymorphism.
Objects and classes are object-oriented, and encapsulation, inheritance, and polymorphism are the three main features of object-oriented programming.

JavaScript provides an object but lacks a class, and it cannot explicitly define a class like C #.
But the function of JavaScript is very flexible, one of which is the constructor, the combination of constructors and prototype objects can be implemented "class."

Conceptual objects for objects and classes

"Object" is a very important concept in object-oriented programming, an object is a description of "something" (a person or a thing).
People and things come from real life, our cognition of the real world is the cognition of people and things.
In the field of programming, code is abstract to ordinary people, and the application of code composition is to solve the real-world problem better.
In the analysis and design phase, the concept of "object" can be used to better reflect the real-world problem.

Conversely, the code contains some logic, which is used to describe the business, the business is to contain some business knowledge, the business knowledge is through the understanding of the real world and analysis summed up, these problems are the real world "objects" constitute.

objects contain features and behaviors, and in OOP terms, features are properties of objects, and behaviors are methods of objects. class

In the real world, similar objects can be grouped according to certain criteria. For example, "Hummingbird" and "Eagle" are divided into birds, birds are not a specific object, it is people according to "Hummingbird", "Eagle" and other specific birds to analyze the similar characteristics and behavior, summed up a concept. class is the equivalent of a template, and we can create different concrete objects based on this template.

In C #, we can define a bird.

<summary>///Bird//</summary>public class bird{public    void Fly ()    {        Console.WriteLine ("I Can fly! ");}    }

Although JavaScript is an object-oriented programming language, it does not provide syntax support for classes.
In JavaScript, everything is Object-based, and even if the "prototype" is the object, JavaScript is also inherited and reused through prototypes.
But the combination of constructors and prototype objects can implement JavaScript's "classes".

constructor function

Before we used the new array () to create an array, using new object to create an object, Array () and object () are two constructors built into JavaScript, although JavaScript does not provide a class, However, we can understand array and object as the concept of "class".
It is important to note that the "class" of JavaScript is implemented by constructors.

Defining constructors

Constructors are also functions, and there is no syntactic difference between defining constructors and other functions.
The only difference is that the first letter of the constructor should be capitalized, which is also the JavaScript programming specification.

The following defines a person () constructor, which we can interpret as the person class.

function person () {console.log (' I am keepfool. ');}

JavaScript's class and constructors are defined at the same time, and the constructor is defined when the class is defined in JavaScript.

Using constructors

JavaScript uses classes in the same way as C #, followed by the constructor for the new keyword.

var p = new person ();

Defining Properties and methods

Now that we have defined the person class, you can add properties and methods to the person class.

Defining properties

When we talk about JavaScript objects, we talk about the object's property settings and access.
This code shows two ways to define object properties:

var cat = {color: ' black '};cat.name = ' Tom '; Console.log (Cat.color); Console.log (Cat.name);

Use this to define a property

The properties of JavaScript classes are defined in a somewhat different way, using the This keyword in constructors to define properties:

function person (name) {this.name = name;}

• The first line of code defines the person class and defines the constructor.
• The second line of code defines the Name property.

Creating and Using objects

The following 2 lines of code create an object of two person classes

var p1 = new Person (' James '), var p2 = new Person (' Cury ');

Output P1.name and P2.name in the Chrome console

P1 and P2 are two different objects, and modifying p1.name does not affect p2.name.

P1.name = ' Lebron James ';

Defining methods

First, we distinguish between the term "function" and "method", "function" is a separate unit, and "method" is dependent on the existence of the subject of the class.

Use this to define the method

In JavaScript, a method of a class is a function defined in a constructor that uses the This keyword in a constructor to define a method:

function person (name) {///define Property THIS.name = name;//Definition Method This.sayhello = function () {return ' Hello, I am ' + this.name;}}

How to use

Call the SayHello () method of the P1 and P2 objects, respectively, in the Chrome console

Constructor property

When creating an object, a special property is automatically assigned to the object by JavaScript, which is the constructor property.
In chrome console input p1.constructor , you can see that the constructor property of the P1 object points to a function.

Look at the contents of this function, isn't that the person () constructor?

This means that we can also create objects through the P1.constructor property,

var p3 = new P1.constructor (' Steve Nash ');

This line of code illustrates a sentence: "I don't care how the P1 object was created, but I want another object to be created like P1!" ”

Using the instanceof operator in the chrome console, you can see that P1, P2, and P3 are instances of the person class

Also, when we {} create objects in a way, we actually call the object () constructor.

var o = {};

This line of code declares an object, although we do not set any properties and methods, but the JavaScript engine defaults to it setting the constructor property.
o.constructorPoint to the object () constructor, which [native code] shows that object () is a JavaScript built-in function.

Prototype Object

In JavaScript, when you define a function, the function has the prototype property, and the constructor is no exception.
Explains that the prototype property of the person () constructor is an object that belongs to a function , which we call the prototype object.
From the perspective of the person class, we can also understand that the prototype attribute belongs to the person class.

At the same time the instance of the person class has no prototype attribute, and the p1.prototype is undefined, which means that the prototype attribute is shared, which is somewhat like a static property in C #.

Set prototype

Now that prototype is an object, you can add properties and methods to it.

Defining properties and methods on the Protpotype property of a function is no different than setting the properties and methods of a normal object.
The following code defines the properties and methods for Person.prototype.

function person (name) {this.name = Name;this.sayhello = function () {return ' Hello, I am ' + this.name;}} Define properties and methods on the prototype object of the constructor Person.prototype.height = 176; Person.prototype.run = function () {return ' I am ' + this.name + ', I am running! ';} var p1 = new Person (' James ');

Using prototype

The properties and methods defined in Person.prototype can be used directly by instances of the person class and are still object.property used in the same way.

It is important to note that the name and sayHello() is an instance of the person class, and that height run() is not an instance of the person class.

Tip: You can see whether an object contains a property or method by using the hasOwnProperty method.

Properties of own properties vs. prototype

An instance of the person class can use both the properties in the person class and the properties in Person.prototype.
So what is the difference between the attributes of the person class and the Person.prototype property?

First, we can understand the properties and methods in the person class as instance properties.
Because prototype is shared, we can understand the properties and methods in prototype as "shared properties."

The difference between instance properties and shared properties is primarily performance.
Each instance of a person is created with a copy of the Name property and the SayHello () method, while the height property and the run () method share a copy of all instances.

In this case, this means that the SayHello () method can refer to prototype.
In addition, different person instance height may not be the same, it should be more reasonable to put it in the person class.

function Person (name,height) {this.name = Name;this.height = height;} Person.prototype.sayHello = function () {return ' Hello, I am ' + this.name + ', my height is ' + this.height + ' cm ';} Person.prototype.run = function () {return ' I am ' + this.name + ', I am running! ';} var p1 = new Person (' James ', 203), var p2 = new Person (' Cury ', 190);

Summary of implementation of class

1. JavaScript does not have classes, but constructors can implement "classes."
2. According to the JavaScript programming specification, the first letter of the constructor should be capitalized.
3. The properties and methods of the "class" are this.property defined in the constructor in a way.
4. When an object is created, JavaScript assigns constructor properties to the object, and the constructor property is a reference to the object constructor.
5. The function has a property when it is defined prototype , and the prototype property is an object.
6. Prototype are shared, prototype and the properties and methods defined on them can be used by instances of the "class".
7. If a property or method can be defined on prototype , do not define on the constructor, use prototype can reduce memory overhead.

"Attention" Keepfool

Implementation of the oop[2]--class for Topsy-JavaScript