JavaScript in this keyword detailed _javascript tips

No matter what knowledge to learn, the habit of learning their own knowledge into a list, will help us to clarify ideas, is a good learning method. Highly recommended.

The following length is a little long and I hope the reader will read it patiently.

The following sections are categorized as follows:

1. Meaning

1.1:this implication

1.2:this pointing to the variability of

2. Use Occasion

2.1: Global Environment

2.2: Constructors

2.3: Methods of the objects

3. Use the attention point

3.1: Avoid multilayer nesting this

3.2: Avoid this in the array processing method

3.3: Avoid this in the callback function

1. Meaning

1.1:this implication

In a posting I wrote about the relationship between a constructor and the new keyword, the new keyword always returns an object. This object can be an empty object returned when new calls the constructor, or it can be a complex data type (including objects, arrays, and so on) that is returned using the return statement in the constructor.

Similarly, as with the new keyword, the Thiskeyword always returns an object . Again, the object of the property or method "current".

var Keith = {
  firstName: ' Chou ',
  describe:function () {return
   this.firstname;
  }
 };
Console.log (Keith.describe ()); ' Chou '

In the code above, This.firstname represents the FirstName property of the object that the describe method is currently in. In other words, when the global scope is lowered with the describe method, the current object of the describe method is Keith, so it's called keith.firstname.

1.2:this pointing to the variability of

Because the properties of an object can be assigned to another object, the current object of the property is mutable. In other words, this point is variable.

var Keith = {
  firstName: ' Chou ',
  describe:function () {return
   this.firstname;
  }
 };
 var rascal={
  firstName: ' King '
 }
 rascal.describe=keith.describe;
 Console.log (Rascal.describe ()); ' King '

In the code above, the describe attribute in the Keith object is assigned to Rascal, so the object currently in the describe method is rascal, so this.firstname points to rascal. Because it is a pass-through, modifying the FirstName will have an effect on the original object. This example may not be easy to understand, and then look at the following example.

function f () {return
  this.firstname;
 }
 var Keith = {
  firstName: ' Chou ',
  describe:f
 };
 var rascal={
  firstName: ' King ',
  describe:f
 }
 Console.log (Keith.describe ());//' Chou
 ' Console.log (Rascal.describe ()); ' King '

In the above code, the method is moved to the global scope, and function f uses the This keyword internally. The this point is different with the object where F is located.

Under the global scope the This keyword points to the top-level object (that is, the Window object).

var name= ' Keith ';
 function person () {
  var name= ' rascal ';
  return this.name;
 }
Console.log (person ()); ' Keith '

In the code above, Keith is returned instead of rascal. The reason is that this point is global scope. Define a function in the global scope by default to point to the Window object, not to the function itself. However, if you do not use Var to declare a local variable inside a function, the result will be different.

var name= ' Keith ';
 function person () {
  name= ' rascal ';
  return this.name;
 }
Console.log (person ()); ' Rascal '

In the code above, a local variable is not declared with Var inside the function, then the Name property inside the function is not a local variable, but a global variable. So it overrides the previous name attribute. If you are not aware of local variables and global variables, you can access this article.

As long as the function is assigned to another variable, the point of this will change.

var keith={
  name: ' Keith ',
  describe:function () {return
   this.name
  }
} var name= ' rascal ';
var f=keith.describe;
Console.log (f ())//' Rascal '

In the code above, the return is Rascal, not Keith. Because the Keith.describe is assigned to the F variable and there is a name variable under the global scope, the this point of the function within Keith will point to the object of the F runtime (the top-level object, that is, the Window object)

To sum up:

1.javascript language, everything is an object (in addition to undefined and null), the operating environment is also an object, so the function is running in an object, this is the object (environment).

The direction of the 2.this is dynamic. If the function is in the global scope, this will point to the global environment, and if the function is in an object, this will point to the object.

2. Use Occasion

This application can be divided into the following occasions.

2.1: Global Environment (global scope)

Use the This object in a global scope, which points to the top-level object, which is the Window object.

 Function Keith () {return
  (this = = window)
  }
Console.log (Keith ())//true

In the code above, whether it's inside a function or not, as long as it runs under the global scope, this is pointing to the top-level object window.

2.2: Constructors

This in the constructor, pointing to the object instance that will be created.

function Keith () {
  this.sex = ' boy ';
 }
 var person = new Keith ();
 Console.log (Person.sex); ' Boy '

In the code above, the Keith constructor is defined under the global scope, and then the constructor is called and assigned to the person object instance.

Three basic requirements created by the constructor: the first letter of the function name; The inside constructor uses the This keyword to point to an object instance that is about to be generated, calls the constructor with the new keyword, and returns an object instance.

If you want to take a closer look at the relationship between the constructor and the new keyword, step into this article.

2.3: Methods of the objects

When a method of a object is assigned to a B object, this in the method changes from point A to point a to object B. So be particularly careful when assigning an object's method to another object, changing the point of this.

