JavaScript prototypes and the prototype chain

Prototype chain is the basis of js object-oriented, very important.

First, there are several ways to create objects:

1, literal

var o1 = {
    name:'o1'
};

2. Constructor

var M = function(name){
    this.name = name;
};
var o2 = new M ('o2');

var a = {} is actually syntactic sugar for var a = new Object(), the former is recommended

var a = [] is actually syntactic sugar for var a = new Array(), the former is recommended

function Foo(){} is actually syntactic sugar for var Foo = new Function(), the former is recommended

 

3, Object.create (The Object.create() method creates a new object, using the existing object to provide the __proto__ of the newly created object. )

var P = {name:'o3'};
var o3 = Object.create(P);

 Second, the prototype chain

JavaScript stipulates that all objects have their own prototype object (prototype). On the one hand, any object can act as the prototype of other objects; on the other hand, since the prototype object is also an object, it also has its own prototype. Thus, a "prototype chain" is formed: object to prototype, to prototype's prototype...

So, does the Object.prototype object have its prototype? The answer is that the prototype of Object.prototype is null. null does not have any properties and methods, nor does it have its own prototype. So the end of the prototype chain is null.

 Object.getPrototypeOf(Object.prototype) //null

Object.prototype === Object.getPrototypeOf( {} ); //true

5 Prototype Rules

1. All reference types (arrays, objects, functions) have object characteristics, which can be freely extended

2. All reference types (arrays, objects, functions) have a __proto__ property (implicit prototype), and the property value is an ordinary object

3. All functions have a prototype property (explicit prototype), and the property value is also an ordinary object

4. All reference types (arrays, objects, functions) __proto__ attribute values ​​point to the prototype attribute value of its constructor

5. When trying to get a property of a reference type (array, object, function), if the reference type itself does not have this property, it will go to its __proto__ (that is, the prototype of its constructor) to find

see the picture below

 

Third, the instanceof principle

Determine if a function is a constructor of a variable

How it works: To determine whether the __proto__ property of the instance object and the prototype of the constructor have the same address, as long as the constructor on the prototype chain, instanceof will consider it as the constructor of the instance. As shown in the figure:

    // Determine whether the proto property of the instance object and the prototype of the constructor are the same address 
    // As long as the constructor on the prototype chain is considered to be the instance's constructor by instanceof 
    var M = function (name) { this .name = name ; };
     var o2 = new M('o2' );
    o2.__proto__ === M.prototype //true
    M.prototype.__proto__ === Object.prototype //true
    o2.__proto__.__proto__ === Object.prototype //true

    o2 instanceof M //true
    o2 instanceof Object //true

    // Use the constructor property to judge more rigorously 
    o2.__proto__.constructor === M // true 
    o2.__proto__.constructor === Object // false

Fourth, the working principle of the new operator

    // new operator and the working principle behind new followed by constructor 
    // 1, a new object is created, which inherits from func.prototype (the prototype object of the constructor) 
    // 2, the constructor func is executed, when executed, The corresponding parameter will be passed in, and the context (this) will be designated as this new instance 
    // 3, if the constructor returns an "object", then this object will replace the result of the entire new, if the constructor does not Return the object, then the result of new is the object created in step 1 
    var new2 = function (func) {
         var o = Object.create(func.prototype);
         var k = func.call(o);
         if ( typeof k == = 'object' && k != null ) {
             return k;
        } else {
            return o;
        }
    };

 5. Examples of Prototype Chain Inheritance

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>proto</title>
</head>

<body>
    <div id="div1">123</div>
    <script>
    // 封装DOM查询
    function Elem(id) {
        this.elem = document.getElementById(id);
    }

    Elem.prototype.html = function(val) {
        var elem = this.elem;
        if (val) {
            elem.innerHTML = val;
             return  this ; // convenient for chaining operations 
        } else {
             return elem.innerHTML;
        }
    }

    Elem.prototype.on = function(type, fn) {
        var elem = this.elem;
        elem.addEventListener(type, fn);
        return  this ; // convenient for chaining operations 
    }

    var div1 = new Elem('div1');
    console.log(div1.html());
    div1.html('<p>234p</p>').on('click', function() {
        alert('1');
    }).html('<p>js</p>');
    </script>
</body>

</html>