js advanced syntax

What is the instance

Instances: instance objects
Types: type objects

  function Person(name, age) {
            this.name = name;
            this.age = age;
        }

        var p = new Person("dage", 12); //The first letter of the class name of the constructor on the writing method of the instance object created according to the type is capitalized


        Person("jack", 12); //This is a function. This is not recommended
        // console.log(typeof p);

The difference between undefined and null

undefined defines that there is no copy, for example: var a;
Null is defined and assigned, but the assignment is null

When is a variable assigned null

Before assigning a value to the object, the value related to the object is not ready. First set a null value to the object (indicating that it will be assigned to the object)

var b = null;
console.log(typeof b);
At this time, it is printed as Object, but null is the basic data type

Assign null to the object before the end to facilitate garbage collection by the garbage collector

Type of variable (distinguished by the type of variable memory value)

Basic type: data of basic type is saved
Reference type: saves the address value

Memory classification

Stack: saves global or local variables
Heaps: saving objects

js how to call (execute function)

Special place: test.call/apply(obj) is equivalent to obj.test() temporarily making test () a method of obj object
However, you cannot directly obj.test(), because the obj object originally had no test () method

        var p = {
            "name": "Tom",
            age: 998,
            setName: function(name) {
                this.name = name;
            },
            setAge: function(age) {
                this.age = age;
            }
        };
        console.log(p.name, p["age"]);

        p.setName("Brother Zhou");
        p["content-type"] = "hah";
        console.log(p["name"]);


        function test() {
            this.ceshi = "Function call test";
        };

        // test.call(p);
        test.apply(p);
        console.log(p.ceshi);

Callback function

  1. You defined
  2. You didn't call
  3. But it was finally implemented

Common callback functions: dom callback function (mouse click event), timer callback function, ajax request callback function, life cycle callback function

Execute function expression immediately

It can be used to write modules later

        (function() {
            // Anonymous function self call
            console.log("Execute function expression immediately");
        })();


        (function() {
            var a = 1;

            function test() {
                console.log(++a);
            };
            // Expose a global function
            window.$ = function() {
                return {
                    test: test
                };
            }
        })();

        $().test();
        // $is a function $() that returns an object after execution because {} prints 2

What is this

  1. Any function is essentially called through an object. If it is not specified directly, it is window
  2. All functions have a variable this inside
  3. Its value is the current object of the calling function

How to determine the value of this

           caller 

test() window
p.test() p
new test() creates a new object
p.call(obj) obj

The prototype property of the function

Each function has a prototype attribute, which points to an empty Object (prototype Object) by default
The prototype object has a property constructor, which points to the function object
Add properties (usually methods) to the prototype object: all instance objects of the function automatically own the properties (Methods) in the prototype


        function Fun() {

        }
        console.log(Date.prototype, typeof Date.prototype);
        console.log(Fun.prototype); //By default, it points to an empty Object (without our custom properties)


        // The prototype object has a property constructor, which points to the function object
        console.log(Date.prototype.constructor === Date, Fun.prototype.constructor === Fun);

        // Add properties (usually methods) to the prototype object, and the instance object can access them
        Fun.prototype.test = function() {
            console.log("The method added to the prototype object is executed");
        }

        Fun.prototype.test();
        fun = new Fun();
        fun.test();

        function Fn() { //Equivalent to the internal statement this.prototype = {}

        }
        //1. Each function has a prototype, that is, the prototype attribute is displayed. By default, it points to an empty Object object
        console.log(Fn.prototype);

        // 2. Each instance object has one__ proto__, It can be called implicit prototype
        var fn = new Fn(); //This is equivalent to the internal statement this__ proto__ =  Fn.prototype
        console.log(fn.__proto__);

        // 3. The value of the implicit prototype of the object is the value of the display prototype of the object constructor
        console.log(Fn.prototype === fn.__proto__);



        // Add method to prototype
        Fn.prototype.test = function() {
            console.log("test()");
        }

        fn.test();

Keywords: Javascript Front-end

Added by thenature4u on Tue, 09 Nov 2021 23:18:03 +0200