JavaScript study notes (9) js object design pattern_basic knowledge

1. Create object

Copy code The code is as follows:

var person = new Object ();
person.name = "RuiLiang";
person.age = 30;
person.job = "Teacher";
person.sayName = function () {
alert( this.name);
};

person.sayName();

2. Factory mode
Disadvantages: Unable to identify objects

Copy code The code is as follows:

function createPerson(name,age,job) {
var o = new Object();
o.name = name;
o.age = age;
o.job = job;
o.sayName = function () {
alert (this.name);
};
return o;
}

var person1 = createPerson("A Liang",30,"Teacher");
var person2 = createPerson("Junjun",24,"Unemployed");

person1.sayName(); //"A Liang"
person2.sayName(); //"Junjun"

3. Constructor pattern
Disadvantages: lack of encapsulation

Copy code The code is as follows :

function Person(name,age,job) {
this.name = name;
this.age = age;
this.job = job;
this.sayName = sayName;
}
function sayName() {
alert(this.name);
}

var person1 = new Person("A Liang",30 ,"Teacher");
var person2 = new Person("Junjun",24,"Unemployed");
person1.sayName();
person2.sayName();

4. Prototype mode
Disadvantages: All properties are shared by instances

Copy code The code is as follows:

function Person() {
}

Person.prototype.name = "ALiang";
Person.prototype.age = 30;
Person. prototype.job = "Teacher";
Person.sayName = function () {
alert(this.name);
}

hasOwnProperty() method detects a certain property Is it an instance attribute, if so it returns true

person1.hasOwnProperty("name"); //Is name a property of person1?
in operator: Whether the attribute accessed through the object exists, if so it is returned true, regardless of whether the attribute exists in the instance or the prototype

alert("name" in person1); //If the name attribute exists, return true
Method to determine whether the attribute is in the prototype or the object:

Copy code The code is as follows:

function hasPrototypeProperty(object,name) {
return !object.hasOwnProperty(name) && (name in object);
}
//Usage
var person = new Person();
alert(hasPrototypeProperty(person,"name")); //true
person.name = "Grey"; //Change the value of name in the prototype
alert(hasPrototypeProperty(person,"name")); //false

isPrototypeOf The () method is used to determine whether the specified object object1 exists in the prototype chain of another object object2. If so, it returns true, otherwise it returns false.
The format is as follows:
object1.isPrototypeOf(object2);
object1 is an instance of an object;
object2 is another object whose prototype chain will be checked.
Prototype chains can be used to share functionality between different instances of the same object type.
If object2’s prototype chain contains object1, then the isPrototypeOf method returns true.
If object2 is not an object or object1 does not appear in the prototype chain in object2, the isPrototypeOf method will return false.

Copy code The code is as follows:

//Literal override prototype object
function Person(){
}

Person.prototype = {
constructor : Person,
name : "ALiang",
age : 30,
job : "Teacher",
sayName : function() {
alert(this.name);
}
};

5. Constructor and prototype mixed mode
It has the advantages of constructor mode and prototype mode. Constructor mode is used for properties and prototype mode is used for methods // This mode is the most widely used

Copy code The code is as follows:

function Person(name,age,job) {
this.name = name;
this.age = age;
this.job = job;
this.friends = ["xuyun","wuxueming"];
}
Person.prototype = {
constructor : Person,
sayName : function() {
alert(this.name);
}
};

var person1 = new Person("ALiang",30,"Teacher");
var person2 = new Person("ZuNan",26,"Teacher");
person1.friends.push("JunJun");
alert(person1.friends); //"xuyun","wuxueming","JunJun"
alert(person2.friends); //" xuyun","wuxueming"

6. Dynamic prototype mode

Copy code Code As follows:

function Person(name,age,job) {
this.name = name;
this.age = age;
this.job = job;

if (typeof this.sayName != "function"){ //The sayName here can be any method or property that exists after initialization
Person.prototype.sayName = function() { //Cannot use literals Quantitative form
alert(this.name);
};
}

7. Parasitic constructor pattern
8. Safe constructor pattern