The "This" keyword in __java javascript

1. The mystery of this

Most of the time this keyword is filled with mysterious colors for me and many JavaScript developers. This is a powerful feature, but it requires effort to be understood.

From Java, PHP, and other standard language backgrounds, in class methods, this is an instance of the current object, not much or less. In most cases, he cannot use it outside of the method, a simple strategy that does not cause confusion about this understanding.

Things are different in javascript: This is the execution environment for the current function (execution context of a funciton). JavaScript has 4 function calls: Function call: alert (' Hello World ') method call: Console.log (' Hello World ') constructor call: New RegExp (' \d ') Indirect call: Alert.call (Undefined, ' Hello world! ')

Each invocation method defines their own execution environment, so this is slightly different from what the developer expects.

In addition, the strict pattern also affects the execution context.

The key to understanding this keyword is that the function call has a clear view and how it affects the context.

The focus of the text is the interpretation of the call, how the function call affects this, and demonstrates the common pitfalls of identifying the context.

Before we begin, let's familiarize ourselves with some terms: the invocation of a function is the code that is executing the body of the function, or a simple call. For example, a parseint function call is a parseint (' ") called context that is the value of this in the function body. For example, the invocation of map.set (' key ', ' value ') has a call context map A function's scope is a collection of variables, objects, and functions that can be accessed in the function body. 2. Function call

function calls are executed when an expression that is evaluated on a function object is followed by an opening parenthesis (a comma-delimited list of argument expressions and a closing parenthesis). For example parseint (' 18 ')

A function call expression cannot be a property accessor (for example, Console.log (' Hi ')), it is a method call. Again for example [1,5].join (', ') is not a function call, but a method call. This distinction is very important.

A simple example of a function call:

function Hello (name) {return
    ' Hello ' + name + '! ';
}

The function calls the
var message = Hello (' world ');
Console.log (message);//=> ' Hello world! '

The above hello (' world ') is a function call: The hello expression is evaluated to a function object, followed by a pair of parentheses with the parameter ' world '

A more advanced example is Iife (immediately-invoked function expression):

var message = (function (name) {return  
   ' Hello ' + name + '! ';
}) (' World ');

Iife is also a function call: The first pair of parentheses (function (name) {...}) is an expression defined as a function, followed by a pair of parentheses with the parameter ' World ' 2.1. The this in a function call

In a function call, this is a global object

The global object is determined in the execution environment. In the browser, he is the window object

window;
function MyFunc () {
    console.log (window = = this);/true;
}

In a function call, the execution context is the global object.

Let's examine the context of the following function:

function sum (A, b) {
    Console.log (this = = window);/true
    this.mynumber = 20;///Add a property called ' MyNumber ' to the global object
    return a + B;
}
SUM () is called as
a function//This is a Global object (window) sum in sum ()
;        =>
window.mynumber;//=> 20

When sum (15, 16) is invoked, JavaScript automatically sets this as the global object, and in the browser it is window

This is also a global object when this is used outside of a function:

Console.log (this = = window); => true  
this.mystring = ' Hello world! ';  
Console.log (window.mystring); => ' Hello world! '  

<!--in a HTML file-->  
<script type= "Text/javascript" >  
   console.log (this = = window);//=> true< C10/></script>  

2.2. In the strict mode (strict mode), this in the function call

In strict mode (strict mode), in a function call, this is a undefined

Strict mode (strict mode) is introduced in ECMAScript 5.1, which is a finite variant of JavaScript. It provides better security and stronger error checking.

To enable strict mode (strict mode), place the instruction "use strict" at the top of the function body

Once enabled, strict mode (strict mode) affects the execution context so that it is not defined in a regular function call. The execution context is no longer a global object, as opposed to 2.1 above.

function MyFunc () {
    ' use strict ';
    Console.log (This = = undefined);//=>true
}
myFunc ();

Examples of functions that are executed in strict mode:

