Javascript-Object-oriented

Everything Objects (づ￣3￣) づ╭?~

Basic object-oriented concepts: classes and instances. JavaScript classification and instances, through the prototype to achieve object-oriented.

1. Class---> Prototype objects

JavaScript is a literal-translation scripting language, a dynamic type, a weak type, a prototype-based language, and a built-in support type. This dynamic language means that a program can change its structure at run time: New functions can be introduced, existing functions can be deleted, and so on, structural changes.

The class implementation is not provided by itself (the Class keyword is introduced in es2015/es6, but only the syntax sugar, JavaScript is still prototype-based).

First of all, I know:

Man--Little Red

Animal--Dog

....

A class is an object's type template, which aggregates all commonalities and is abstract. So how do we create a specific object? Here's a process:

(1) based on {...} Object

var people= {    ' Little Red ',    1.6,    function  () {        Console.log (this. Name + ' are running ... ');}    }

Here I define a person named Xiao Hong, her famous, tall and running characteristics. These traits are all people have. We can inherit her character, the previous one said JS is the prototype to achieve object-oriented.

So, based on people, we're going to create a person called a small strong:

var xiaoqiang= {

Name: ' Xiao Qiang '

}

Xiaoqiang.__proto__=people; (in fact, do not use obj.__proto__ to change the prototype of an object, low version IE can not use __proto__)

The prototype of the Xiaoqiang point to the object people, according to the idea of the prototype chain, Xiaoqiang.height and Xiaoqiang.run in the Xiaoqiang can not find, find the upper-level prototype, so the realization of a "succession."

JavaScript does not have a class concept. All objects are instances. An inheritance relationship is a prototype of an object pointing to another object.

(2) Object.create ()

This method can pass in a prototype object and create a new object based on that prototype. The encapsulation functions above are:

function createpeople (name) {  //  var p = object.create (people);       // and update the specific characteristics of this person by the value passed in  P.name = name;     return p;} var xiaoqiang=createpeople (' Xiao Qiang ') xiaoqiang.__proto__// 

(3) Constructors

JavaScript sets a prototype for each object that is created, pointing to its prototype object.

Here, let's talk about the prototype chain .

When we access the properties of an object using Obj.xxx, the JavaScript engine looks for the property on the current object, and if it is not found, it is found on its prototype object, and if it is not found, it is traced back to the Object.prototype object, and finally, if it is not found, it can only return undefine D.

Such as:

Arr-->array.prototype-->object.prototype-->null

or the Custom function Func,function.prototype defines the Apply () method, so all functions can call the Apply () method

Func-->function.prototype-->object.prototype-->null

The first two methods create the object, here is the method of creating the object with a constructor, defining the constructor :

function people (name) {  this. Name = name;    this. Run =function  () {    console.log (the. Name + ' is running ... ');   } }

You can see that this is a normal function, I actually just capitalize the first letter.

New people (), which is the constructor, binds this to the newly created object, returns this by default, does not write new, is a normal function, and returns undefined.

var New People (' Xiao Qiang ');

All right, we've created the cockroach! (o?▽?) O

Again, let's look at its prototype chain:

Xiaoqiang-->people.prototype-->object.prototype-->null

Constructor

There is a constructor property on the prototype chain that points to the constructor.

Xiaoqiang.constructor = = = People.prototype.constructor; True

People.prototype.constructor = = = People; True

Object.getprototypeof (xiaoqiang) = = = People.prototype; True

Xiaoqiang instanceof People; True

People has an attribute prototype a prototype object that points to Xiaoqiang. Xiaoqiang This object does not have a prototype property.

As mentioned earlier , an inheritance relationship is one object's prototype pointing to another object. So

Improved method:

The previous Run method, written in the constructor function. New creates multiple objects, and multiple objects have their own run function, which is to share the same function, that is, to put the method into the prototype.

　　

people.prototype.run=function() { console.log (this.name + ' is running ... ');

}

Finally, a function that instantiates an object is encapsulated:

function createpeople (props) {    returnnew people (props | |  {})}

2. Inheritance

The traditional class inheritance should be to extend an existing class to generate a new class. But JavaScript does not exist the class type, is inherits by the prototype (￣.￣), how to do?

The idea is to extend the primarypeople based on people, then define this constructor:

function primarypeople (props) {    People.call (this, props);     this. Age=props.age | | 1;}

This time the prototype chain is:

New Primarypeople-->primarypeople.prototype-->object.prototype-->null

This prototype chain is wrong Ah, should inherit people, with an empty function f for bridging, encapsulated as:

function inherits (Child, Parent) {    varfunction  () {};     = Parent.prototype;     New F ();     = Child ;}

3. Class

The above inheritance is quite puzzling, in ES6 began to introduce the keyword class into JavaScript!

Write the class to write like this:

class people{    Constructor (name) {        this. Name= name;    }         Run () {       Console.log (this. Name + ' is running ... ');}    } 

Create is the same

var xiaoqiang=new people (' Xiao Qiang ');

Inheritance is implemented directly through extends:

class primarypeople{    Constructor (name, age) {        // use Super to call the constructor method of the parent class         super ( name);         this. Age = Age ;    }         Newfunc () {          }}

If the ES6 class is not supported, use the tool Babel to convert the class code to the traditional prototype code

Learn more about the official website of Uglio Xuefeng and MDN, thank you very much.

Javascript-Object-oriented