5 methods for implementing and modifying the definition in Javascript

This article Reprinted from: http://www.phpfuns.com/scripts/javascript/five-method-define-javascript-object.shtml

 

 

Five methods for defining objects in JavaScript (JavaScript does not have the concept of classes, but only objects)

I) extend its attributes and methods based on existing objects

VaR object = new object (); object. name = "zhangsan"; // Add the name attribute object. sayname = function (name) {// Add the sayname method this. name = Name; alert (this. name) ;}; object. sayname ("Kyle"); // call the sayname method. The name attribute is changed to Kyle and the browser prints Kyle.

The simplest method is not convenient to use. It is suitable for temporarily requiring an object.

 

Ii) create objects in factory Mode

Factory method without parameters:

// Factory method function Createobject () {var object = new object (); // create an object. name = "zhangsan"; // Add a name attribute object for this object. password = "123"; // Add a Password attribute object for this object. get = function () {// Add a get method alert (this. name + "," + this. password) ;}; return object; // return this object} var object1 = Createobject (); // call the Createobject factory method to create the object object1var object2 = Createobject (); // call the Createobject factory method to create the object object2object1. get (); // call the object get method object2.get (); // call the object get Method

Factory method with parameters:

function createObject(name, password) {    var object = new Object();    object.name = name;    object.password = password;    object.get = function() {        alert(this.name + "," + this.password);    };    return object;}var object1 = createObject("zhangsan", "123");var object2 = createObject("lisi", "456");object1.get();object2.get();

Disadvantages of the above two factory methods without parameters and with parameters:

Each time an object is created, a get method is created in the memory, which is a waste of memory and affects performance. Our expectation is that the attributes of two different objects are different, but the methods are shared. Therefore, we need to improve the Createobject factory method.

Improved factory methods:

// Put get () out to implement the shared function get () {alert (this. Name + "," + this. Password );}
Function Createobject (name, password) {var object = new object (); object. name = Name; object. password = password; object. get = get; return object;} var object1 = Createobject ("zhangsan", "123"); var object2 = Createobject ("Lisi", "456"); object1.get (); object2.get ();

Define the get method outside the Createobject function, so that the get method is shared for every object created. Share a function object with multiple objects, rather than having one function object for each object.

Iii) create an object using Constructors

Constructors without Parameters

Function person () {// before executing the first line of code, the JS engine will generate an object for us this. name = "zhangsan"; this. password = "123"; this. getinfo = function () {alert (this. name + "," + this. password) ;}; // here is an implicit return statement used to return the previously generated object (which is also different from the factory method)} var p1 = new person (); p1.getinfo ();

Constructors with Parameters

function Person(name, password) {    this.name = name;    this.password = password;    this.getInfo = function() {        alert(this.name + "," + this.password);    };}var p1 = new Person("zhangsan", "123");var p2 = new Person("lisi", "456");p1.getInfo();p2.getInfo();

Iv) Create an object in prototype mode

Prototype is an attribute in an object,

Function person () {} person. prototype. name = "zhangsan"; person. prototype. password = "123"; person. prototype. getinfo = function () {alert (this. name + "," + this. password) ;}; var p1 = new person (); var P2 = new person (); p1.name = "Kyle"; // change the property p1.getinfo () after the object is generated (); p2.getinfo ();

There are two problems with the prototype method: First, you cannot assign an initial value to the attribute in the constructor. You can only change the attribute value after the object is generated.

function Person() {}Person.prototype.name = new Array();Person.prototype.password = "123";Person.prototype.getInfo = function() {    alert(this.name + "," + this.password);};var p1 = new Person();var p2 = new Person();p1.name.push("zhangsan");p1.name.push("lisi");p1.password = "456";p1.getInfo();p2.getInfo();

The browser will print: zhangsan, Lisi, 456, zhangsan, Lisi, 123.

If an object is created using a prototype, all the generated objects share the attributes in the prototype, so that an object changes this attribute and is also reflected in other objects. Therefore, it is impossible to simply use the prototype, but you also need to use other methods. Next we will continue to introduce it.

Define objects using prototype + Constructor

function Person() {    this.name = new Array();    this.password = "123";}Person.prototype.getInfo = function() {    alert(this.name + "," + this.password);};var p1 = new Person();var p2 = new Person();p1.name.push("zhangsan");p2.name.push("lisi");p1.getInfo();p2.getInfo();

The prototype + constructor is used to define objects. Attributes of objects do not interfere with each other. Each object shares the same method. This is a good method.

V) Dynamic Prototype

function Person() {    this.name = "zhangsan";    this.password = "123";    if (typeof Person.flag == "undefined") {        alert("invoked");        Person.prototype.getInfo = function() {            alert(this.name + "," + this.password);        };        Person.flag = true;    }}var p1 = new Person();var p2 = new Person();p1.getInfo();p2.getInfo();

In the dynamic prototype mode, all objects share a method by using the flag in the constructor, and each object has its own attributes. When the code above creates an object for the first time, it first checks whether the flag attribute has been defined by a judgment sentence. If not, it adds the getinfo method by prototype, then, set the flag to true. When the object is created for the second time, the IF statement is false and the execution is skipped. As a result, the created object attributes do not interfere with each other, and the object methods are shared.