JavaScript (JS) creates patterns and inheritance of objects in several ways

Source: Internet
Author: User
Tags hasownproperty

1.js several ways to create objects

Factory mode

Why Factory mode is generated because many objects are created using the same interface, generating a lot of duplicate code, in order to solve this problem, the factory pattern is generated.

function Createperson (name,age,job) {

var o=new Object ();

O.name=name;

O.age=age;

O.job=job;

O.sayname=function () {

Console.log (this.name);

}

return o;

}

var Person1=createperson ("Kobe", "the", "player");

var person2=createperosn ("Patty", "+", "singer");

Constructor mode

Unlike Factory mode, the Create object is not displayed, the properties and methods are assigned directly to the this object, and there is no return statement.

function Person (name,age,job) {

This.name=name;

This.age=age;

This.job=job;

This.sayname=function () {

Console.log (this.name);

};

}

var person1=new person ();

var person2=new person ();

Console.log (Person1.sayname==person2.sayname)//false shows that functions with the same name in different instances are not equal

If we want the result to be the same, it can be done

function Person (name,age,job) {

This.name=name;

This.age=age;

This.job=job;

This.sayname=sayname;

}

function Sayname () {

Console.log (this.name);

}

var person1=new person ();

var person2=new person ();

Console.log (person1.sayname==person2.sayname);//true

To create a new instance of person, you need to use the new operator, in this way the constructor will go through four stages, namely:

Create a new object

Assigns the scope of the constructor to the new object

Executing the code in the constructor

return new Object

Both objects Person1 and Person2 have a constructor property that points to the person

Console.log (Person1.constructor==person);//true

Console.log (Person2.constructor==person);//true

Prototype mode

Features: These properties and methods of the new object are shared by all instances

function person () {

}

Person.prototype.name= "Kobe";

person.prototype.age=38;

Person.prototype.sayname=function () {

Console.log (this.name);

}

var person1=new person ();

var person2=new person ();

Console.log (person1.sayname==person2.sayname);//true

Sometimes we want to know whether this property exists in the object or in a prototype, you can use the following methods

We use the In operator and the hasownproperty combination to judge

"Name" in object returns true regardless of whether the property exists in the prototype or in the object.

And hasOwnProperty returns true only if there are instances.

So: only the In operator returns True, and hasOwnProperty returns false to determine that the property is a property in the prototype.

function Hasprototypeproperty (object,name) {

return!object.hasownproperty (name) && (name in object);

}

There is a problem with the prototype object, reaching

function person () {

}

Perosn.prototype=function () {

Constructor Person,

Name: "Kobe",

Age: "29",

Job: "Player",

friends:["Shely", "Count"],

Sayname:function () {

Console.log (this.name);

}

};

var person1=new person ();

var person2=new person ();

Person1.friends.push ("Ann");

Console.log (person1.friends===person2.friends);//true

Workaround: Use the constructor pattern and the prototype pattern

function Person (name,age,job) {

This.name=name;

This.age=age;

This.job=job;

this.friends=["She", "Ya"];

}

person.prototype={

Constructor:person,

Sayname:function () {

Console.log (this.name);

}

};

var person1=new person ();

var person2=new person ();

Person1.friends.push ("VAN");

Console.log (person1.friends===person2.friends);//false

Dynamic Prototyping Mode

function Person (name,age,job) {

This.name=name;

This.age=age;

This.job=job;

if (typeof this.sayname!= "function") {

Person.prototype.sayname=function () {

Console.log (this.name);

}

};

}

Parasitic constructor mode

function Person (name,age,job) {

var o=new Object ();

O.name=name;

O.age=age;

O.job=job;

O.sayname=function () {

Console.log (this.name);

};

return o;

}

var friend=new person ();//This mode is very similar to Factory mode

2.js several ways to implement inheritance

Prototype chain Inheritance: Prototype object property sharing

function Parent2 () {

This.name= "Kobe";

this.play=[1,2,3];

}

function Child2 () {

This.type= "Children";

}

Child2.prototype=new Parent2 ();

var say1=new Child2 ();

var say2=new Child2 ();

Say1.play.push ("Van");

Console.log (say1.play==say2.play);//true

Implementing inheritance by borrowing constructors: unable to implement inherited prototype objects

function Parent1 () {

This.name= "Kobe";

}

parent1.prototype.age=90;

function Child () {

Parent1.call (this);

this.type= "Service";

}

var say=new child ();

Console.log ();//error

Combined inheritance

function Parent4 (name) {

This.name= "Kobe";

this.play=[1,2,3];

}

Parent4.prototype.sayname=function () {

}

function Child4 (name,age) {

Parent3.call (This,name);

This.age=age;

}

Child4.prototype=new Parent4 ();

Child4.prototype.constructor=child4;

Child4.prototype.sayage=function () {

Console.log (This.age);

};

var ins1=new Child4 ();

var ins2=new Child4 ();

Ins1.push.push (4);

Console.log (ins1.play==ins2.play);//false

Prototype inheritance

Function Object () {

function F () {}

F.prototype=o;

return new F ();

}

var person={

Name: "Kobe",

Friends ["Yang", "du", "Geng"]

};

var oneperson=object (person);

var twoperson=object (person);

Parasitic inheritance

function Object (o) {

function F () {}

F.prototype=o;

return new F ();

}

function Create (o) {

var clone=object (o);

Clone.sayhi=function () {

Console.log ("Hi");

};

return clone;

}

var person={

Name: "Kobe",

friends:["James", "Waston", "Sun"]

};

var anotherperson=creat (person);

Anotherperson.sayhi ();//hi

Parasitic combination inheritance

function Inheritprototype (CHILD5,PARENT5) {
var prototype=object (Parent5.prototype);
PROTOTYPE.CONSTRUCTOR=CHILD5;
Child5.prototype=prototype;
}
function Parent5 (name) {
This.name=name;
this.colors=["Red", "Blue", "green"];
}
Parent5.prototype.sayname=function () {
Console.log (this.name);
};
function Child5 (name,age) {
Parent5.call (this.name);
This.age=age;
}
Inheritprototype (CHILD5,PARENT5);
Child5.prototype.sayage=function () {
Console.log (This.age);
};

JavaScript (JS) creates patterns and inheritance of objects in several ways

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.