About JavaScript Object-oriented and prototype notes

Source: Internet
Author: User


JavaScript is a special language, there is no class concept in ECMAScript, it differs from other object-oriented languages, and its objects differ from those in class-based languages, and strictly speaking, JavaScript objects are a set of values that do not have a particular order. Each property or method of an object has a name, and each name is mapped to a value. Each object is created based on a reference type.


The simplest way to create a custom object is to create an instance of object and then add properties and methods to it, such as:

var box = new Object ();        Create Object box.name1 = ' Lee ';                    Add attribute box.age = +;                        Box.run = function () {    return this.name1 + this.age       //this represents the object under the current scope


Insufficient: Creating many objects using the same interface produces a lot of duplicate code.


Factory mode:

Unable to create a class in ECMAScript, the developer came up with another way to encapsulate the details of creating an object with a specific interface, such as:

   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 (' Lilei ', ' software Engineer ');    var person2 = Createperson (' Greg ', ' Doctor ');    Person1.sayname ();    Person2.sayname ();    Alert (typeof Person1);    Alert (typeof Person2);

The function Creatperson () can construct a person object that contains all the necessary information according to the parameters that are accepted, and it is possible to use this function countless times, and each time it returns an object containing a method of three attributes. Factory mode solves the problem of creating multiple types of objects, but it does not solve the problem of object recognition.

Constructor mode

function Person (name,age,job) {        this.name = name;        This.age = age;        This.job = job;        This.sayname = function () {            alert (this.name);        };    }    var = new person (' Lilei ', Person1, ' software Engineer ');    var person2 =new person (' Greg ', ' Doctor ');    Person1.sayname ();    Person2.sayname ();    Alert (Person1 instanceof Object);     Alert (person2 instanceof person);

In this example, the person () function replaces the Createperson () function. Also notice the difference with the Createperson () function:

Object not explicitly created;

The properties and methods are assigned directly to the This object;

no return statement;

Composition method first letter capitalized;

The problem with constructors is that each method is recreated on each instance,

Combining the constructor pattern with the prototype pattern

The common way to create custom types is to combine the constructor pattern with the prototype pattern. The constructor pattern is used to define the instance properties, whereas the prototype pattern uses the definition method and the shared property, so that each instance has its own copy of the instance property, but also shares the reference of the other's method,

function Person (name,age,job) {    this.name =name;    This.age = age;    This.friends = ["Shelpy", "Court"];    }    Person.prototype = {    Constructor:person,    sayname:function () {    alert (this.name)    }    }    var Person1 = new Person (' lilei ', +, ' software Engineer ');    var person2 = new Person (' Greg ', ' Doctor ');    Person1.friends.push ("Van");    alert (person1.friends);    alert (person2.friends);    Alert (person1.friends = = = Person2.friends);    Alert (Person1.sayname = = = Person2.sayname);

In this example, the instance properties are defined in the constructor, and the properties Consructor and Method Sayname () shared by all instances are defined in the prototype, and when Person1.friends is modified, it does not affect Person2,.friends, Because they refer to different arrays.


About JavaScript Object-oriented and prototype notes

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.