Create an object

JavaScript sets a prototype for each object it creates, pointing to its prototype object. When we access an Object property using obj.xxx, the JavaScript engine looks for the property on the current Object. If it doesn’t find it, it looks for the property on its prototype Object. If it doesn’t, it looks back up the Object.prototype Object, and returns undefined if it hasn’t.

  • To create aArrayObject:

Let arr = [1, 2, 3, 4, 5]; Its prototype chain is: Prototype —-> object. prototype —-> null array. prototype defines indexOf(),shift(), So you can call these methods directly on an Array object.

  • Create a function
function f1() {
return 0;
}
Copy the code

Prototype chain of F1 () : Prototype —-> object. prototype —-> null Since function. protype defines call(),apply(), etc., all functions can call these methods. If the prototype chain is long, accessing an object’s properties will take more time to find and become slower.

The constructor

To create an object using the constructor method, first define a constructor:

function Person(name,age) { this.name = name; this.age = age; this.sayName = function() { console.log('Hi,'+this.name); }}Copy the code

We then call the function with the keyword new and return an object.

let Nick = new Person('Nick',23); Nick.sayName(); //'Hi,Nick'Copy the code

With the new keyword, it becomes a constructor, its bound this refers to the newly created object, and returns this by default, meaning you don’t need to return this at the end; . Prototype: Nick –> Person. Prototype –> Object. Prototype –> null: Nick –> Person These objects are all modeled after Nick. In addition, objects created with new Person() also get a constructor property from the prototype, which points to the function Person itself.

Nick.construcotot === Person.prototype.constructor;
Person.prototype.construcor === Person;
Object.getPrototypeOf(Nick) === Person.prototype;
Copy the code

Note that the sayName() function for two new objects, Tom and Jerry, has the same name and code, but is actually two different functions. If you create multiple objects using new Person(), they only need to share one sayName() function. It saves a lot of memory. Modify the code as follows:

function Person(name,age) {
this.name = name;
this.age = age;
}}

Person.prototype.sayName = function() {
	console.log('Hi,'+this.name);
    }
Copy the code

Pay special attention to

  • Object's.__proto__ === constructor. Prototype
  • Object.prototypeIs the direct or indirect prototype of all objects
  • All functions are defined byFunctionThe structure,__proto__ === function.prototype

The class inheritance

ES6 introduced the class keyword, which was introduced to make defining classes easier. If you use the class keyword to write Person:

class Person {
	constructor(name) {
    this.name = name;}
    
sayName() {
	console.log('Hello,' + this.name);
    }
    }
Copy the code

By comparison, we can see that using class contains the constructor and the function sayName() defined on the prototype object (without the function keyword), Person.prototype.sayname = fucntion(){… } code like this.

One of the big benefits of using class is easier inheritance. If you want to derive an otherPerson from Person, you don’t need to worry about the middle object that the prototype inherits, or the constructor of the prototype object, and you can just extend.

class otherPerson extends Person{ constructor(name,city) { super(name); // This. City = city; } myCity() { aler (' I am from ' + this.city); }}Copy the code

OtherPerson is also defined by the class keyword, while extends indicates that the prototype chain object comes from Person. OtherPerson takes two arguments, name City, and calls the parent class constructor with super(name). And otherPerson has automatically acquired the sayName() method of the parent class Person. Class is no different from the original prototype inheritance, just a simplification of the prototype code.