This article is a summary of chapter 6 of JavaScript Advanced Programming (Object-oriented Programming), which I have read at least 4 times. This chapter focuses on object creation and inheritance. There are at least six ways to create objects and inherit, plus some method properties, which can easily get confused. Therefore, it is necessary to clarify the contents of this chapter, and come to see it if you forget it later.
Due to the length of the article, this article focuses on creating objects.
1 Creating an Object
1.1 General Methods
Methods that use Object or Object literals.
1 var o = {a: 1};
2 var o2=new Object();
3 o2.a=1;
Copy the codeDisadvantages: Using the same interface to create many objects can result in a lot of repetitive code.
1.2 Factory Mode
function parent(name,age){
var Child = new Object();
Child.name=name;
Child.age=age;
Child.sayHi=function(){
console.log("Hi");
}
return Child;
};
var x = Parent("Tom",12);
console.log(x.name); //Tom
x.sayHi(); //Hi
Copy the codeThe parent function builds a Child object with all the necessary information based on the parameters it receives. This function can be called an infinite number of times and will return an object containing two properties and a method.
It solves the problem of creating multiple similar objects, but it doesn’t solve the problem of object recognition (how to know the type of an object).
1.3 Constructor pattern
For the constructor name, students who have learned Java or c++ should know, in js is similar.
Use the constructor to rewrite the above example as follows:
function Parent(name,age){
this.name=name;
this.age=age;
this.sayHi=function(){
console.log("Hi");
};
}
var x = new Parent("Tom",12);
console.log(x.name); //Tom
x.sayHi(); //Hi
Copy the codeFor constructors, we need to call them with the keyword new. Note that constructors always start with a capital letter, while non-constructors always start with a lowercase letter.
Compared with the factory mode, there are the following major differences:
- Create objects without showing them;
- Assign attributes and methods directly to this object;
- No return statement.
Disadvantages: The disadvantage of using constructors is that each method needs to be recreated on each instance.
1.4 Prototype Mode
Each function we create has a Prototype property, which is a pointer to an object whose purpose is to contain properties and methods that can be shared by all instances of a particular type. The advantage of using prototype objects is that all object instances can share the properties and methods they contain.
function Parent(name,age){
Parent.prototype.name=name;
Parent.prototype.age=age;
Parent.prototype.sayHi=function(){
console.log("Hi");
};
}
var x = new Parent("Tom",12);
console.log(x.name); //Tom
x.sayHi(); //Hi
Copy the codeDisadvantages: Advantages are disadvantages, method attributes can be shared. Look at the following example
function Parent(name,age){ Parent.prototype.name=name; Parent.prototype.age=age; Parent.prototype.arr=["123","we"]; Parent.prototype.sayHi=function(){ console.log("Hi"); }; } var x = new Parent("Tom",12); var y = new Parent("Tom1",12); x.arr.push("x"); y.arr.push("y"); console.log(x.arr); //["123", "we", "x", "y"] console.log(y.arr); //["123", "we", "x", "y"]Copy the codeObject X modifies its properties to affect object Y; Same thing for y. This is obviously irrational. It’s horrible!
1.5 Use a combination of constructor and stereotype patterns
Function Parent(name,age){// Just leave the attributes defined here, and put the methods in the prototype object this.name=name; this.age=age; Function (){console.log("Hi"); }; // The second way // Since object literals are used, its constructor property must be corrected; Parent.prototype={ constructor:Parent, sayHi:function(){ console.log("Hi"); } } var x = new Parent("Tom",12); console.log(x.name); //Tom x.sayHi(); //HiCopy the codeIn this example, the instance properties are defined in the constructor, while the properties constructor and methods shared by all instances are defined in the stereotype.
Is currently one of the most widely used and recognized methods for creating custom types.
— — — — — — — — — — — — — — — — — — — — — — — — — – feeling behind several methods of some pervert the — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — —
1.6 Dynamic prototype mode
function Parent(name,age){ this.name=name; this.age=age; if( typeof this.sayHi ! ="function"){ Parent.prototype.sayHi=function(){ console.log("Hi"); }; } } var x = new Parent("Tom",12); console.log(x.name); //Tom x.sayHi(); //HiCopy the codeDetermine whether you need to initialize the prototype by checking whether a method that should exist is valid.
1.7 The parasitic constructor pattern
The parasitic constructor pattern can be used when none of the previous ones apply. The basic idea is to create a function that simply encapsulates the code that created the object and then returns the newly created object.
function parent(name,age){
var Child = new Object();
Child.name=name;
Child.age=age;
Child.sayHi=function(){
console.log("Hi");
}
return Child;
};
var x = Parent("Tom",12);
console.log(x.name); //Tom
x.sayHi(); //Hi
Copy the codeBut in fact is exactly the same as the factory model, are you TM kidding me ？？？？？
1.8 Secure constructor patterns
The secure constructor follows a similar pattern to the parasitic constructor pattern, with two differences: first, the newly created object instance method does not reference this; The second is to call the constructor without using the new operation.
Function Parent(name,age){var o=new Object(); Var name=name, age=age; O.sayname =function(){this console.log(name+" "+age)} return o; } var x = Parent("Tom",12); x.sayName(); //Tom 12Copy the codeVariable X holds a secure object, and there is no other way to access its data members than by calling the sayName() method.