Section 109th, JavaScript Object-oriented and prototype

JavaScript Object-oriented and prototype

Learning Essentials:

1. Learning conditions

2. Create an Object

3. Prototypes

4. Inheritance

ECMAScript has two development modes: 1. Functional (procedural), 2. Object-oriented (OOP). An object-oriented language has a flag, which is the concept of a class, through which any number of objects with the same properties and methods can be created. However, ECMAScript does not have a class concept, so its objects are also different from those in class-based languages.

A Learning conditions

In the first lesson of the JavaScript video course, it has been stated that JavaScript courses require a lot of foundation. Here, let's explore in more detail:

1.xhtml Basics: JavaScript needs to be used in every aspect.

2. Deduction code Base: For example, the project in xhtml,asp,php course has the process of JS deduction code.

3. Object-oriented basis: JS object-oriented is unorthodox and bizarre, must have Orthodox object-oriented foundation.

4. The above three foundations must be based on the master of the project, but the basic knowledge of learning is not strong enough, it is necessary to master the above Foundation in the project.

Two Creating objects

Create an object, and then give the object new properties and methods.

varbox =NewObject ();//Create an ObjectBox.name ='Lee';//Create a Name property and assign a valueBox.age = -;//Create an Age property and assign a valueBox.run = function () {//Create a run () method and return a value    return  This. Name + This. Age +'running in ...';};                        Alert (Box.run ()); //the value of the output methodalert (box.name);//Output Properties

The above creates an object and creates properties and methods, and this in the Run () method represents the box object itself. This is the most basic way of JavaScript to create objects, but there is a disadvantage to create a similar object, it will produce a lot of code.

varbox =NewObject ();//Create an ObjectBox.name = ' Lee ';//Create a Name property and assign a valueBox.age = 100;//Create an Age property and assign a valueBox.run =function() {//Create a run () method and return a value    return  This. Name + This. Age + ' running ... ';};                        Alert (Box.run ()); //the value of the output methodalert (box.name);//Output PropertiesvarBox2 = box;//get a quote from boxBox2.name = ' Jack ';//changed the Name property directlyAlert (Box2.run ());//using Box.run () to find the name also changedvarBox2 =NewObject (); Box2.name= ' Jack '; Box2.age= 200; Box2.run=function () {    return  This. Name + This. Age + ' running ... ';};                        Alert (Box2.run ()); //this avoids being confused with box, thus maintaining independence

Factory mode Create object "recommended"

To solve the problem of several similar object declarations, we can use a method called Factory mode, which is to solve the problem of instantiating objects that produce a lot of duplication.

