JS Object-oriented object creation

Source: Internet
Author: User
Tags prototype definition

1. Object-based objects

var person = new Object ();p erson.name = ' My name ';p erson.age = 18;person.getname = function () {return this.name;}

2. Object literal

Suppose we treat a person as an object, it has two attributes of "name" and "age".

var person = {Name: ", Age: '}

Now we need to generate two instance objects based on the schema of the prototype object.

var person1 = {}; Create an empty object Person1.name = "Mao";  Assigns a value Person1.age = "19" according to the properties of the prototype object;    var person2 = {};    Person2.name = "Er mao"; Person2.age= "30";

  

3. Factory mode

We can write a function that solves the problem of code duplication. function Person (name,color) {return {name:name, age:age}} or: Function Perso    N (name,age) {var person = new Object ();   Person.name = name;       person.age = age;   return person;     Then generate the instance object, which is equal to the calling function: Var person1 =person ("Da Mao", "19"); var Person2 = person ("Er Mao", "30");

  

4. Constructor Mode
function Person (name,age,job) {this.name = name;    This.age = age;    This.job = job;    This.getname = function () {return this.name; }}var Person1 = new Person (' Jack ', ' n ', ' software Engineer '), var person2 = new Person (' liye ', ', ' mechanical Engineer ');
Define the properties and methods of the object type (for example, person) by using a custom constructor (just like a normal function, which is used only to create objects). It differs from the factory method in that it does not explicitly create an object that assigns properties and methods directly to the This object;
In addition, to create an instance of person, you must use the New keyword, with the person function as the constructor, to pass parameters to complete the object creation The actual creation passes through the following 4 procedures: 1. Create an Object 2. Assigns the scope of the function to the new object (so this is a pointer to the new object, such as: Person1) 3. Code that executes the constructor 4. Returns the object The above two objects generated by the person constructor Person1 and Person2 are instances of person, so you can use instanceof to judge, and because all objects inherit object, Person1 instanceof Object also returns true: Alert (person1 instanceof person),//true;alert (Person2 instanceof person),//true;alert (Person1 instanceof Object);//true;alert (Person1.constructor = = = Person2.constructor);//ture;
Although the constructor method is good, but there are shortcomings, that is, when creating an object, especially for the object's properties point to the function, will be repeated to create the function instance, based on the above code, can be rewritten as: function person (name,age,job) {this.name =  Name  This.age = age;  This.job = job;  This.getname = new Function () {//rewrite the effect is the same as the original code, but to facilitate the understanding of return this.name; }} The code above, when creating multiple instances, calls the new function () repeatedly, creating multiple instances of the functions that are not in a scope, and of course, this is not an error, but it can cause memory waste. Of course, a reference to GetName = GetName can be defined in the function, and the GetName function is defined outside the person, which resolves the problem of repeating the creation of the function instance, but the effect does not encapsulate the effect as follows: function person (name  , age,job) {this.name = name;  This.age = age;  This.job = job; This.getname = GetName;}  function GetName () {//Everywhere is code, look at the mess!! return this.name;}

  

5. Prototype Mode

JS each function has a prototype (prototype) attribute, which is a pointer to an object, which is the prototype object for all instances created with the function using the new operator. The most important feature of a prototype object is that all object instances share the properties and methods it contains, that is, all properties or methods created in the prototype object are shared directly by all object instances.

function person () {}person.prototype.name = ' Jack ';//use prototype to add attribute Person.prototype.age = 29; Person.prototype.getName = function () {return this.name;} var person1 = new Person (), alert (Person1.getname ()),//jackvar person2 = new Person (), alert (person1.getname = = = Person2.getname);//true; methods for sharing a prototype object

  

6. Combinatorial constructors and prototype patterns

The most commonly used method of defining type is the combination of constructor pattern and prototype pattern. The constructor pattern is used to define the properties of the instance, whereas the prototype pattern is used to define methods and shared properties. As a result, each instance will have its own copy of the instance properties, but at the same time share a reference to the other method, maximizing memory savings. In addition, the combination mode supports passing parameters to the constructor, which is the director of the two family.

function person (name, age, Job) {this.name = name;  This.age = age;  This.job = job; This.lessons = [' Math ', ' Physics '];}  Person.prototype = {constructor:person,//prototype literal means that the object's constructor becomes object, and also forces the person getname:function () {return  THIS.name; }}var Person1 = new Person (' Jack ', ' n ', ' software engneer ');p erson1.lessons.push (' biology '); var person2 = new Person (' Lily ', Engneer, ' mechanical '); alert (person1.lessons);//math,physics,biologyalert (person2.lessons);//math, Physicsalert (Person1.getname = = = Person2.getname),//true,//shared prototype definition method

  

  

JS Object-oriented object creation

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.