JS prototype + prototype chain + design mode

Source: Internet
Author: User

JavaScript is an object-based language, and All objects in JavaScript have prototype properties. The prototype property returns all properties and methods of the object, and all JavaScript Internal objects have read-only prototype property, you can dynamically add properties and methods to its prototype, but the object cannot be assigned a different prototype. However, a custom object can be assigned to a new prototype.

Objects are divided into function objects and ordinary objects, which are distinguished: all objects created by the new function () are function objects, others are normal objects. (Object, function is a functional object that JS comes with)

1. Prototype object:prototype

In JS, the function object is one of the properties: the prototype object prototype. Ordinary objects are not prototype properties, but have __proto__ properties.

The purpose of a prototype is to add a uniform method to each object of the class, and the methods and properties defined in the prototype are shared by the instance object.

Cases:

var person = function (name) {
THIS.name = Name
};
Person.prototype.getName = function () {//Person.prototype setting functions Object Properties
return this.name;
}
var zxj= new person (' Zhangxiaojie ');
Zxj.getname (); Zhangxiaojie//zxj Inheritance on properties

2. Prototype chain

__proto__:js creates a built-in property of an object that points to the prototype object prototype of the function object that created it. (Is JS internal use to look for the properties of the prototype chain.) When an object is instantiated, a new __proto__ property is created internally and assigned to it by the prototype)

For the prototype chain to run the plot, when we instance an object, call its internal method, his running order is to find himself there is no this method, if not will be through the __proto__ property to look for the upper layer, has been looking for the object, if not yet will error null

P._proto_----->persion._proto_---->object._proto_----->null

3. Design mode

(1) Factory mode: Creates an object within the function, assigns properties and methods to the object, and returns the object.

function Parent () {
var child = new Object ();
Child.name= "ZXJ";
Child.age= "24";

Child.sex=function () {

return "female";
};
return child;
};
Call:
var x =parent ();

alert (x.name); Zxj
Alert (X.sex ()); Woman

(2) constructor mode: Do not need to re-create the object inside the function, and use this to refer to the

    function Parent () {

var child = new Object ();
This.name= "ZXJ";
This.age=24 ";
This.lev=lev;

Child.sex=function () {

return "female";
};
return child;
};
Call:
var x = new Parent ();
alert (x.name); Zxj
Alert (X.sex ()); Woman

(3) Prototype mode: The function does not define the attribute, using the prototype attribute to define the property, you can let all object instances share the properties and methods it contains.

function Parent () {};
Parent.prototype.name= "zxj";
Parent.prototype.age= "24";
Parent.prototype.sex=function () {

var s= "female";

alert (s);

};

Call:
var x =new Parent ();
alert (x.name); Zxj
Alert (X.sex ()); Woman

(4) Mixed mode: Prototype Mode + constructor mode. In this pattern, the constructor pattern is used to define the instance properties, while the prototype pattern is used to define methods and shared properties.

function Parent () {
This.name= "ZXJ";
this.age=24;
};
Parent.prototype.sayname=function () {
return this.name;
};
Call:
var x =new Parent ();
Alert (X.sayname ()); Zxj

(5) Dynamic prototype mode: All information is encapsulated in the constructor, and the prototype is initialized through the constructor, which can be chosen by determining whether the method is valid and whether the prototype needs to be initialized.

function Parent () {
This.name= "ZXJ";
this.age=24;
if (typeof parent._sayname== "undefined") {
Parent.prototype.sayname=function () {
return this.name;
}
Parent._sayname=true;
}

};
Call:
var x =new Parent ();
Alert (X.sayname ());

JS prototype + prototype chain + design 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.