JS Object-oriented, create, inherit

Source: Internet
Author: User

1 Creating an object-oriented

650) this.width=650; "src="/img/fz.gif "alt=" Copy Code "style=" Margin:0px;padding:0px;border:none; "/>

var obj = new Object (); Create an empty object obj.name = ' haha '; obj.showname = function () {alert (obj.name);} Obj.showname ();

650) this.width=650; "src="/img/fz.gif "alt=" Copy Code "style=" Margin:0px;padding:0px;border:none; "/>

Cons: When we want to create multiple object-oriented, repeat the code too much, need encapsulation, so the following method

2 Factory mode

650) this.width=650; "src="/img/fz.gif "alt=" Copy Code "style=" Margin:0px;padding:0px;border:none; "/>

function Createperson (name) {//raw var obj = new Object ();   Processing obj.name = name;   Obj.showname = function () {alert (this.name); }//Factory return obj;} var p1 = Createperson (' haha ');p 1.showName (), var p2 = Createperson (' hehe ');p 2.showName ();

650) this.width=650; "src="/img/fz.gif "alt=" Copy Code "style=" Margin:0px;padding:0px;border:none; "/>

This is actually a simple encapsulation function, the whole process like a factory assembly line, so called Factory way

Disadvantage: The type of object created is not recognized. Because all are object, there is no degree of distinction, unlike date, array, and so on, there is a constructor pattern.

3 constructor Mode

We're going to change that in two ways: 1 the first capital of a function name, 2 New keyword call

650) this.width=650; "src="/img/fz.gif "alt=" Copy Code "style=" Margin:0px;padding:0px;border:none; "/>

function Createperson (name) {this.name = name;      This.showname = function () {alert (this.name);  }} var p1 =new createperson (' haha '); P1.showname (); var p2 = new Createperson (' hehe '); P2.showname ();

650) this.width=650; "src="/img/fz.gif "alt=" Copy Code "style=" Margin:0px;padding:0px;border:none; "/>

1 First letter capitalization, is to distinguish from ordinary functions, the constructor itself is a normal function, but we specifically use it to implement the function of construction, so a special name is called a constructor, any function can become a constructor, depending on how you call the function. Whether new is used.

2 The New keyword was used when calling the function, so what did new do? What's the difference between using no new? Take another look at the following example

650) this.width=650; "src="/img/fz.gif "alt=" Copy Code "style=" Margin:0px;padding:0px;border:none; "/>

function Createperson (name) {this.name = name;   This.showname = function () {alert (this.name);  }; Console.log (this);} New Createperson (' haha ');  Createperson{}createperson (' haha '); Window

650) this.width=650; "src="/img/fz.gif "alt=" Copy Code "style=" Margin:0px;padding:0px;border:none; "/>

We'll find that when you call a function with new, the point of this is different. In fact, new mainly did the following things, but the following is only about the behavior, not the internal source code.

650) this.width=650; "src="/img/fz.gif "alt=" Copy Code "style=" Margin:0px;padding:0px;border:none; "/>

function Createperson (name) {var res = {};  Declares an empty object res res._proto_= createperson.prototype;//This object's _proto_ property to the constructor's prototype object so that res can invoke all the methods under the Createperson prototype object  Createperson.apply (res);//change this point to res object this.name = name;   Res Object Add Property, Method This.showname = function () {alert (this.name);  }; Return res;//returns this object}

650) this.width=650; "src="/img/fz.gif "alt=" Copy Code "style=" Margin:0px;padding:0px;border:none; "/>

When it comes to new, it's internal, not visible, but it does exist, and the prototype above can probably know the conclusion, the following will say the prototype, and then read it.

Problems with the function construction pattern:

alert (p1.showname==p2.showname);//false

To test this code, the two methods are different, that is, the two objects are not a common method, each new, the system will create a newly created memory, the two objects have their own site, but they have the same function, not shared, certainly not what we want. So there's the next way, prototype + construction mode

4 prototype + construction mode

Each function has a prototype property, which is a object , also called the prototype object, the prototype object, We can write the method and the property on it (but the prototype object is not only the properties and methods we write, there are other, described below), and through . So we just have to put what we want to share in the prototype of the function, and what we don't want to share is created by the constructor.

See a chestnut (prototype + construction)

650) this.width=650; "src="/img/fz.gif "alt=" Copy Code "style=" Margin:0px;padding:0px;border:none; "/>

function Createperson (name) {this.name = name;} CreatePerson.prototype.showName = function () {alert (this.name);} var p1 =new createperson (' haha ');p 1.showName (), var p2 = new Createperson (' hehe ');p 2.showName (); Alert (p1.showname== P2.showname);//true

