This article mainly introduces the implementation methods of classes and instances in JavaScript. It very cleverly simulates the implementation process of classes and instances. It has certain reference value. Friends in need can refer to it. The details are as follows:
There is no concept of parent class, subclass, or class and instance in JavaScript. It relies entirely on the prototype chain to realize inheritance. When looking for the properties of an object, JavaScript will traverse the prototype chain upward until the corresponding property is found. . There are several ways to make JavaScript simulate the concepts of class and instance.
1. Directly use the constructor to create the object, and use this inside the constructor to refer to the object instance.
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
Look at another example:
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
Above, first specify the prototype attribute of a constructor object. Then create a new instance of the object, and then call the prototype specified in method.
2. Use the Object.create() method to create an object
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, However, private properties and private methods cannot be implemented, and data cannot be shared between instance objects, and the simulation of classes is still not comprehensive enough.
3. Minimalist proposed by Dutch programmer Gabor de Mooij Minimalist approach. Recommended usage.
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
Do not use prototype and this, only need to customize a constructor init. The implementation of inheritance is also very simple.
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(); // 类似于方法的重载 cat sound cat.sleep(); cat sleep
Use of private attributes and private methods:
var Animal = { init: function() { var animal = {}; var sound = "private animal sound"; // 私有属性 animal.makeSound = function() { console.log(sound); }; return animal; } }; var animal4 = Animal.init(); Animal.sound; // undefined 私有属性只能通过对象自身的方法来读取. animal.sound; // undefined 私有属性只能通过对象自身的方法来读取 animal4.makeSound(); private animal sound
As long as the attributes and methods are not defined on the animal object, they are private and cannot be accessed by the outside world.
Between classes and instances, you can Achieve data sharing.
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; // 可以视为类属性 'common animal sound' animal5.sound; // 实例对象不能访问类属性 undefined animal6.sound; undefined animal5.commonSound(); common animal sound animal6.commonSound(); common animal sound animal5.changeSound(); // 修改类属性 undefined Animal.sound; 'common animal sound' animal5.commonSound(); common animal sound animal6.commonSound(); common animal sound
For example, Animal.sound is a common attribute of classes and instances, which can be regarded as class attributes and class methods.
If an instance modifies the common attribute, Then the common attributes of the class and other instances are also modified accordingly.
To sum up, this is the concept and usage of class and instance simulated in JavaScript. I hope this article will be helpful to everyone’s javascript programming. For more related tutorials, please visit JavaScript Video Tutorial!