Summary of javascript creation objects (javascript advanced programming) and javascript programming

Source: Internet
Author: User

Summary of javascript creation objects (javascript advanced programming) and javascript programming
1. Factory Model

This mode abstracts the process of creating a specific object and uses functions to encapsulate specific interfaces to create classes.
    function createStudent(name) {        var o = new Object();        o.name = name;        o.sayName = function() {            alert(this.name);        };        return o;    }    var student1 = createStudent("Tom");
Solved problems: solved the problem of creating multiple similar objects. Disadvantages: did not solve the problem of object recognition.
2. constructor Mode
    function Student(name) {        this.name = name;        this.sayName = function() {            alert(this.name);        };    }    var student1 = new Student("Tom");    var student2 = new Student("Suen");

To create a new instance of Student in this mode, you must use the new operator. The following steps are taken to call the constructor: (1) create a new object; (2) Assign the constructor scope to the new object (so this points to the new object ); (3) execute the code in the constructor (add attributes for the new object) (4) return the new object

Solution: for Object Recognition, you can use the constructor attribute and the instanceof operator to detect the object type:

        alert(student1.constructor == Student) //true        alert(student2 instanceof Object) //true        alert(student2 instanceof Student) //true

Disadvantage: each method must be re-created on each instance. For example, in the preceding example, the sayName () of student1 and student2 are not instances of the same Function, which is unnecessary.

3. prototype mode

Each function we create has a prototype attribute, which is a pointer to an object. The purpose of this object is to include the attributes and Methods shared by all instances.

    function  Student() {    }    Student.prototype.name = "Tom";    Student.prototype.sayName = function(){        alert(this.name);    };    var student1 = new Student("Tom");    var student2 = new Student("Suen");    alert(student1.sayName == student2.sayName); //true

Simpler prototype syntax: function Student () {} Student. prototype = {constructor: Student, name: "Tom", sayName: function () {alert (this. name );}};

Solution: All object instances share the prototype method and do not need to be re-created.
Disadvantage: It skips the parameter initialization for the constructor, so that all instances obtain the same attribute value by default. More seriously, attributes in the prototype are shared by many instances. Although you can add attributes with the same name in the instance, the problem is more serious for attributes that contain reference type values.

4. Combined use of the constructor mode and prototype mode

The constructor mode is used to define instance attributes, while the prototype mode defines methods and shared methods. Each instance has its own copy of the Instance attribute, and it also shares the reference to the method.

    function Student(name) {        this.name = name;        this.roommates = ["John","Ben"];    }    Student.prototype = {        constructor : Student,        sayName : function() {            alert(this.name);        }    };    var student1 = new Student("Tom");    var student2 = new Student("Suen");    student1.roommates.push("Jim");    alert(student1.roommates); // "John, Ben, Jim"    alert(student2.roommates); // "John, Ben"

This mode is the most widely used and highly recognized mode.

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.