(As contemporary college students, the title is to be enough SAO to cheat the click, light spray..) Let’s start driving.

In typical OOP languages (such as Java), there are instances of classes. Classes are templates for objects, and objects are instances of classes. However, before ES6, JS did not introduce the concept of classes.

1. Constructor

You can create an object in the following three ways:

(1) Use new Object ()

var obj1=new Object()
Copy the code

(2) Use object literals

var obj2={}
Copy the code

(3) Use the Constructor function

function Star(name,age){ this.name=name, this.age=age, This. Play =function(){console.log(' I am playing tennis ')} var James=new Star(' I am playing tennis', 37);Copy the code

When creating objects using constructors, note two things:

A. When constructors are used to create objects, the function name is capitalized

B. Constructors have to be used with new to make sense

Is not to see here feel my nonsense a bit more…. Do you know what New does when it executes?

When executed, new does four things:

1. Create an empty object in memory

2. Make this point to the new object

3. Execute the code inside the constructor to add properties and methods to the new object

4. Return this new object (so no return in constructor)

Member 2.

Static member: A member added to a constructor that can only be accessed by the constructor itself.

Function Star(name,age){this.name=name, this.age=age, this.play=function(){console.log(' I play the game ')Copy the code

}

Sex =' male 'console.log(star.sex)// male console.log(james.sex)//undefinedCopy the code

Instance member: A member of the object created (this added) inside the constructor that can only be accessed by the instantiating object.

Var James=new Star(' James', 37);Copy the code

Here name,age,play are instance members

Console. log(james.name)// James console.log(star.name)//undefinedCopy the code

Instance members cannot be accessed through constructors

Constructor prototype

Constructors The functions assigned by stereotypes are shared by all objects.

JavaScript states that each constructor has a Prototype property that points to another object. Note that Prototype is an object whose properties and methods are all owned by the constructor.

Function Star(name,age){this.name=name, this.age=age, this.play=function(){console.log(' I am a hero ')} console.dir(Star)Copy the code

You can see that Prototype is an object. What does prototype do? If I instantiate a new object using new Star(), the new object will also have a paly method. Since functions are complex data types, the new object will have a paly method. Then memory will have space to store the function again, which will cause memory waste.

3. Object prototype __proto__

All objects have a __proto__ attribute that points to the constructor’s Prototype object. Objects can use properties and methods on the constructor’s Prototype object because of the __proto__ attribute.

function Star(name, age) { this.name = name, this.age = age, This. Play = function() {console.log(' I play a game ')}} var James = new Star(' I play a game ', 37); console.log(James)Copy the code

We can see that __proto__ is an object that points to the prototype object of the constructor Star.

console.log(James.__proto__==Star.prototype) //true

consloe.log(James.play) // f

Method search principles:

If there is a play method, execute it. If there is no play method, execute it. If there is no play method, execute it.

Here I feel they are a love triangle……

  • The __proto__ object prototype and prototype object prototype are equivalent proto
  • The purpose of object prototype is to provide a direction, or a route, for the object lookup mechanism, but it is a non-standard attribute, so in actual development, this attribute can not be used, it is only internal reference to the prototype object prototype
  • Both proto and prototype objects have a constructor property. Constructor is called a constructor because it refers to the constructor itself. Constructor is mainly used to record the object | for which the constructor, it can make a prototype object to the structure of the original function.

The relationship between constructors, instances, and prototype objects:

It’s obviously a complicated love triangle hahaha

4. The prototype chain

function Star(name, age) { this.name = name, this.age = age, This. Play = function() {console.log(' I play a game ')}} var James = new Star(' I play a game ', 37); console.log(Star.prototype.__proto__===Object.prototype) //true console.log(Object.prototype.__proto__) //nullCopy the code
  • The __ proto__ prototype inside the Star prototype Object points to Object. prototype

5. JavaScript member lookup mechanism (Rules)

① When accessing properties (including methods) of an object, first check whether the object itself has the properties.

② If not, find its prototype (i.e. the prototype object pointed to by _ proto).

③ If not, find the prototype of the prototype Object.

④ And so on until Object is found (null).

6. The this pointer to the prototype object

function Star(name, age) { this.name = name, this.age = age } Var that; Star.prototype. Play = function() {console.log(' I am a prototype ') that = this} var James = new Star(' I am a prototype '); console.log(that === James); //trueCopy the code
  • Inside the constructor, this refers to the object instance James
  • This inside the prototype object function refers to the instance object James

So it’s all pointing to instance objects!

Complement (archetypal inheritance)

1. Method 1 this method is the most commonly used and has good security. Let’s define two objects

The code is as follows: 
function Animal(name) {  
  this.name = name;
}
function Dog(age) {  
  this.age = age;
}
var dog = new Dog(2);
Copy the code

To construct inheritance, it is simple to point the prototype of the child object to the instance of the parent object (note the instance, not the object)

Dog.prototype = new Animal("wangwang");
Copy the code

At this point, dog will have two attributes, name and age. If you use the instanceof operator for dog

console.log(dog instanceof Animal); // true
console.log(dog instanceof Dog); // false
Copy the code

This implements inheritance, but there is a small problem

console.log(Dog.prototype.constructor === Animal); // true
console.log(Dog.prototype.constructor === Dog); // false
Copy the code

We can see that the object the constructor points to has changed so that it is not suitable for our purposes, and we can’t tell who our new instance belongs to. So, we can add a line of code

Dog.prototype.constructor = Dog;
Copy the code

console.log(dog instanceof Animal); // false
console.log(dog instanceof Dog); // true
Copy the code

This approach is part of the maintenance of the prototype chain, as described below.

This method has its advantages as well as disadvantages, but the disadvantages outweigh the advantages. Look at the code

function Animal(name) { 
   this.name = name;
}
Animal.prototype.setName = function(name) { 
   this.name = name;
}
function Dog(age) {  
   this.age = age;
}
Dog.prototype = Animal.prototype;
Copy the code

This implements a copy of Prototype.

The advantage of this approach is that you don’t need to instantiate objects (as compared to the method), saving resources. Constructor points to the parent object and only copies the properties and methods that the parent declared in Prototype. In this code, the name property of the Animal object is not copied, but the setName method is. Crucially, any changes to the prototype of the child object will affect the prototype of the parent object, i.e. the declared instances of both objects will be affected. Therefore, this method is not recommended.

Prototype chain

Anyone who has written about inheritance knows that there can be multiple levels of inheritance. In JS, this forms the prototype chain. A prototype chain has been mentioned many times before, so what is a prototype chain? An instance, at a minimum, should have a Proto attribute pointing to the prototype, which is the basis of the object system in JavaScript. This property is not visible, however, and we call it the “inner prototype chain” to distinguish it from the “constructor prototype chain” made up of the constructor’s prototypes. Let’s construct a simple inheritance relationship using the above code:

function Animal(name) { 
   this.name = name;
}
function Dog(age) { 
   this.age = age;
}
var animal = new Animal("wangwang");
Dog.prototype = animal;
var dog = new Dog(2);
Copy the code

As a reminder, all objects inherit from empty objects. So, we built a prototype chain.

Conclusion:

So now you understand the relationship between constructors, object instances, and prototype objects? Prototype and prototype chain is inevitable in JS need to encounter knowledge points, so don’t panic, do it!