JavaScript Object-oriented essentials

1. As a function call, refers to the global object

If we define the following functions:

function f () {
Console.log (this);
}

It is then invoked as a normal object, that is, f (), at which point this refers to the Global object window.

2. A method call as an object that refers to the calling object itself

If we use F as an object method, that is, to make the following modifications:

var a = {};
A.F = f;

Then the method F is invoked via object A, that is, A.F (), at which point this refers to caller a.

3. An implied new object used as a constructor function to refer to

If we call the function F with the new statement, that is, new F (), then this refers to the newly created object.

4. How to call and apply

In addition to the above methods, we can optionally specify the reference of this, which is where call and apply play a role. Call and apply are methods that are owned by each function object, and the first argument is the this value to be specified followed by the normal parameter value of the function. The subtle difference is that you see the following example:

function g (name, age) {
THIS.name = name;
This.age = Age
}

var a = {};

G.call (A, ' xiaoming ', 18);
G.apply (A, [' xiaoming ', 18]);

That is, call's non-this parameter can only be listed later, apply to encapsulate them into an array.

To some extent, the previous three function invocation forms are a syntactic candy in call mode:

F () = = f.call (window)
A.F () = = = F.call (a)
New F () = = = var _a = {}; F.call (_a)

Call has a very powerful ability, and we often use the function of borrowing is to use call can dynamically specify this feature. For example, Array.prototype.slice.call (a) can translate object A, which looks like an array, into an actual array object.

var a={length:2,0: ' A ', 1: ' Second '};
Array.prototype.slice.call (a);//["A", "second"]

var a={length:2};
Array.prototype.slice.call (a);//[Undefined, undefined]

The prototype property of the constructor and the __proto__ implicit link of the object

I'm not talking about prototypes and object-oriented patterns based on prototypes here. True, JavaScript is really a prototype object-oriented language, and it's really not an object-oriented language based on class templates. But I'm not going to discuss these two object-oriented patterns here. To be honest, I'm not talking about thinking things. I can only list what I already have in JavaScript, and what this thing can do.

JavaScript does not define a class, but it has the concept of a constructor. This was also mentioned in the discussion of this. For a normal function, it becomes a constructor if invoked in the form of a new statement. Here I give a concrete example:

function person (name, age) {
THIS.name = name;
This.age = age;
}

New person (' xiaoming ', 18); return {name: ' Xiaoming ', age:18}

In general, constructors head uppercase letters. This gives us a striking feeling that prevents us from forgetting to join new. Note that the meaning of new person (name, age) differs from person (name, age). The main difference between them is that the reference to this is different. For the new way, this refers to the implied new object, which is our intention, and for the way we forget new, this refers to the global window object, which is very dangerous when we modify the Window object. This is also the reason why the new statement is not generally recommended for creating objects.

Each object has a mysterious link __proto__, we can call it a prototype (that's what the prototype is, PS: I'm talking nonsense). The purpose of the prototype is to throw the property out of the prototype if it is not found in the current object. Give a specific example:

var a = {};

var proto = {};
proto.b = ' Hello ';

a.__proto__ = Proto;
a.b//=> ' Hello '

(Note: Direct operation __proto__ is by no means the best practice)

Each function has a prototype property. Generally speaking, only this function is meaningful when called as a constructor. If a function is invoked through the new statement, the __proto__ link to the newly created object points to the prototype property of the constructor. The specific examples are as follows:

function F () {
This is the constructor
}

var a = new F ();
a.__proto__ = = F.prototype; => true

This actually gives a kind of JavaScript implementation object-oriented pattern, although this pattern is not the best practice. But if you're careful, it's a good choice.

1. Define the private properties of the object in the constructor:

function person (name, age) {
THIS.name = name;
This.age = age;
}

2. Define the public properties and methods of the object in the prototype of the constructor:

Person.prototype.show = function () {
return this.name + ', ' + this.age;
};

3. Create an object from the new statement:

New person (' xiaoming ', 18);

JavaScript has many inheritance patterns, in the final analysis, either through the prototype chain or by the way the attribute is copied.

prototype chain

Previously, if an attribute is not found in the object, it is thrown into the prototype to continue looking. In fact, the process can be recursive, if still not found in the prototype, it will be thrown into the prototype prototype to continue to find ... Until it is found in a prototype or the chain of the prototype is terminated. This process gives a hint of inheritance, and the process of inheritance is the process of constructing the prototype chain.

If we have a base class person as follows:

function person (name, age) {
THIS.name = name;
This.age = age;
}

Person.prototype.sayHello = function () {
Return ' Hello, ' + this.name;
}

Now you want to create a new student function that inherits from the person function. This means that student objects can invoke methods in the person prototype, such as SayHello, and can define additional methods in their own prototypes.

function Student (name, age, Grade) {
Person.call (this, name, age);
This.grade = grade;
}

Student.prototype = new Person ();
Student.prototype.upgrade = function () {
This.age + 1;
This.grade + 1;
}

In the above example, we defined the constructor student. It implements inheritance through the following steps:

1. First it has its own private attribute name, age, grade. We borrowed the constructor person to initialize the name and age attribute (' Person.call (this, name, age) ') and initialized the student unique property grade.

2. Then ' student.prototype = new Person () ' This step is to implement the magic of inheritance. If we generate a student object, its prototype relationship is as follows (arrows indicate the prototype orientation):

Student ()-> person ()-> Person.prototype

If we generate a Student object, that is, by means of the new Student (), its prototype is the prototype of the constructor Student, where the new person (), and the new person () The archetype is naturally the prototype attribute of person. These are the explanations of the arrow relationship above. Since the prototype chain can finally reach Person.prototype, the student object can invoke the method defined by person on prototype, which is the method that inherits the person.

"JavaScript
var s = new Student ();
S.sayhello (); No problem
```

3. Finally, define a new method upgrade on the student prototype property, the person () object. In addition, prototype in Student can override the same method as person, because on the prototype chain, Student.prototype is higher than person.prototype.

"JavaScript
Student.prototype.sayHello = function () {
Alert (Person.prototype.sayHello.call (this));
}
```

A more classic example is the following, which implements the inheritance chain.

function Shape () {}

function Twodshape () {}

function triangle () {}

Twodshape.prototype = new Shape ();
Triangle.prototype = new Twodshape ();

The prototype chain is: triangle ()-> twodshape ()-> Shape ()-> Shape.prototype

Copy Inheritance

JavaScript as a prototype object-oriented language, the most direct way is to copy the properties of the parent object directly to the child object. This place is inconvenient to start to say, basically is below this appearance.

Forr (name in Person.prototype) {
Student.prototype[name] = Person.prototype[name];
}

the way in the ES5

ES5 the Object object in a new method create, you can implement the inheritance chain. In this way, the above code can be rewritten as:

The original method is: Student.prototype = new person ();
Student.prototype = Object.create (Person.prototype);