JavaScript Object-Oriented programming

1190000002900676

Introduced

Unlike Java, a class-based (Class-base)-oriented programming language, JavaScript has no concept of class, but JavaScript is also an object-oriented language, and this object-oriented approach becomes Object-oriented based on the prototype (prototype-base). Although ES6 has introduced the concept of class as a template, through the keyword "class" can define the class, but the ES6 of this writing can be understood as a syntactic sugar, its most functions, ES5 can do, the new class writing is only to make the object prototype more clear, More like object-oriented programming syntax. If you want to understand the concept of object-oriented implementation based on prototype, then understand three important concepts in JavaScript: constructors (constructor), prototypes (prototype), prototype chains (prototype chain) It is particularly important to help understand the object-oriented thinking based on prototype. Here are some ideas to focus on.

JavaScript Object Structure diagram

Let's take a look at a schematic diagram of a JavaScript object from Mollypages.org, which is illustrated in the following example.

Constructors (constructor) and prototypes (prototype)

Constructors are used to initialize an object, and each constructor has a non-enumerable property, which is the prototype (prototype). Also, each prototype contains a constructor property that contains a non-enumerable property, which always points to the constructor.

function Foo(){}; console.log(Foo.prototype.constructor === Foo); // true

Prototype chain (prototype chain) using new instantiated prototypes

Each object that is instantiated by new will contain a __proto__ property, which is a reference to the constructor prototype .

  function Foo(){};  var foo = new Foo(); console.log(foo.__proto__ === Foo.prototype); // ture

  function Foo(){};  console.log(Foo.prototype.__proto__ === Object.prototype); // true

The reason for this is that Foo.prototype is an object that is pre-created and is an instance of object creation, so foo.prototype.__proto_ is a reference to Object.prototype.

We can look at the context of the prototype chain.

Prototype of a Function object

In JavaScript, a function is a special object, and all functions are instances of the constructor Function .

  function Foo() {};  console.log(Foo.__proto__ === Object.prototype); //false console.log(Fool.__proto__ === Function.prototype); // true

As can be seen from the above, the function foo.__proto_ points to Function.prototype, which indicates that the function Foo is an instance of functions.

function Foo(){}; console.log(Foo.__proto__ === Function.prototype); //true console.log(Foo.prototype.__proto__ === Object.prototype);//true

Foo.prototype is an object that is pre-defined, and the constructor is objects, so __proto__ point toObject.prototype

As we can see from the above figure, these functions, such as Object, function, Array, and their constructors are all instances of function.

Inheritance based on the prototype chain

With this basic knowledge, we can then encapsulate the object based on the prototype chain and implement the JavaScript inheritance. Let's take a look at the following example.

Running the above example, enter the cat init and animal eat to illustrate how cat inherits the Animal.prototype.eat method.

Let's analyze the code.

1. The Eat method is defined in the Animal prototype.
2, the Empty.prototype point to Animal.prototype, so there are methods in Empty.prototype eat .
3, Cat.prototype = = new Empty (), so cat.prototype.__proto_ = = = Animal.__proto_.
4. Re-designate Cat constructor as cat, otherwise cat does not exist constructor.

This completes the inheritance, which is the prototype chain:

In this way, we implement a simple inheritance method using the prototype chain.

JavaScript Object-Oriented programming