Class and instance implementation methods in JavaScript-JS Tutorial-php.cn

Class and instance implementation methods in JavaScript

PHPz

Release： 2018-09-29 16:20:23

Original

1392 people have browsed it

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;  
&#39;animal&#39;  
 animal1.makeSound();  
animal sound

Copy after login

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

Copy after login

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;  
&#39;animal&#39;  
 console.log(animal2.name);  
animal  
 animal2.makeSound();  
animal sound

Copy after login

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;  
&#39;animal&#39;  
 animal3.makeSound();  
animal sound

Copy after login

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; // &#39;animal&#39;  
 cat.name2; // &#39;cat&#39;  
 cat.makeSound(); // 类似于方法的重载  
cat sound  
 cat.sleep();  
cat sleep

Copy after login

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

Copy after login

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; // 可以视为类属性  
&#39;common animal sound&#39;  
 animal5.sound; // 实例对象不能访问类属性  
undefined  
 animal6.sound;  
undefined  
 animal5.commonSound();  
common animal sound  
 animal6.commonSound();  
common animal sound  
 animal5.changeSound(); // 修改类属性  
undefined  
 Animal.sound;  
&#39;common animal sound&#39;  
 animal5.commonSound();  
common animal sound  
 animal6.commonSound();  
common animal sound

Copy after login

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!