function Multiply (A, b) {  
    ' use strict ';//enable strict mode
    Console.log (this = = undefined);//=> true return
    A * b;
}
The value of this is undefined
multiply (2, 5);//=> 10  

Strict mode is not only effective in the current execution environment, but also in the internal function execution environment. This means that internal functions are also executed in strict mode.

function execute () {  
   ' use strict ';//Activate the strict mode    
   function concat (str1, str2) {
     //the Strict The mode is enabled too
     console.log (this = = undefined);//=> true return
     str1 + str2;
   }
   Concat () is invoked as a function in strict mode
   //The In concat () is undefined
   concat (' Hello ', ' world! ') ; => "Hello world!"
}
Execute ();  

A single JavaScript file may contain both a non strict pattern and a strict pattern. Therefore, there may be different contextual behavior in a single script of the same invocation type:

function Nonstrictsum (A, b) {  
  //non-strict mode
  console.log (this = = window);//=> true return
  A + b;
  
   
function Strictsum (A, b) {  
  ' use strict ';
  Strict mode boot
  console.log (this = = undefined);//=> true return
  A + b;
}
Within the Nonstrictsum function This is window
nonstrictsum (5, 6);///=>//  
strictsum function This is undefined
strictsum (8, 12); => 20  
  

2.3. Traps: This in internal functions Mistaken cognition: A common pitfall of function calls is to think ThisThe internal function is the same as the external function of the correct cognition: correctly, the context of the internal function depends only on the invocation, not on the context of the external function.

var numbers = {  
   Numbera:5,
   numberb:10,
   sum:function () {
     Console.log (this = = numbers);//=> True
  function calculate () {
       //This is window or undefined, if it is in strict mode.
       Console.log (This = = numbers);//=> false return
       This.numbera + this.numberb;
     }
     return calculate ();
   }
;
Numbers.sum (); => Normal mode Nan, in strict mode will be the error

To solve this problem, the Calculate function should be executed by the same execution context as the Sum method, which can be used to specify the execution contexts:

var numbers = {  
   Numbera:5,
   numberb:10,
   sum:function () {
     Console.log (this = = numbers);//=> Tru e
     function Calculate () {
       Console.log (this = = numbers);//=> true return
       This.numbera + this.numberb;
     }
     Use the. Call () method to modify the execution context return
     calculate.call (this);
Numbers.sum (); => 15

3. Method call

A method is a function stored in an object's properties. For example:

var myObject = {
    //Hellofunction It is a method
    hellofunction:function () {return
        ' Hello world! ';
    }
}

var message = Myobject.hellofunction ();

Hellofunction is a method of MyObject . Gets the method, using the property accessor: myobject.hellofunction.

The method call executes in an expression in the form of a property accessor that evaluates to a function object followed by an open parenthesis (a comma-delimited list of argument expressions and a closing parenthesis).

Recall the previous example, Myobject.hellofunction () is the Hellofunction method call on the object myObject. Method calls are also: [1,2]. Join (', ') or/\s/.test (' Beautiful World ').

It is important to separate function calls from method calls because they are of different types. The main difference is that the method call requires a property accessor to invoke the function (Obj.myfunc ()), and the function call does not need (MyFunc ()).

The following invocation list shows how to distinguish between them:

[' Hello ', ' World '].join (', '); Method call
({ten:function () {return 10;}}). Ten (); Method invokes
var obj = {};  
Obj.myfunction = function () {return  
  new Date (). toString ();
Obj.myfunction (); Method calls

var otherfunction = obj.myfunction;  
Otherfunction ();     function call
parsefloat (' 16.60 ');//Function call
isNaN (0);            Function call

Understanding differences in function calls and method calls can help us identify the correct context. 3.1. This in the method call

This is the object that owns the method in the method call

When a method is called in an object, this becomes the object itself.

var myObject = {
    mymethod:function () {this
        ;
    }
}
Myobject.mymethod ();

Let's create an object with a method that adds a number:

var calc = {
    num:0,
    increment:function () {
        Console.log (this = = Calc);//True
        This.num + 1;
        return this.num;
    }
;
Method calls
calc.increment ();//=> 1
calc.increment ();//=> 2

Call Calc.increment () to make the context of the Increment function a Calc object. So it's good to use This.num to add the number attribute.

Let's look at other situations. A JavaScript object inherits a method from its prototype. When this inherited method is invoked in this object, the context of the invocation is still itself.

var Mydog = object.create ({  
  sayname:function () {
     Console.log (this = = Mydog);//=> true return
     THIS.N ame;
  }
});
Mydog.name = ' Milo ';  
Method invocation. This is Mydog
mydog.sayname ();//=> ' Milo '

3.2. Traps: Separation methods and their objectsErroneous cognition: From an object's method can be extracted into a separate variable var alone = Myobj.mymethod. When the method is called individually, detach from the original object alone (), which you might consider to be the object that defines the method. Correct perception: If no object calls the method, a function call occurs: This is a global object window or undefined in strict mode (see 2.1 and 2.2)

The following example creates an animal constructor and creates an instance of it-mycat. Then Settimout () records the Mycat object information after 1 seconds:

function Animal (type, legs) {
  this.type = type;
  This.legs = legs;
  This.loginfo = function () {
    Console.log (this = = Mycat);//=> false
    Console.log (' the ' + This.type + ' has ' + This.legs + ' legs ');
  }
var mycat = new Animal (' Cat ', 4);  
Displays "The undefined has undefined legs" or throws an exception (in strict mode)
settimeout (mycat.loginfo, 1000); 
Displays "The Cat has 4 legs"
settimeout (MyCat.logInfo.bind (Mycat), 1000);  

4. Constructor call

When the new keyword is followed by an expression whose value is a function object, an open parenthesis (a comma-delimited list of argument expressions and a closing parenthesis), the constructor method call is executed. For example: New RegExp (' \ d ').

function Country (name, traveled) {  
   this.name = name? Name: ' United Kingdom ';
   this.traveled = Boolean (traveled);
}
Country.prototype.travel = function () {  
  this.traveled = true;
};
Constructor invokes
var France = new Country (' France ', false);  
The constructor invokes the
var unitedkingdom = new Country;

France.travel (); Travel in France

The new Country (' France ', false) is a constructor call to a Country function. The result of this execution is a new object whose name property is ' France '

If the constructor has no arguments, parentheses can be omitted: new Country 4.1. This in the constructor call

This is the newly created object in the constructor call

The context of the constructor call is the object that was just created. It is used to initialize the object's data, from constructor function parameters, to set initial property values, and some processing methods.

Functioin Constructor () {
    this;//itself object
}

var object = new Constructor ();//object is the same object as the above.

Let's take a look at the context of the following example:

function foo () {
    console.log (this instanceof foo);//=> true
    this.property = ' Default Value ';
}
Constructor calls
var fooinstance = new Foo ();
Fooinstance.property; => ' Default Value '

The new Foo () is called as a constructor, and its context is fooinstance. Inside Foo , the object is initialized:this.property is given a default value.

When new Foo () is executed, JavaScript creates an empty object and makes it the context of the constructor method. You can then use the This keyword to add attributes to the object: this.property = ' Default Value ' 4.2. Trap: Forget new

Some JavaScript functions create instances not only with constructors, but also by function calls. For example RegExp:

var reg1 = new RegExp (' \\w+ ');
var reg2 = RegExp (' \\w+ ');

REG1 instanceof RegExp;         => true
reg2 instanceof RegExp;         => true
Reg1.source = = = Reg2.source;    => true

function Vehicle (type, wheelscount) {
    if (!) ( This instanceof Vehicle) {
        throw error (' ERROR: Wrong call ');
    }
    This.type = type;
    This.wheelscount = Wheelscount;
    return this;
}

var car = new Vehicle (' car ', 4);
Car.type;
Car.wheelscount;
Car instanceof Vehicle;
Function call. Generates an error
var brokencar = Vehicle (' Broken Car ', 3);

The new Vehicle (' car ', 4) runs fine: A newer object is created and initialized because the new keyword exists in the constructor call 5. Indirect invocation

Indirect invocation : When a function is invoked with Myfun.call () or myfun.apply, an indirect call is performed.

A function in JavaScript is the first class object, which means that a function is an object. The type of this object is a Function.

Two methods of a function object:

Call (thisarg[, arg1[, arg2[, ...)]]
Apply (Thisarg, [Arg1, Arg2, ...])

For example:

Myfun.call (Thisvalue, ' val1 ', ' val2 ');
Myfunc.apply (Thisvalue, [' Val1 ', ' val2 ']);

5.1. This in the indirect call

Indirect calling This is the first parameter of . Call () or . Apply ()

The following example shows the context of an indirect invocation:

var rabbit = {name: ' Little White Rabbit '};  
function Concatname (string) {  
  Console.log (this = = rabbit);//=> true return
  string + this.name;
}
Indirect call
Concatname.call (rabbit, ' hello ');  => ' Hello little white Rabbit '  
concatname.apply (rabbit, [' goodbye ']);//=> ' Goodbye Bunny '  

Indirect invocation is useful at some point, such as in strict mode, when our context is window or undefined , using indirect invocation, this in the function body can be the object we want. 6. Binding Functions

A binding function is a function that carries an object. Typically, it is created by using the . bind () function from the original function. This method is used to change the execution environment of the function

function multiply (number) {  
  ' use strict ';
  return this * number;
}
Create a bound function with the context
var double = Multiply.bind (2);  
Invoke the bound function
double (3);  => 6  
double (ten);//=> 20  

6.1. This in the binding function

This is the first parameter of the . bind () function in the number of binding orders.

var numbers = {  
  array: [3, 5, ten],
  getnumbers:function () {return
    this.array;    
  }
};
Create a binding function
var boundgetnumbers = numbers.getNumbers.bind (numbers);  
Boundgetnumbers (); => [3, 5,]  
//Extract Method
var simplegetnumbers = numbers.getnumbers;  
Simplegetnumbers (); => undefined or throw an exception in strict mode

6.2. Tight Context Binding

. Bind () creates a permanent context link and always maintains it.

When using. Call () or. Apply () with a different context, the bound function cannot change the context of its link, or even the rebound has no effect. Only the constructor calls of the binding function can be changed, but this is not the recommended method (for a constructor call, use a normal, unbound function).

The following example creates an bound function and then attempts to change its predefined context:

function Getthis () {  
  ' use strict ';
  return this;
}
var one = Getthis.bind (1);  
The binding function calls one
();//=> 1  
//use. Apply (). Call () calls the binding function
One.call (2);  => 1  
one.apply (2);//=> 1  
//Again bind
One.bind (2) ();//=> 1  
//Call binding function through constructor

Only new () changes the context of the bound function, and other types of calls do not change the execution context of the function. 7. Arrow function

The arrow function is intended to declare a function in a shorter form and to bind the context in lexical terms.

It can be used in the following ways:

var hello = (name) => {return  
  ' hello ' + name;
};
Hello (' world '); => ' Hello world '  
///only reserved even
[1, 2, 5, 6].filter (item => Item% 2 = = 0);//=> [2, 6]

The arrow function brings a lighter syntax that does not include a detailed keyword function. When a function has only 1 statements, you can even omit the return.

An arrow function is anonymous, which means that the Name property is an empty string ". In this way, it has no lexical function name (which is useful for recursive, detach event handlers).

It also does not support arguments objects, unlike ordinary functions. Then he can support the remaining parameters after ES2015:

var sumarguments = (... args) => {  
   console.log (typeof arguments);//=> ' undefined ' return
   args.reduce ( result, item) => result + Item);
Sumargume