650) this.width=650; "src="/img/fz.gif "alt=" Copy Code "style=" Margin:0px;padding:0px;border:none; "/>

The last sentence of the test is true, you can see the constructor under the prototype of the method ShowName () method is all the objects created by this constructor is shared, that is, they share a memory, further said they have a referential relationship, This means that you change the showname of the P1 will also affect P2 showname.

Therefore, when we construct the object, it is generally used in the combination of the prototype pattern and the construction pattern , changing the common prototype pattern with the invariant construction mode, like the chestnut, the constructor of the attribute, because the different object properties are different, the method uses the prototype pattern.

  _proto_ Property : js is stored in heap memory, and the variable we declare is just a pointer, The actual address of the object is saved, so there is an address to find the object ), so always, each instantiation object has the _proto_ property, the address of the prototype object that holds the constructor, and through this property can have all the properties and methods under the prototype object, _proto_ A property is actually a connection between instantiating an object and a prototype object.

prototype chain : Each function can be a constructor, each function has a prototype object, and each prototype object can also be an instantiated object, for example, you create a function fun, which is an instantiated object of the constructor function, and a prototype object is an instance object of object again. So fun has a _proto_ property can access the prototype object of the function, the function prototype object is also an instance object, and there is a _ The Proto_ property provides access to the prototype object of object, so through the _proto_ property, a prototype chain.

access rules for the prototype chain : First look under their own, then go to the primary level of the prototype chain to find. as follows:

650) this.width=650; "src="/img/fz.gif "alt=" Copy Code "style=" Margin:0px;padding:0px;border:none; "/>

function Aaa () {}aaa.prototype.num = 3;var a1 = new Aaa (); A1.num =10;alert (A1.num); 10

650) this.width=650; "src="/img/fz.gif "alt=" Copy Code "style=" Margin:0px;padding:0px;border:none; "/>

650) this.width=650; "Src=" http://images2015.cnblogs.com/blog/924161/201705/924161-20170503125720601-1696320537. PNG "width=" 624 "height=" 167 "style=" margin:0px;padding:0px;border:0px; "/>

Methods and properties under the prototype object : There may be three main classes under the prototype object: 1 prototype objects with methods and properties   2 constructor   3 _proto_

constructor: Constructor properties, which are the default properties of each function's prototype object, point to the function. Each instantiated object itself has no constructor property, and each instantiated object has a default of only one _proto_, which is used to connect to the prototype object, which is not directly related to the constructor itself. So its constructor is accessed on the prototype object. So when the constructor of the prototype object changes, the constructor of the instantiated object also changes. But if the object itself is both a prototype object and an instantiated object, it has the constructor property and does not inherit from the prototype object.

Take a look at the following example to verify what we say:

650) this.width=650; "src="/img/fz.gif "alt=" Copy Code "style=" Margin:0px;padding:0px;border:none; "/>

. Name = = P1 = Createperson (' haha ' console.log (createperson.prototype.__proto__===object.prototype); Console.log ( Createperson.prototype.__proto__===object); Console.log (Createperson.constructor); Console.log (Createperson.prototype Createperson)

650) this.width=650; "src="/img/fz.gif "alt=" Copy Code "style=" Margin:0px;padding:0px;border:none; "/>

The literal method defines the prototype :

In order to create the code of the object is more convenient, you must have seen this code, is the literal method:

650) this.width=650; "src="/img/fz.gif "alt=" Copy Code "style=" Margin:0px;padding:0px;border:none; "/>

function Aaa () {}aaa.prototype = {showname:function () {alert (10);}}; var a1 = new Aaa (); Console.log (Aaa.prototype);//{showname:function () {},_proto_} You'll find constructor gone, Because this method is equivalent to re-assignment of Aaa.prototype Console.log (Aaa.prototype.constructor),//object because they do not have the constructor attribute, to the superior prototype object to find, Objectconsole.log (A1.constructor) was found, and//object was changed to verify that it was on the prototype object that was accessed.

650) this.width=650; "src="/img/fz.gif "alt=" Copy Code "style=" Margin:0px;padding:0px;border:none; "/>

So we need to fix the point of the prototype when we write it:

650) this.width=650; "src="/img/fz.gif "alt=" Copy Code "style=" Margin:0px;padding:0px;border:none; "/>

function Aaa () {}aaa.prototype = {constructor:aaa, num1:function () {alert (Ten)}} var a1 = new Aaa (); A1.constructor//AAA

650) this.width=650; "src="/img/fz.gif "alt=" Copy Code "style=" Margin:0px;padding:0px;border:none; "/>


JS Object-oriented, create, inherit

Related Article

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.