1. Get rid of prototype step by step

preface

  • When I first began to learn JavaScript, I thought it was an “object-oriented language” passively, but all kinds of principles and c++, Java and other typical object-oriented languages are obviously different, “prototype chain”, “class” in es6, all highlight the distinctive object-oriented in js.
  • What exactly is a prototype? How do you implement “classes” in JavaScript?

A picture

Image analysis

This is my summary of a picture that briefly depicts the complex relationship between a prototype and its constructors and instances.

  1. The global Object window attribute Object(for example only) refers to the function Object()
  2. Object contains prototype, which refers to the prototype (the prototype contains all the methods and properties of the Object)
  3. When we declare an instancelet obj = new Object()You can see that it is born with a __proto__ attribute. __prototype andObject.prototypeIt points to the same object. We know that it isThe prototype.

Some think

1. What is the Object. Prototype?

  • We might as well print it out and try it:

    As you might expect, the prototype of an object class is the end of the prototype chain, it is just a normal object, there is no prototype.

2.Object. Prototype constructor What’s the use?

  • You remember we just went like thislet obj = new Object();I’ve created an object instance obj, so if you look at this, you should be able to see what’s going on

3. But you can’t artificially point to a function that constructs the current object.

  • For example, you could name the Object. The prototype. The constructor to who?

    You see, this result is not very heady?Object.prototypeConstructor refers back to Object. In fact, this kind of experiment is meaningless, since we need to know that constructor is provided forThe instanceAttributes used to locate its constructor, rather than for the stereotype itself.

  • And this kind of Object. The prototype. The constructor = = = the phenomenon of the Object, actually is the result of human design. In order for the objects of the instance to inherit constructor from the stereotype, this phenomenon cannot be avoided.

4. Are we trying to get deeper? Take a look at the structure of an array object.

  • Problem 1: Array.prototypeproto= = =?
    • Let’s get straight to the results
    • Why did this happen? Array.prototype is an instance of an Object(). Array.prototype is an instance of an Object(). In other words array. prototype and OBj are essentially the same!
  • Problem 2: let arr=[1,2,3];

    How does the method hasOwnProperty that belongs to an object work on an array instance?

    1. The arR looks for the hasOwnProperty method on its own and finds none.
    2. __proto__ (Array. Prototype) : hasOwnProperty = =
    3. Arr then looks in his grandfather arr.proto.__proto__ (Object. Prototype) and finds this method. Arr calls it.

prototype vs class

Code comparison

/ / prototype methodfunction Person( name, age) {
        this.name = name,
        this.age = age
}
Person.prototype.sayHi = function() {
    console.log('Hello, my name is.'+this.name); } Person{constructor(name,age){this.name = name; this.age = age; }sayHi() {
        console.log('Hello, my name is.'+this.name); }}Copy the code

experience

  • Class is just syntactic sugar for the Prototype method, essentially the same
  • Understand prototype => Proficient in prototype => No pressure to use class