Let's learn about JavaScript object-oriented

JavaScript prototype chain
Object prototype

Top-level prototype
Create a memory map of the Object object

Object is the parent class of all classes

Prototype chain to achieve inheritance

Inheritance through constructor

Summarize

JavaScript prototype chain

Every object has a prototype that points to another object. The other object also has its own prototype. The chain composed of prototypes of prototypes is called a prototype chain.

The end of the prototype chain

If a prototype chain is endless, then when searching for a property that does not exist on the prototype chain, the search will continue, resulting in an infinite loop. Obviously this is not the case, so what is the end of the prototype chain?

Object prototype

Top-level prototype

Look at the code~

// The obj literal creation method is similar to new Object()
// Then the obj object is an instance of Object, that is, obj.__proto__ === Object.prototype
var obj = {
  name: "fzb",
};
// So what is obj.__proto__ or Oject.prototype's __proto__? The answer is: null
console.log(obj.__proto__); // [Object: null prototype] {}
console.log(obj.__proto__.__proto__); // null

Special features of [Object: null prototype] {} :

1. The object has a prototype property, but the prototype points to null , which means it is already the top-level prototype .

2. There are many other methods on this object, but they are not enumerable and cannot be seen.

Create a memory map of the Object object

Memory graph for the example above

Object is the parent class of all classes

The prototype object at the top of the prototype chain is the prototype object of Object

example:

function Student(sno, name) {
  this.sno = sno;
  this.name = name;
}
const stu = new Student(201801, "fzb");

console.log(stu); // Student { sno: 201801, name: 'fzb' }
console.log(stu.__proto__); // {}
console.log(stu.__proto__.__proto__); // [Object: null prototype] {}

console.log(Student.__proto__); // {}
/* ***************The comment content will be explained in detail later***************
 * Why not Student.__proto__ = [Object: null prototype] {}
 * Because Student.__proto__ = Function.prototype 
 * Function.prototype.__proto__ = Object.prototype = [Object: null prototype] {}
 * ***************The annotation content will be explained in detail later***************
 */
console.log(Student.__proto__.__proto__); // [Object: null prototype] {}

Memory map:

Prototype chain to achieve inheritance

Inheritance allows code to be reused, and subclasses can use

example:

function Person() {
  this.name = "fzb";
}

Person.prototype.running = function () {
  console.log(this.name + "Running~");
};

function Student(sno) {
  this.sno = sno;
}
Student.prototype = new Person();
// After rewriting the entire prototype object, reconfigure the constructor
Object.defineProperty(Student.prototype, "constructor", {
  configurable: true,
  enumerable: false,
  writable: true,
  value: Student,
});
Student.prototype.studying = function () {
  console.log(this.name + "Learning");
};

const stu = new Student(201801);
stu.running(); // fzb is running~
stu.studying(); // fzb is studying

Memory map:

defect

1> When printing subclass objects, some attributes should be printed, but because they are on the parent class, they cannot be printed.

2> When multiple subclass objects perform certain operations, they will affect each other.

// Add a little bit of code to the example above.
function Person() {
  this.name = "fzb";
  this.friends = []; // Add an attribute}
const stu1 = new Student(201801);
stu1.friends.push("zzw");
const stu2 = new Student(201801);
console.log(stu2.friends); // [ 'zzw' ]
// stu2 gets the friends attribute of stu1, which is not allowed

3> Parameters cannot be passed. Some properties exist in the parent class constructor. When the subclass is instantiated, the initialization parameters cannot be passed to the parent class.

Inheritance through constructor

Inside the subclass constructor, call the constructor. Change the this pointer in the parent class constructor, and then the properties added by the parent class to this will be on the object instantiated by the subclass.

function Person(name) {
  this.name = name;
  this.friends = [];
}

Person.prototype.running = function () {
  console.log(this.name + "Running~");
};

function Student(sno, name) {
  Person.call(this, name); // Add code this.sno = sno;
}
Student.prototype = new Person();
// After rewriting the entire prototype object, reconfigure the constructor
Object.defineProperty(Student.prototype, "constructor", {
  configurable: true,
  enumerable: false,
  writable: true,
  value: Student,
});
Student.prototype.studying = function () {
  console.log(this.name + "Learning");
};

const stu1 = new Student(201801,"stu1");
stu1.friends.push("zzw");
const stu2 = new Student(201802,"stu2");
console.log(stu2.friends); // []

At this time, the three disadvantages of prototype chain inheritance are solved. But new defects emerged.

defect

1> The parent class constructor is executed at least twice

2> The prototype object of the subclass constructor is the instance object of the parent class, so the properties on the object will be undefined

Summarize

This article ends here. I hope it can be helpful to you. I also hope that you can pay more attention to more content on 123WORDPRESS.COM!

You may also be interested in:

Detailed explanation of JavaScript object-oriented practice: encapsulation and dragging objects
Detailed explanation of JavaScript object-oriented programming [class creation, instance objects, constructors, prototypes, etc.]
Detailed examples of the seven basic principles of JavaScript object-oriented
JS Object-Oriented Programming Basics (Part 3) Detailed Example of Inheritance Operation
JS Object-Oriented Programming Basics (Part 2) Detailed Explanation of Encapsulation Operation Examples
JS Object-Oriented Programming Basics (I) Detailed Explanation of Objects and Constructor Instances

<<: Memcached method for building cache server

>>: CentOS7.5 installation tutorial of MySQL