We know that in js, there is no concept of class. All instance objects of a class inherit attributes from the same prototype object, so the prototype object is the core of the class.
A class is an abstraction of an object, and an object is a concrete instance of a class. Classes are abstract and do not occupy memory, while objects are concrete and occupy storage space. ---Baidu Encyclopedia
The early JavaScript requirements were very simple, basically written as functions, followed by process-oriented writing. Later, object-oriented development ideas were gradually introduced, and then they were slowly written into classes.
In js, the essence of writing into a class is basically constructor + prototype. Below, let’s discuss several ways to write js class:
Constructor method
/*** Person class: define a person, with name attribute and getName method*/<script> function Person(name){ this.name = name; this.getName = function(){ return this.name; } } //We instantiate several objects here var p1 = new Person("trigkit4"); var p2 = new Person("mike"); console.log(p1 instanceof Person);//true console.log(p2 instanceof Person);//true</script>From the above console output, we can see that p1 and p2 are indeed instance objects of Person class. On the left side of the instanceof operator is the object of the class to be detected, and on the right side is the constructor of the class that defines the class. Here, instanceof is used to detect whether object p1 belongs to the Person class.
The advantage of this method is that we can construct different object instances according to parameters. The disadvantage is that each time we construct the instance object, the getName method will be generated, resulting in memory waste.
We can use an external function instead of class methods, so that each object shares the same method. The rewritten class is as follows:
//External function <script> function getName() { return this.name; } function Person(name){ this.name = name; this.getName = getName;// }</script>Prototype method
<script> function Person(){}; Person.prototype.name = "trigkit4";//The properties of the class are placed on the prototype Person.prototype.getName = function(){ return " I'm " + this.name; } var p1 = new Person(); var p2 = new Person(); console.log(p1.name);//trigkit4 console.log(p2.getName());//I'm trigkit4</script>The disadvantage of the prototype method is that the object instance cannot be constructed through parameters (generally the properties of each object are different). The advantage is that all object instances share the getName method (relative to the constructor method), and there is no memory waste.
Constructor + Prototype
Take the advantages of the first two:
a. Use constructor to define class attributes (fields).
b. Use prototype to define the method of class.
<script> function Person(name){ this.name = name; } //The prototype feature allows object instances to share the getName method Person.prototype.getName = function(){ return " I'm " + this.name; }</script>In this way, we can construct objects with different attributes, and let object instances share methods without causing memory waste.
In order to make the js code more compact, we moved the prototype method code into the braces of function Person.
<script> function Person(name){ this.name = name; Person.prototype.getName = function(){ return name;//This.name is not suitable } } var p1 = new Person('trigkit4'); console.log(p1.getName());//trigkit4</script>Here, we need to know several methods for defining classes, in addition to the above constructor, there are also:
Object.create() method
With this method, a "class" is an object, not a function.
var Person = { name : "trigkit4", age : 21, run: function(){ alert("I like running"); } }Then, use Object.create() directly to generate an instance without using new.
var p1 = Object.create(Person); alert(p1.age);//21 p1.run();//I like running
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 "classes" is not comprehensive enough.
createNew() method
This method does not require this and prototype. It is to use objects to simulate a class, then define a constructor createNew() in the class, and then define an instance object in createNew(), and use this instance object as the return value.
<script> var Person = { createNew : function () { var person = {}; person.name = "trigkit4"; person.run = function(){ alert("I like running"); }; return person; } }</script>When using it, call the createNew() method to get the instance object.
var p1 = Person.createNew(); p1.run();//I like running
This writing method is actually very similar to the writing method of object literals, except that one is separated by comma and the other is separated by semicolon.
The above is all the content of this article. I hope it will be helpful to everyone's learning and I hope everyone will support Wulin.com more.