This is the fourth day of my participation in the November Gwen Challenge. Check out the details: The last Gwen Challenge 2021

  • This points to the problem

Tom
Tom
undefined
Michael
Person { name: 'Michael' }
Copy the code

With the new operator, this in the constructor points to the corresponding instantiated object; When the new operator is not used, it is a normal function call, with this in the global function pointing to the window.

So the statement var a = Person(‘Tom’) changes the global name variable to Tom, so the second line is printed as Tom. Person(“Tom”) just executes the Person function and returns no value, so console.log(a) prints undefined.

Change the this pointer inside the function

Call method

The call() method calls an object. This is simply the way a function is called, but it can change the this direction of the function

Application scenario: Often perform inheritance.

var o = { name: 'andy' } function fn(a, b) { console.log(this); console.log(a+b) }; Fn. Call (o,1,2)// this refers to the object o, separated by commas, and the result is 3Copy the code

The above code runs as follows:

The apply method

The apply() method calls a function. This is simply the way a function is called, but it can change the this direction of the function.

Application scenario: Often associated with arrays

var o = { name: 'andy' } function fn(a, b) { console.log(this); console.log(a+b) }; Fn. apply(o,[1,2])// this refers to object o and is passed an arrayCopy the code

The bind method

The bind() method does not call a function, but it does change the this pointer inside the function and returns any new function that was created after the original function changed this

You can use bind if you just want to change this and don’t want to call the function

Application scenario: Do not call the function, but still want to change the this reference

var o = { name: 'andy' }; function fn(a, b) { console.log(this); console.log(a + b); }; var f = fn.bind(o, 1, 2); // f is the new function f() returned by bind; // Call the new function this to the object O separated by commasCopy the code

Call, apply, bind

  • Common: Both can change the “this” direction

  • Difference:

    • Call and Apply call the function and change the this reference inside the function.
    • Call and Apply pass different parameters, which are separated by commas, and apply pass in arrays
    • Bind does not call a function; it can change the this pointer inside a function.

  • Application scenarios

    1. Call often does inheritance.
    2. Apply is often associated with arrays. For example, using mathematical objects to realize the maximum and minimum values of arrays
    3. Bind does not call the function, but also wants to change the this pointer. For example, change the this pointer inside the timer.

  • Strict mode

The “Use strict” declaration is executed in strict mode

Person. pro calls getName(), and this in getName() refers to Person. pro, so this.name == “Michael”

Output: error Assign the Person.pro.getName method to Pepole, and then call pepole() in the global execution context. Since it is executed in strict mode, this in Pepole () refers to undefined, which gets the name attribute, The result is an error

  • The module specification

Prior to ES6, community-developed module loading solutions such as CommonJS and AMD were popular in the industry. And ES6 Module as an official specification, and browser and server common, the future will certainly dominate the world, but because ES6 Module came too late, limited by compatibility and other factors, it can be foreseen that in the future for a period of time, a variety of modular schemes will still coexist. ES6 Modue specification: Standard modular scheme of JavaScript language, common to browser and server, module function is mainly composed of export and import commands. Export is used to define the external interface of a module, and import is used to input functions provided by other modules. CommonJS specification: The server-side JavaScript modularization scheme used by Node.js, and therefore supported by front-end build tools for various Node.js environments. The CommonJS specification says to load other modules via the require command, exposing interfaces via module.exports or exports. AMD specification: Asynchronous Modules Definition (Asynchronous Modules Definition) is an Asynchronous module Definition. It is a browser-based JavaScript modularity solution. The implementor of this solution is RequireJS. Load the module through the require method.