1. Introduction

Prototype and prototype chain knowledge has always been the focus of the interview. It is not too difficult to say, but it takes some effort to fully understand. Here’s an interview question to get you started:

function User() {}
User.prototype.sayHello = function() {}
var u1 = new User();
var u2 = new User();
console.log(u1.sayHello === u2.sayHello); 
console.log(User.prototype.constructor); 
console.log(User.prototype === Function.prototype); 
console.log(User.__proto__ === Function.prototype); 
console.log(User.__proto__ === Function.__proto__); 
console.log(u1.__proto__ === u2.__proto__); 
console.log(u1.__proto__ === User.__proto__); 
console.log(Function.__proto__ === Object.__proto__); 
console.log(Function.prototype.__proto__ === Object.prototype.__proto__); 
console.log(Function.prototype.__proto__ === Object.prototype); 
Copy the code

2. Foundation

  1. All JavaScript objects are essentially created through the new function, including the definition of objects in the form of Object literals (the syntactic equivalent of new Object()).

  2. All functions are essentially created with new Function, including Object, Array, and so on

  3. All functions are objects.

3. prototype

Every function has a propertyprototype, it is a prototype, and by default it is a normalObjectObject that is the prototype of the instance created by calling the constructor.

4. Its constructor properties

JavaScript is also points from the prototype to the constructor property: constructor, namely Func. Prototype. The constructor – > Func

5. __proto__

All objects in JavaScript (except null) have a __proto__ attribute that points to the object’s prototype.

function User() {}
var u1 = new User();
// u1.__proto__ -> User.prototype
console.log(u1.__proto__ === User.prototype) // true
Copy the code

Obviously, the __proto__ attribute of an instance points to the constructor’s prototype, so would __proto__ of multiple instances point to the same prototype?

var u2 = new User();
console.log(u1.__proto__ === u2.__proto__) // true
Copy the code

__proto__ of multiple instances refers to the prototype constructor, so instances can inherit if they have a way to access methods, properties, etc.

Let’s update the prototype and prototype chain diagram:

6. The prototype chain

When an instance object is looking for an attribute, if it cannot find it, it will look for the prototype associated with the object along __proto__. If it still cannot find it, it will look for the prototype until it reaches the top layer, which is the concept of prototype chain.

Using the interview questions, here are some examples of prototype chains:

For example, 6.1

  1. u1.sayHello():u1There was nosayHelloMethod, so accessu1.__proto__(User.prototype)“, successfully accessedsayHellomethods
  2. u2.toString() U2, the User. The prototypeAll have notoStringMethod,User.prototypeIt’s also a normal object, so keep lookingUser.prototype.__proto__(Object.prototype)Successfully called totoStringmethods

7. Elevate

After studying the above, you should be able to complete most interview questions, such as the one below

function A() {}
function B(a) {
    this.a = a;
}
function C(a) {
    if (a) {
        this.a = a;
    }
}
A.prototype.a = 1;
B.prototype.a = 1;
C.prototype.a = 1;

console.log(new A().a); / / 1
console.log(new B().a); //undefined
console.log(new C(2).a); / / 2
Copy the code

But there’s something missing from the original interview question, __proto__ === Object.__proto__, function.prototype.__proto__ === object.prototype.__proto__, etc.

7.1 Objcet.__proto__ 、 Object.prototype,Object.prototype.__proto__

  • __proto__ –> Function. Prototype = Function (); prototype = Function ();

  • Object. Prototype is the prototype of the Object constructor, at the top of the prototype chain. Object.prototype.__proto__ has no upper prototype to point to, so its value is null

/ / summary:
Object.__proto__ --> Function.prototype
Object.prototype.__proto__ --> null
Copy the code

7.2 Function.__proto__,Function.prototype,Function.prototype.__proto__

  • Function.prototypeisFunctionIs the prototype of all function instances, such as the one described aboveObject.__proto__
  • Function.prototypeIs an ordinary object, thereforeFunction.prototype.__proto__ --> Object.prototype
  • Function.__proto__: __proto__Points to the prototype of the constructor that created it, who created itFunctionThe?

    • Function.__proto__ refers to Object.prototype. Object.__proto__ –> Function. Prototype. It would be a bit confusing if it did, so I took a test:

    Practice has proved that there is onlyObject.__proto__ --> Function.prototype

    • Function is a monkey jumping out of a crack in the stone. So I ran a messy test and found something.

    Function.proto –> Function.prototype

    Function functions are not created from anything that is added to memory when the JS engine starts

7.3 sublimation

Finally, the prototype and prototype chain knowledge is condensed into a graph:

  1. All functions (includingFunction)__proto__Point to theFunction.prototype
  2. Of a custom object instance__proto__Point to the prototype of the constructor
  3. Function of theprototypethe__proto__Point to theObject.prototype
  4. Object.prototype.__proto__ --> null

8. To summarize

The ocean of knowledge is often more vast than imagined, prototype and prototype chain side has also repeatedly learned many times, I think should learn more comprehensive, more perfect. But after meeting this interview question, I just found that what I learned is just a branch, JS really has a lot of deep treasures waiting to be excavated. The sea of learning is long, and you.

Here’s a simple interview question to boost your confidence:

var F = function () {}
Object.prototype.a = function () {}
Function.prototype.b = function () {}

var f = new F();

console.log(f.a, f.b, F.a, F.b);

// f.__proto__ --> F.prototype --> Object.prototype
// F.__proto__ --> Function.prototype --> Object.prototype
Copy the code

Part of this article source: duyi education learning materials