functionCreateObject (name, age) {//centralized instantiation of functions    varobj =NewObject ();//Create an ObjectObj.name = name;//Append an attributeObj.age = age;//Append an attributeObj.run =function() {//Append a method        return  This. Name + This. Age + ' running ... ';//The this in the object represents the object itself, the name attribute in the object plus the Age property    }; returnObj//return Object}varBox1 = CreateObject (' Lee ', 100);//First InstancevarBox2 = CreateObject (' Jack ', 200);//a second instancealert (Box1.run ()); alert (Box2.run ()); //remain independent//to construct an instance of different data in the future, you only need to construct an instance to pass in different parameters, thus reducing the number of duplicate code

Factory mode solves the problem of repeating instantiation, but there is one problem, which is to identify the problem, because there is no way to figure out exactly which object they are. So there's the constructor.

Constructor (construct method) Create object "key Recommendation"

Constructors (construction methods) can be used in ECMAScript to create specific objects. The type is in object.

functionBox (name, age) {//constructor mode Create object     This. name = name;//The constructor background automatically creates an object with the new object (), and the This in the body represents the object that comes out of the new object ().      This. Age = Age;//Append properties to an object     This. Run =function() {//Append method to Object        return  This. Name + This. Age + ' running ... '; };}varBox1 =NewBox (' Lee ', 100);//Note: Constructor object serialization must use the new operator, constructor arguments to initialize the object datavarBox2 =NewBox (' Jack ', 200);//constructor parameter initialization of object dataAlert (Box1.run ());//Prints the Run () method under the Box1 object's actual column,Alert (box1instanceofBox);//clearly identified him from the box

The method of using constructors, that is to solve the problem of repeated instantiation, but also solve the problem of object recognition, but the problem is that there is no new object (), why can instantiate box (), where does this come from?

Methods that use constructors, and methods that use Factory mode, they differ as follows:

1. The constructor method does not display the creation object (new object ());

2. Assign properties and methods directly to the This object;

3. There is no Renturn statement.

Constructor methods have some specifications:

1. The function name and instantiation construct name are the same and uppercase, (PS: non-mandatory, but it helps to distinguish between constructors and ordinary functions);

2. Create an object from a constructor, you must use the new operator.

Now that you can create an object from a constructor, where does this object come from and where does new object execute? The following procedures are performed:

1. When the constructor is used and the new constructor (), the new Object () is executed in the background;

2. The scope of the constructor to the new object, which is the object created by new object (), and the This in the body of the function represents the object of new object ().

3. Execute the code within the constructor;

4. Returns the new object (returned directly from the background).

This is about the use of this

For the use of this, this is actually a reference to the current scope object. If this is the global scope, this represents the Window object, and if it is in the constructor body, it represents the object declared by the current constructor. If it is within an object, it represents the current object

var box = 2; alert (this. box);                            // Global, representing window

The only difference between constructors and normal functions is that they are called in different ways. Simply, the constructor is also a function and must be called with the new operator, otherwise it is a normal function.

functionBox (name, age) {//constructor mode Create object     This. name = name;//The constructor background automatically creates an object with the new object (), and the This in the body represents the object that comes out of the new object ().      This. Age = Age;//Append properties to an object     This. Run =function() {//Append method to Object        return  This. Name + This. Age + ' running ... '; };}varBox1 =NewBox (' Lee ', 100);//Note: Constructor object serialization must use the new operator, constructor arguments to initialize the object datavarBox2 =NewBox (' Jack ', 200);//constructor parameter initialization of object dataAlert (Box1.run ());//Prints the Run () method under the Box1 object's actual column,varBox3 =NewBox (' Lee ', 100);//Constructed mode callAlert (Box3.run ());//Prints the Run () method under the Box3 object's actual column,Box (' Lee ', 20);//Normal mode call, invalidvaro =NewObject ();//Create an ObjectBox.call (o, ' Lin Guixiu ', 200);//O Object Impersonating box constructor callAlert (O.run ());//Print the Run () method in the box constructor

The question of methods (or functions) inside a constructor is explored, first to see if the two instantiated properties or methods are equal.

functionBox (name, age) {//constructor mode Create object     This. name = name;//The constructor background automatically creates an object with the new object (), and the This in the body represents the object that comes out of the new object ().      This. Age = Age;//Append properties to an object     This. Run =function() {//Append method to Object        return  This. Name + This. Age + ' running ... '; };}varBox1 =NewBox (' Lee ', 100);//Note: Constructor object serialization must use the new operator, constructor arguments to initialize the object datavarBox2 =NewBox (' Lee ', 100);//constructor parameter initialization of object dataAlert (Box1.name= = Box2.name);//true, the value of the property is equalAlert (Box1.run = = Box2.run);//False, the method is actually a reference addressAlert (box1.run () = = Box2.run ());//true, the value of the method is equal because the argument is consistent

The methods (or functions) in the constructor can be replaced with the new function () method, which results in the same effect, and proves that they are ultimately judged by the reference address, uniqueness.

function Box (name, age) {                //new Function () Uniqueness of this    . name = name;     this. Age = Age ;      This New Function ("return this.name + this.age + ' run ... ');}

We can guarantee the consistency of the reference address by using the method of binding the same function outside the constructor, but it is not necessary to deepen the learning to understand:

function Box (name, age) {    this. Name = name;      this. Age = Age ;     this. Run = run;} function Run () {                        // via outside call to ensure the reference address is consistent    return this this. Age + ' running ... ';}

Although the global function run () is used to solve the problem of ensuring that the reference address is consistent, this approach introduces a new problem, the global this is the box itself when the object is called, and as a normal function call, this also represents window.

three. Prototypes

Each function we create has a prototype (prototype) attribute, which is an object whose purpose is to contain properties and methods that can be shared by all instances of a particular type. This is logically understood: prototype the prototype object of the object that was created by invoking the constructor. The benefits of using prototypes allow all object instances to share the properties and methods that it contains. That is, instead of defining the object information in the constructor, you can add the information directly to the prototype.

Section 109th, JavaScript Object-oriented and prototype