Front-end development: object-oriented implementation in object-oriented and JavaScript (ii) constructors and prototypes

Front-end development: object-oriented implementation in object-oriented and JavaScript (ii) constructors and prototypesPreface (digression):

Some people say that procrastination is a terminal disease, alas, it is not good. Not to say that this is a person is more or less, and no matter how much it affects the life, it is only their own thoughts have been limited, the idea can not be like the flat and high-rise buildings built. But the building is also a rotten tail ah, I think the most important thing is the external environment and personal concept of the prerequisites, determine the symptoms of procrastination, there are some people, it also has procrastination, but it in the middle of the drag, think more, see farther. Things are more methodical when they are done, and this procrastination seems to be good.

1. Prototypes:

JavaScript does not provide the traditional object-oriented language (class) inheritance, but through the way the prototype delegate to the object and object inheritance, JavaScript does not have abstract classes and interfaces, it in the implementation of the class or design patterns, The prototype pattern provides a similar approach. A prototype is a pattern used to create an object, which can be understood as: "One object inherits the properties and methods of another object, so it can be said that the object being inherited is the prototype of this object", or more specifically, that object A is a method of referencing the properties of object B, then it can be said that B is a prototype; chestnuts:

/*Cloning Objects*/functionconcat (obj) {if(objinstanceofObject) {        if(object.create!=undefined) {returnobject.create (obj); new Object.create () method in//HTML5 specification }Else{            varF =function() {} F.prototype=obj; return NewF (); }    }Else{        return-1; }}varA ={"Name": "Zhangtaifeng",    "Age": "21"}varDconcat (A);/************* Object B is a prototype of A*************/b.job= "Qianduankaifa"; alert (b.name);

In the preceding code, object B clones an object A () through the Concat method, where object A is the prototype object of object B, and finally b.job = "Qianduankaifa"; The default method of the B object We analyze the results of the console printing:

The new Object.create () method in the HTML5 specification, which points a reference to a object to the __proto__ property of the B object,__proto__ The prototype object's representation in JavaScript, As you can see in the Firefox console, every function we create has a prototype prototype attribute, and the purpose of this object is to contain all the
Properties and methods for instance sharing

The above paragraph is not easy to understand, simply put, all the objects in JavaScript have a prototype prototype property, which is used to save multiple object sharing property methods.
A small example: we used to charge the power strip, you put the phone through the charger connected to the past, start charging, then this time, if we think of the phone as an object, it can be said that the plug -In is the phone's charging prototype. The cell phone gets the properties of the board----the current; The charger is their middle pointer, the connecting pointer. At this time the phone can still do other things.
In fact, the default prototype property for each object is inherited from the Obejct object clone, so you can say that object B's prototype is object;

var A = {    "name": "Zhangtaifeng",    "age": "}console.log"(a.__proto__= = =)　　Object.prototype); True

This code finally returns True, stating that all JavaScript objects inherit the Object.prototype by default, so objects can invoke the action method provided by object;

2. Constructors:

A constructor is a method of creating an object, created in the form of a new FN (), which can be considered a class, but it is not a class, but a function constructor, and JavaScript functions can be called either as normal functions or as constructors. When a function is called with the new operator, the function is a constructor that returns a new object by default, the process of creating an object with the new operator, and, in fact, the process of cloning a Object.prototype object and doing some other work.

var function () {    this. Name = "Zhangtaifeng";    }  var New　　　　Parse (); At this point, the parse () is called by the new operator, so the parse is a constructor alert (parse01.name)//zhangtaifeng

The first letter of the constructor name is capitalized, and we print PARSE01 to see its results:

As with the object above, it actually creates an object and assigns a value to the PARSE01.

The constructor can directly set the properties of his prototype object:

var function () {    this. Name = "Zhangtaifeng";    }      = {        "age": "$"    }varnew  Parse (); alert (parse01.age)

At this point we print the results again:

We can understand that each object has a prototype prototype attribute, and the function of the constructor is to create an object, except that it can display the properties of the prototype set through Parse.prototype at this time, Parse the prototype is Parse.prototype this object.

Front-end development: object-oriented implementation in object-oriented and JavaScript (ii) constructors and prototypes