var keith = {
  sex: ' Boy ',
  foo:function () {return
   this.sex;
  }
 };
 var rascal = {
  sex: ' Girl '
 };
 Rascal.foo = Keith.foo;
 Console.log (Keith.foo ()); ' Boy '
 Console.log (Rascal.foo ());//' Girl '

In the code above, you assign Keith's Foo function to Rascal, and the point of this is changed from Keith to Rascal.

If a method is in the interior of a multi-tier object, then the method is assigned to a variable in order to simplify the writing, often resulting in a different result.

var a = {
  b: {
   P: ' Keith ',
   c:function () {return
    this.p;
   }
 }}; var person = A.B.C;
 Console.log (person ()); Undefined

In the code above, C is a method within two layers of objects. For simplicity, assign it to the global variable person, when the result is called, this points to the top-level object window. In Windows, the variable p default value is undefined.

To solve this problem, you can assign only the object of C to the person variable, or call directly.

var person = a.b;
Console.log (PERSON.C ()); ' Keith '
Console.log (A.B.C ());//' Keith '

3. Use the attention point

3.1: Avoid multilayer nesting this

When you use this in a closure, this will point to window.

Function Keith () {
  console.log (this);
  return function () {return this
   ;
  }
 }
 Keith (); Window
 Keith () ();//window

In the code above, the return of another anonymous function in one function is one of the features of the closure, as you can see that when you use this object in a closure, it points to a Window object in the global scope.

If you include an object outside of the function, the internal this points to the global scope, and the external this object points to the current scope.

var o = {
  f1:function () {
   console.log (this);
   (function () {
    Console.log (this)
   }) ();
  }
 ;
 O.F1 (); Object, Window

The above code contains two layers this, the result is run, the first level points to the current object, and the second layer points to the global object.

The actual execution is the following code.

Function Keith () {
  console.log (this);
 }
 var o = {
  f1:function () {
   console.log (this);
   var F2 = Keith ();
  }
 };
 O.F1 (); Object, Window

There are two ways to achieve this nesting:

One is to use a variable in the second layer that points to the outer part of this.

var o = {
  f1:function () {
   console.log (this);
   var that = this;
   (function () {
    console.log (that);
   }) ();
  }
 };
 O.F1 (); Object, Object

In the code above, you define the local variable that, which is fixed to the outer part of this, and then uses that in the inner layer, and there is no change to this point. But if there is a nested object inside the function, this will still point to the global.

The second is the strict mode in JavaScript. In strict mode, an error occurs if the internal function's this points to the Window object.

var a = {
  count:0,
  fun:function () {
   ' use strict ';
   Return this.count++
  }
 }
 var f = a.fun;
 Console.log (f ())//' Typeerror:this is undefined '

In the code above, the fun method uses a strict mode declaration. Assigning the fun method in object A to the global variable F, this point points to the Window object, and in strict mode, the error occurs. If there is no nested object outside the function, it will not be an error, but return to undefined.

3.2: Avoid this in the array processing method

The map and foreach methods of arrays allow you to provide a function as an argument. this should not be used internally in this function.

var keith = {
  A: ' Hello ',
  b: [' B1 ', ' B2 '],
  c:function () {
   This.b.foreach (function (item) {
    Console.log (THIS.A + ' + item);
   }}}
 ;
 KEITH.C ();
 Undefined B1
 //undefined B2

In the code above, this in the callback function of the Foreach method actually points to the Window object, so that the value of the KEITH.A is not taken, as is the case with avoiding multilayer nesting this. In other words, this does not point to an external function, but to the top-level object.

To work around this method, you can use the that variable instead of this in the callback function.

var keith = {
  A: ' Hello ',
  b: [' B1 ', ' B2 '],
  c:function () {
   var = this;
   This.b.foreach (function (item) {
    Console.log (that.a + ' + item);
   }}}
 ;
 KEITH.C ();
 Hello B1
 //hello B2

Another way is to make this the second parameter of the Foreach method to fix its running environment.

var keith = {
  A: ' Hello ',
  b: [' B1 ', ' B2 '],
  c:function () {
   This.b.foreach (function (item) {
    Console.log (THIS.A + ' + item);
   }, this)
  }}
 ;
 KEITH.C ();
 Hello B1
 //hello B2

3.3: Avoid this in the callback function

This in the callback function often changes the point.

var o = {
  f:function () {
   Console.log (this = = O);
  }
 };
 O.F (); True

In the code above, call the F method of the O object and return True.

However, if you assign the F method to a button's click event, the point of this is changed.

$('button').on('click',o.f);

In the code above, you use the JQuery method to get the button element and bind the click event. The console displays false when the button is clicked. The reason for this is that this point no longer points to the O object, but rather to the DOM object of the button, because the F method is invoked in the context of the button object.

To sum up:

A: If you want to embed this keyword in multiple layers, the most common solution is to use that variable, fix the to point to the outer layer, and then use that variable in the inner layers. There will be no inner layer this point to the global problem.

B: If you use the This keyword in the callback function, note the point of this.

Above is the entire content of this article, I hope the content of this article for everyone's study or work can bring some help, but also hope that a lot of support cloud Habitat community!