This article describes the implementation methods of classes and instances in JavaScript. Share it for your reference. The details are as follows:
There is no concept of parent class, child class, or class or instance in JavaScript. It all depends on the prototype chain to achieve inheritance. When looking for the properties of an object, JavaScript will traverse the prototype chain upward until the corresponding properties are found. There are several methods that can make JavaScript simulate the concepts of class and instance.
1. Use the constructor directly to create an object, and use this to refer to the object instance inside the constructor.
Copy the code as follows: function Animal() {
this.name = "animal";
}
Animal.prototype.makeSound = function() {
console.log("animal sound");
}
[Function]
var animal1 = new Animal();
animal1.name;
'animal'
animal1.makeSound();
animal sound
Let's look at another example:
Copy the code as follows: function Point(x, y) {
this.x = x;
this.y = y;
}
Point.prototype = {
method1: function() { console.log("method1"); },
method2: function() { console.log("method2"); },
}
{ method1: [Function], method2: [Function] }
var point1 = new Point(10, 20);
point1.method1();
method1
point1.method2();
method2
As above, first specify the prototype attribute of a constructor object. Then, new an instance of the object, you can call the method specified in the prototype.
2. Use the Object.create() method to create an object
Copy the code as follows: var Animal = {
name: "animal",
makeSound: function() { console.log("animal sound"); },
}
var animal2 = Object.create(Animal);
animal2.name;
'animal'
console.log(animal2.name);
animal
animal2.makeSound();
animal sound
This method is simpler than the constructor method, but it cannot implement private attributes and private methods, and data cannot be shared between instance objects, so the simulation of class is still not comprehensive enough.
3. Minimalist approach proposed by Dutch programmer Gabor de Mooij. Recommended usage.
Copy the code as follows: var Animal = {
init: function() {
var animal = {};
animal.name = "animal";
animal.makeSound = function() { console.log("animal sound"); };
return animal;
}
};
var animal3 = Animal.init();
animal3.name;
'animal'
animal3.makeSound();
animal sound
Without using prototype and this, you only need to customize a constructor init. The inherited implementation is also very simple.
Copy the code as follows: var Cat = {
init: function() {
var cat = Animal.init();
cat.name2 = "cat";
cat.makeSound = function() { console.log("cat sound"); };
cat.sleep = function() { console.log("cat sleep"); };
return cat;
}
}
var cat = Cat.init();
cat.name; // 'animal'
cat.name2; // 'cat'
cat.makeSound(); // Similar to method overloading
cat sound
cat.sleep();
cat sleep
Use of private properties and private methods:
Copy the code as follows: var Animal = {
init: function() {
var animal = {};
var sound = "private animal sound"; // Private attributes
animal.makeSound = function() { console.log(sound); };
return animal;
}
};
var animal4 = Animal.init();
Animal.sound; // undefined private attributes can only be read through the object's own methods.
animal.sound; // undefined private attributes can only be read through the object's own method.
animal4.makeSound();
private animal sound
As long as properties and methods not defined on animal objects are private, they cannot be accessed by the outside world.
Data sharing can be achieved between classes and instances.
Copy the code as follows: var Animal = {
sound: "common animal sound",
init: function() {
var animal = {};
animal.commonSound = function() { console.log(Animal.sound); };
animal.changeSound = function() { Animal.sound = "common animal sound changed"; };
return animal;
}
}
var animal5 = Animal.init();
var animal6 = Animal.init();
Animal.sound; // Can be regarded as a class attribute
'common animal sound'
animal5.sound; // Instance object cannot access class attributes
undefined
animal6.sound;
undefined
animal5.commonSound();
common animal sound
animal6.commonSound();
common animal sound
animal5.changeSound(); // Modify class properties
undefined
Animal.sound;
'common animal sound'
animal5.commonSound();
common animal sound
animal6.commonSound();
common animal sound
For example, Animal.sound is the shared attributes of classes and instances, which can be regarded as class attributes and class methods.
If an instance changes the common attribute, the common attributes of the class and other instances are also modified accordingly.
In summary, it is the concept and usage of class and instance simulated in JavaScript.
I hope this article will be helpful to everyone's JavaScript programming.