Overview
What are we talking about when we are talking about object-oriented programming?
We first talk about some concepts: objects, classes, encapsulation, inheritance, polymorphism.
Objects and classes are the basis of object-oriented, and encapsulation, inheritance and polymorphism are the three major features of object-oriented programming.
JavaScript provides objects but lacks classes, and it cannot explicitly define a class like C#.
However, JavaScript's function functions are very flexible, one of which is the constructor, which can implement "classes" in combination with constructors and prototype objects.
Objects and classes concepts
Object
"Object" is a very important concept in object-oriented programming. An object is a description of a "thing" (someone or something).
People and things come from real life, and our understanding of the real world is our understanding of people and things.
In the field of programming, code is abstract for ordinary people, and the application of code is to better solve real-world problems.
During the analysis and design phases, the concept of "object" can better reflect real-world problems.
Conversely, the code contains some logic, which is used to describe the business. The business contains some business knowledge. The business knowledge is summarized through understanding and analysis of the real world. These problems are composed of "objects" in the real world.
Objects contain features and behaviors. In OOP terms, features are attributes of objects, and behaviors are objects' methods.
kind
In the real world, similar objects can be grouped according to certain standards. For example, "hummingbirds" and "eagles" are both divided into birds. Birds are not specific objects. They are a concept summarized by people after analyzing similar characteristics and behaviors based on specific birds such as "hummingbirds" and "eagles". A class is equivalent to a template, and we can create different specific objects based on this template.
In C#, we can define a bird.
/// <summary>//// Birds /// </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 class.
In JavaScript, everything is based on objects. Even the "prototype" we will talk about later are objects. The inheritance and reuse of JavaScript are also implemented through prototypes.
However, combining constructors and prototype objects can implement JavaScript's "classes".
Constructor
Previously, we used new Array() to create an array and used new Object() to create an object. Array() and Object() are two built-in constructors in JavaScript. Although JavaScript does not provide classes, we can understand Array and Object as the concept of "classes".
It should be noted that the "class" of JavaScript is implemented by the constructor.
Define the constructor
Constructors are also functions, and there is no syntax 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 programming specification of JavaScript.
The following defines a Person() constructor, which we can understand as the Person class.
function Person(){console.log('I am keepfool.');}The "class" and constructor of JavaScript are defined at the same time. When defining "class" in JavaScript, the constructor is defined at the same time.
Using constructors
JavaScript uses classes the same way as C#, with the new keyword followed by the constructor.
var p = new Person();
Define attributes and methods
Now that we have defined the Person class, we can add some properties and methods to the Person class.
Define attributes
When talking about JavaScript objects, we talk about the property setting and access of objects.
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 attributes
The attribute definition method of JavaScript class is somewhat different. Use this keyword to define attributes in the constructor:
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 attribute.
Create and use objects
The following 2 lines of code create two Person class objects
var p1 = new Person('James');var p2 = new Person('Cury');Output p1.name and p2.name in Chrome console
p1 and p2 are two different objects, modifying p1.name will not affect p2.name.
p1.name = 'Lebron James';
Define the method
First, let's distinguish the terms "function" and "method". "function" is an independent unit, while "method" depends on the existence of the class as the subject.
Use this to define methods
In JavaScript, the class method is to define the function in the constructor, and use this keyword to define the method in the constructor:
function Person(name) {// Define the attribute this.name = name;// Define the method this.sayHello = function() {return 'Hello, I am ' + this.name;}}How to use
Call the sayHello() method of p1 and p2 objects respectively in the Chrome console
constructor attribute
When an object is created, a special property is automatically assigned to the object by JavaScript, and this property is the constructor property.
Enter p1.constructor in the chrome console and you can see that the constructor property of the p1 object points to a function.
Look at the content of this function, isn't this 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 explains a sentence: "I don't care how the p1 object is 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 all instances of Person class
Also, when we create the object in {} way, the Object() constructor is actually called.
var o = {};This line of code declares an object. Although we do not set any properties and methods, the JavaScript engine sets the constructor attribute by default.
o.constructor points to the Object() constructor, [native code] shows that Object() is a built-in function in JavaScript.
Prototype object
In JavaScript, when defining a function, the function will have a prototype attribute, and the constructor is no exception.
The following figure shows that the prototype property of the Person() constructor is an object, which belongs to the function , and we call this property a prototype object.
From the perspective of Person class, we can also understand that the prototype attribute belongs to the Person class.
At the same time, the instance of Person class does not have a prototype attribute. The p1.prototype in the figure above is undefined, which means that the prototype attribute is shared, which is a bit like the static attribute in C#.
Setting prototype
Since prototype is an object, you can add properties and methods to it.
Defining properties and methods on the prototype property of a function is no different from setting properties and methods of ordinary objects.
The following code defines 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 constructor's prototype object Person.prototype.height = 176;Person.prototype.run = function(){return 'I am ' + this.name + ', I am running!';}var p1 = new Person('James');Using prototype
Prototype properties and methods defined in Person.prototype can be used directly by instances of Person class and are still used in the form of object.property .
It should be noted that name and sayHello() are instances belonging to the Person class, while height and run() are instances not belonging to the Person class.
Tips: You can check whether the object contains a certain property or method through the hasOwnProperty method.
Prototype attributes
An instance of Person class can use both properties in Person class and properties in Person.prototype.
So what is the difference between the properties of Person class and the properties of Person.prototype?
First, we can understand the properties and methods in the Person class as "instance properties".
Since prototype is shared, we can understand properties and methods in prototype as "shared properties".
The difference between "instance attributes" and "shared attributes" is mainly reflected in performance.
Each time a Person instance is created, a copy of the name attribute and the sayHello() method will be generated, and the height attribute and the run() method will share a copy of all instances.
That being the case, this means that the sayHello() method can be mentioned in the prototype.
In addition, different Person instance height may be different, so 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);Class implementation summary
JavaScript has no classes, but constructors can implement "classes".
According to JavaScript programming specifications, the first letter of the constructor should be capitalized.
The properties and methods of "class" are defined in the constructor in this.property method.
When object creation is created, JavaScript assigns the constructor attribute to the object. The constructor attribute is a reference to the object constructor function.
The function already has a prototype attribute when it is defined, and the prototype attribute is also an object.
The prototype is shared, and properties and methods defined on the prototype can be used by instances of the "class".
If properties or methods can be defined on prototype, do not define them on constructors. Using prototype can reduce memory overhead.
The above article on JavaScript OOP - Class implementation details are all the content I have shared with you. I hope you can give you a reference and I hope you can support Wulin.com more.