Prototypes and Prototype Chains#

JavaScript has seven basic types: String, Number, Boolean, Null, Undefined, Symbol, Object, the first six are primitive data types, and Object is a reference type. Functions are essentially of the Object type, i.e., an object.

It is worth noting that typeof (null) will return Object, this is because if the first three bits of the binary in JS are all 0, it will be considered as an Object type. The binary representation of null is all 0, so naturally the first three bits are also 0, hence when executing typeof, it will return Object, whereas in reality, null is a primitive data type.

Constructor Objects#

Construct a Student class, and instantiate a Student to create the stu instance object.

function Student() {}
var stu = new Student();
stu.name = "Ming";
console.log(stu.name) // Ming

Prototype#

Every function object has a prototype property. The prototype is the prototype of the instance object created by calling the constructor function, and the prototype allows all object instances to share the properties and methods it contains.

function Student() {}
Student.prototype = {
    from: "sdust"
}
var stu1 = new Student();
var stu2 = new Student();

console.log(stu1.from) // sdust
console.log(stu2.from) // sdust

__proto__#

__proto__ is actually used in prototype chain lookup. It always points to prototype, i.e., it points to the prototype object of the constructor function Student. For example, the instantiated stu will use __proto__ to look for methods or properties in Student’s prototype. If stu finds the called method or property, it will not use __proto__ to search the prototype object.

function Student() {}
Student.prototype = {
    from: "sdust"
}
var stu = new Student();


console.log(stu.__proto__ === Student.prototype) // true
console.log(stu.from) // sdust

stu.from = "s";
console.log(stu.from) // s

Constructor#

Each prototype has a constructor property that points to the associated constructor function Student, and the instance's constructor points to the constructor function Student.

function Student() {}
var stu = new Student();

console.log(Student.prototype.constructor === Student) // true
console.log(stu.constructor === Student) // true

Prototype Chain#

The prototype chain can be simply understood as connecting the prototypes into a chain, and every time js retrieves an object's property, it performs a search process. If it cannot be found in its own properties, it will then search in the prototype object. If it still cannot be found in the prototype object, it will go to the prototype's prototype for a search, that is, it searches following the prototype chain until it reaches the top of the prototype chain, i.e., the prototype of Object.

function parent() {
    this.parentInfo = "parent";
}

parent.prototype.getParentInfo = function() {
    return this.parentInfo;
};

function child(){
    this.childInfo = "child";
}

parent.prototype.getChildInfo = function() {
    return this.childInfo;
};

child.prototype = new parent();

var instance = new child();

console.log(instance.getChildInfo()); // child
console.log(instance.getParentInfo()); // parent
console.log(instance.parentInfo); // parent
console.log(instance.__proto__ === child.prototype); //true
console.log(instance.__proto__.__proto__ === parent.prototype); //true
console.log(instance.__proto__.__proto__.__proto__ === Object.prototype); //true
console.log(instance.__proto__.__proto__.__proto__.__proto__ === null); //true


// function student(){}
// console.log(student.__proto__ === Function.prototype) // true
// console.log(Function.__proto__ === Function.prototype) // true
// console.log(Object.__proto__ === Function.prototype) // true
// console.log(Object.prototype.__proto__ === null) // true

Daily Question#