Four Call Patterns of JavaScript Functions

I. Four Call Patterns

1. Functional pattern
 this--->window
function test(){
            console.log(this);
        }
        test(); //Window

2. Method Patterns
This - > Objects that call methods
   var obj1 = {
            test:function(){
                console.log(this);   //Object
            }
        }
        obj1.test();
3. Constructor pattern
 The object of this - --> NEW

Factory mode; parasitic mode

        function Person(){
            console.log(this);  //Person
        }
        var obj =new Person();
4. Context Patterns
This - --> Who is designated?

2. Constructor Call Mode

1. Characteristic of constructor call pattern

a. The first letter of the constructor should be capitalized;
b. Usually used with new keywords;
c. The object specified by this in the constructor is created by the new keyword;
d. Return the object created by new by default;

2. Return value of constructor

a. Returns the new created object by default.
b. If the data of value type is not affected, if the object type is returned, the original created object will not be returned.

 function Person(){

        }
     var p = new Person();

3. Constructor of factory pattern

function Person(name,age){
            var o = {
                name:name,
                age:age,
                sayHello:function(){

                }
            }
            return o;
        }
        var p = Person("Zhang San", 18);
        console.log(p); //Object

a. The object created by the constructor of the simple factory pattern is independent of the constructor.
b. The constructor of simple factory mode, the actual invocation mode is function mode;

4. Parasitic constructors
function Person(name,age){
            var o = {
                name:name,
                age:age,
                sayHello:function(){

                }
            }
            return o;
        }
        var p = new Person();
         console.log(p);  //{name: undefined, age: undefined, sayHello: ƒ}

3. Context Call Mode

1. Context in JS
The meaning of context execution environment

In context invocation mode, you can modify the value of this, that is, you can modify the way functions are called.

2. Using the following two methods, you can modify the function call context, which is the value of this

apply
Function. apply (object, function needs parameter list, is an array)
call
Function. call (object, arg1,arg2,arg3...argn)
Note: The phrase [] in the api document represents something that is enclosed.

3. Comparisons of Apply and call

It can be used to change the direction of this as the first value of the parameter.
call uses a single parameter to pass parameters.
apply uses arrays to pass parameters. When this array is called, it will be disassembled as each parameter of the function.

4. Use environment

call is used to determine how many formal parameters of a function are used.
apply is used when the number of formal parameters of a function is uncertain.

var name = "Leonardo";
        function sayHello(a, b) {
            console.log(this.name + "Ate"+ (a * b) + "A steamed bun");
        }

//        sayHello();  

        var obj = {
            name:"Nicholas"
        }

        var arr= []
        arr.push(1);
        arr.push(2);
        sayHello.apply(obj,arr);    //Nicholas ate two steamed buns

        sayHello.call(obj, 1, 2);    //Nicholas ate two steamed buns
//        sayHello.call(obj);   
5. Cases:

Find the maximum in an array

 var arr = [9, 1, 4, 10, 7, 22, 8];
        //Math.max
//        Math.max(1,2,34,5);

        //The second parameter of the apply method is an array
        // When invoked, each element in the array is taken out as a formal parameter and passed to the function one by one.

        //When null is passed by the first parameter of the apply method and call method, both are expressed as function call patterns.
        //That is, point this to window.
        var max = Math.max.apply(null, arr);
        console.log(max);

Print the incoming parameters, and connect them with each other

 function foo() {
//            return arguments.join("-");

            //Pseudo-arrays do not have join methods, so consider borrowing join methods from arrays at this time.
//            var str = Array.prototype.join.apply(arguments,["-"]);
            var str = [].join.apply(arguments,["-"]);
            return str;
        }
        var str = foo(1, 3, "abc", "ffff", 99) // 1-3-abc-ffff-99
        console.log(str);

Added by edking1 on Thu, 06 Jun 2019 22:19:31 +0300