Shulou(Shulou.com)06/01 Report--

1 create an object-oriented

Var obj = new Object (); / / create an empty object obj.name = '';obj.showName = function () {alert (obj.name);} obj.showName ()

Disadvantages: when we want to create multiple object-oriented, we repeat too much code and need to encapsulate, so we have the following method

2 factory mode

Function CreatePerson (name) {/ / Raw material var obj = new Object (); / / processing obj.name = name; obj.showName = function () {alert (this.name);} / / ex-factory return obj;} var p1 = CreatePerson (''); p1.showName (); var p2 = CreatePerson (' hehe'); p2.showName ()

This is actually a simple encapsulation function, and the whole process is like the assembly line of a factory, so it's called a factory way.

Cons: unable to recognize the type of object created. Because they are all Object, there is no distinction, unlike Date, Array, and so on, so there is a constructor pattern.

3 Constructor model

We need to change it in these two aspects: 1 the first letter of the function name is capitalized, and 2 the New keyword calls

Function CreatePerson (name) {this.name = name; this.showName = function () {alert (this.name);}} var p1 = new CreatePerson (''); p1.showName (); var p2 = new CreatePerson (' hehe'); p2.showName ()

The capitalization of the first letter is to distinguish it from an ordinary function. The constructor itself is an ordinary function, but we specifically use it to achieve the function of the construction, so we have a special name called the constructor. Any function can become a constructor, depending on how you call the function. Whether New is used.

2 use the New keyword when calling the function, so what does New do? What's the difference between using New or not? Let's look at the following example.

Function CreatePerson (name) {this.name = name; this.showName = function () {alert (this.name);}; console.log (this);} new CreatePerson (''); / / CreatePerson {} CreatePerson (' '); / / window

We will find that when you use New to call a function, the point of this will be different. In fact, New mainly does the following things, but what is written below is only a general behavior, not internal source code.

Function CreatePerson (name) {var res = {}; / declare that the _ proto_ property of an empty object res res._proto_= CreatePerson.prototype;// points to the prototype object of the constructor, so that res can call all methods CreatePerson.apply (res) under the CreatePerson prototype object; / / change the this point to the res object this.name = name / / res object add property, method this.showName = function () {alert (this.name);}; return res;// returns this object}

With regard to the internal behavior of New, you can't see it, but it does exist. You can roughly know the conclusion about the above prototype, and the following will say the prototype, and then you'll understand.

Problems with the function construction pattern:

Alert (p1.showName==p2.showName); / / false

Test this code, the two methods are not the same, that is to say, the two objects do not share the same method, each new, the system will create a new memory, these two objects have their own territory, but they have the same function, do not share, certainly not what we want. So there's the next method, prototype + construction pattern.

4 prototype + construction mode

Each function has a prototype property, which is an object, also known as a prototype object, on which we can write methods and properties (but the prototype object not only has the properties and methods we wrote, but also, as described below), and the instance objects created by this function can share the methods and properties under the prototype object. So we just need to put the things we want to share under the prototype of the function, and create the things we don't want to share through the constructor.

Look at a chestnut (prototype + construction)

Function CreatePerson (name) {this.name = name;} CreatePerson.prototype.showName = function () {alert (this.name);} var p1 = new CreatePerson (''); p1.showName (); var p2 = new CreatePerson (' hehe'); p2.showName (); alert (p1.showName==p2.showName); / / true

Through the test of the last sentence as true, you can see that the method showName () method added under the prototype of the constructor is shared by all objects created by this constructor, that is, they share the same memory, and further, they have a reference relationship, that is, if you change the showName of p1, it will also affect the showName of p2.

So when we construct objects, we usually use a combination of prototype patterns and construction patterns, and the common prototype patterns that change with the same construction patterns, like the chestnut above, properties use constructors. Because generally different object properties are different, the method uses the prototype pattern.

_ proto_ attribute: an instance object created by the same function can share the methods and properties under the prototype of this function, but how does it do that? What comes out here is the _ proto_ attribute, and each instantiated object has a _ proto_ property, which is a pointer to the prototype of the function, that is, the address where it is saved. (the value of any object in JS is stored in heap memory, and the variable we declare is just a pointer, which stores the actual address of the object, so you can find the object with the address.) so generally speaking, every instantiated object has a _ proto_ property, which stores the address of the prototype object of the constructor, through which you can have all the properties and methods under the prototype object. The _ proto_ property is actually the connection between the instantiated object and the prototype object.

Prototype chain: every 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 the instantiated object of the constructor function, and the prototype object of function is the instance object of Object. So fun has a _ proto_ property to access the function prototype object, the function prototype object is also an instance object, and there is also a _ proto_ property that can access the Object prototype object, so a prototype chain is formed through the _ proto_ attribute. Each instantiated object has access to the methods and properties above the chain, so fun can access the methods and properties under the Object prototype object. Virtually all objects can access the prototype object of Object.

The access rules of the prototype chain: first look under yourself, and then go to the prototype chain level by level. As follows:

Function Aaa () {} Aaa.prototype.num = 3 / new Aaa A1 = new Aaa (); a1.num = 10 / 10 (a1.num); / / 10

Methods and properties under the prototype object: there may be three categories under the prototype object: 1 the methods and properties of the prototype object 2 constructor 3 _ proto_

Constructor: constructor properties. The prototype object of each function has a default property that points to the function. Each instantiated object itself has no constructor attribute, and by default there is only one _ proto_, under each instantiated object to connect to the prototype object, which is not directly related to the constructor itself. So its constructor is on the access prototype object. So when the constructor of the prototype object changes, so does the constructor of the instantiated object. But if the object itself is both a prototype object and an instantiated object, you have the constructor property and do not need to inherit from the prototype object.

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

Name = = p1 = CreatePerson (''console.log (CreatePerson.prototype.__proto__===Object.prototype); console.log (CreatePerson.prototype.__proto__===Object); console.log (CreatePerson.constructor); console.log (CreatePerson.prototype CreatePerson))

The literal method defines the prototype:

To make it easier to create code for objects, you must have seen such code, which is literal:

Function Aaa () {} Aaa.prototype = {showName:function () {alert (10);}}; var A1 = new Aaa (); console.log (Aaa.prototype); / / {showName:function () {}, _ proto_} you will find that constructor is missing, because this is equivalent to re-assigning Aaa.prototype console.log (Aaa.prototype.constructor) / / Object, because it has no constructor attribute, goes to the parent prototype object and finds Objectconsole.log (a1.constructor); / / Object has also changed, verifying that it is on the accessed prototype object

So when we write, we need to correct the direction of the prototype:

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

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.