JS in the Object-Oriented Object common creation method detailed explanation

Time:2021-6-4

This article describes the common creation methods of Object-Oriented Object in JS. The details are as follows:

Several common ways to create objects

1. Create an object using object or object literal

2. Creating objects in factory mode

3. Create objects in constructor mode

4. Creating objects in prototype mode

1. Create an object using object or object literal

Using object


var student = new Object();
student.name = "easy";
student.age = "20";

Use literal quantity


var sutdent = {
 name : "easy",
 age : 20
};

2. Creating objects in factory mode


function createStudent(name, age) {
 var obj = new Object();
 obj.name = name;
 obj.age = age;
 return obj;
}
var student1 = createStudent("easy1", 20);
var student2 = createStudent("easy2", 20);
...
var studentn = createStudent("easyn", 20);

3. Create objects in constructor mode

When creating a native object like object, we used its constructor


var obj = new Object();

The constructor is also used when creating a native array array type object:

var arr = new Array(10); // Construct an array object with initial length of 10

Let’s first look at the difference between constructors and normal functions.

1. In fact, there is no special syntax to create a constructor. The only difference between a constructor and a normal function is to call methods. For any function, if it is called with the new operator, it is the constructor; If it is not called with the new operator, it is a normal function.

2. According to convention, we agree that the constructor name starts with upper case letter and the ordinary function starts with lower case letter, which is helpful to distinguish the two. For example, new array () and new object () above.

3. When using the new operator to call the constructor, you will experience (1) creating a new object( 2) Assign the scope of the constructor to the new object (make this point to the new object)( 3) Execute the constructor code( 4) Returns the new object; There are four stages.

OK, after understanding the difference between the constructor and the ordinary function, we use the constructor to rewrite the factory mode function and add a method property:


function Student(name, age) {
 this.name = name;
 this.age = age;
 this.alertName = function(){
  alert(this.name)
 };
}
function Fruit(name, color) {
 this.name = name;
 this.color = color;
 this.alertName = function(){
  alert(this.name)
 };
}

In this way, we can create student and fruit objects respectively


var v1 = new Student("easy", 20);
var v2 = new Fruit("apple", "green");

Then we can use the instanceof operator to detect the above object types, and we can distinguish student and fruit

alert(v1 instanceof Student); //true
alert(v2 instanceof Student); //false
alert(v1 instanceof Fruit); //false
alert(v2 instanceof Fruit); //true
alert(v1 instanceof Object); // True any object inherits from object
alert(v2 instanceof Object); // True any object inherits from object

You can simplify the above function: both student and fruit objects have the same method moved outside the constructor


function Student(name, age) {
 this.name = name;
 this.age = age;
}
function Fruit(name, color) {
 this.name = name;
 this.color = color;
};
function alertName() {
 alert(this.name);
}

By defining the alertname() function as a global function, the alertname property in the object is set as a pointer to the global function. Thus, stu1 and stu2 share the global function and solve the problem of memory waste

However, it is not a good solution to solve the problem of internal object sharing through global function. If there are too many global functions defined in this way, the original intention of encapsulating custom objects is almost impossible.

A better solution is to solve the problem through the prototype object pattern.

4. Pattern creation object of prototype

Prototype chain and even prototype inheritance is the most difficult part of JS, and also the most difficult part to understand. Here, due to the positioning of our course, if you are interested in JS, you can check some knowledge points about JS prototype.

function Student() {
  this.name = 'easy';
  this.age = 20;
}
Student.prototype.alertName = function(){
  alert(this.name);
};
var stu1 = new Student();
var stu2 = new Student();
stu1.alertName(); //easy
stu2.alertName(); //easy
alert(stu1.alertName == stu2.alertName); // True both share the same function

Interested friends can useOnline HTML / CSS / JavaScript code running tool: http://tools.jb51.net/code/HtmlJsRun Test the running effect of the above code.

For more information about JavaScript, readers interested in it can see the following topics: introduction to object-oriented JavaScript, summary of JavaScript error and debugging skills, summary of JavaScript data structure and algorithm skills, summary of JavaScript traversal algorithms and skills, and summary of JavaScript mathematical operation usage

I hope this article will be helpful to you in JavaScript programming.