JS Basics (1) - Detailed Explanation of Variables to Prototypes

Variable type Basic data type Boolean String Number undefined Complex data type Object Null Function

The types recognized by the typeof operator are only basic data types and Object Function. The function type is also a reference type. Functions are first-class citizens in JS. 

automatic type conversion 

(1) If one operand value is a boolean value, convert it to a numeric value before comparing
(2) If one operand value is a string and the other operand value is a numeric value, convert the string to a value by the Number() function Value
(3) If one operation value is an object and the other is not, the valueOf() method of the object is called, and the result obtained is compared according to the previous rules
(4) Null and undefined are equal
(5) If an operation value is NaN, the equality comparison returns false
(6) If both operation values ​​are objects, compare whether they point to the same object

======Constructor prototype prototype chain briefly

    <script>
        function Foo (name){
            this.name = name
        }
        Foo.prototype.printName = function(){
            console.log(this.name)
        }
        const f = new Foo('Tom')
        console.log(f.__proto__ === Foo.prototype)
        f.printName()
    </script>

Every constructor has a prototype and the object instantiated by the constructor has a __proto__ property that points to the prototype of the constructor The prototype object pointed to by the instance (implicit prototype) is exactly the same as the prototype pointed to by the constructor (explicit prototype) equal

The prototype is the object shared by all instances, and the __proto__ of the prototype object points to the prototype of the Object constructor. Object.prototype finally points to null. The prototype chain search mechanism followed by the instance of each constructor is bottom-up

At the same time, the function can also be understood as an instance of the constructor Function which is an object and the writing of funciont (){} is the deformation of new Funcion(), then Function also has a prototype prototype object that points to the Function.prototype object -> Object.prototype ->null And each constructor has a name attribute that points to the function name

Similarly, the constructor in the prototype object also points to the name of the constructor. Here, the function is also an object and also has an implicit prototype. In the implicit prototype of the function, the constructor points to the Function. The following diagram of the prototype chain can be drawn by yourself.

In for in traversing the object, it is actually necessary to mask the properties in the prototype

    <script>
    const obj = {
        name:'tom'
    }
        for(let key in obj){
            if(obj.hasOwnProperty(key)){
                console.log(obj[key])
            }
        }
    </script>

Also, as mentioned earlier, typeof cannot judge the specific object type except for functions, so how to judge the array? Here you can use [] instanceof Array. This means to search according to the prototype chain of [].__proto__ to see if there is an Array on this prototype chain. prototype if there is return true

console.log([] instanceof Array)

 

 Next, in the actual application scenario of the prototype object, the design pattern of the jQuery framework is used as an example. The first demonstration example

    <div id="box"></div>
    <script>
        function Elem(id){
            this.ele = document.getElementById(id)
        }
        

        Elem.prototype.html = function(val){
            if(val){
                this.ele.innerHTML = val
                return this
            }
            return this.ele.innerHTML
        }
        Elem.prototype.on = function(type,fn){
            this.ele.addEventListener(type, fn)
        }

    const obj = new Elem('box')
    obj.html('111').on('click',function(){
        console.log(222)
    })
    </script>

The above code uses constructors and prototypes to easily realize chained operations. Let's briefly describe the implementation principle of jQuery and have the opportunity to interpret it in detail.

Similarly, jq also has a DOM selector module. This module is very powerful. Jq is based on this selector module except for utility functions.

    <div id="box"></div>
    <script>
        (function(){
            // First jq releases an interface to the user 
            const $ = function( select ){
                 // returns the instance object of the constructor 
                return  new $.fn.init( select )
            }
            // Change prototype 
            $.fn = $.prototype = {
                 // Create constructor 
                init:function( select ){
                     this .ele = document.getElementById( select )
                },
                // The following is the code of jq

                sayHi:function(){
                    console.log(222)
                }
            }
            $.fn.init.prototype = $.fn
            window.$ = $

        })()

        // Why not directly define a constructor to return an instance? This is a process that jq helps us omit our new and encapsulates an interface for us. At the same time, if we want to change the dom during chain operation, we can use $('').init ('') This is more convenient 
        $( ' box ' ).sayHi()

        
    </script>