The problem of this pointing and the modification of this pointing by call(), apply(), bind()

Time:2022-1-17

1. This points to common situations

The understanding of this only needs to remember: it is the last called object pointed to

Scenario 1: there is no object call
var name = 'global';

function fn() {
  var name = 'inner';
  console. log(this.name); //  Global this refers to the last called object!
}
fn(); //  Equivalent to window fn();  Therefore, it points to the window global
The problem of this pointing and the modification of this pointing by call(), apply(), bind()

Case 1 png
Scenario 2: there is an object to call

Object to call the method. This refers to the last called object.

var name = 'global';
var b = {
  Name: 'B's name',
  fn() {
   console.log(this.name);
  }
}
b.fn(); //  Printed is' B's name '
The problem of this pointing and the modification of this pointing by call(), apply(), bind()

Case II png
Scenario 3: this will only point to the last called object
var name = 'global';
var c = {
  Name: 'C's name',
  fn() {
    console.log(this.name);
  }
}
window.c.fn();
The problem of this pointing and the modification of this pointing by call(), apply(), bind()

Case III png
Scenario 4: when the last called object does not have this attribute
var name = 'global';
var d = {
  fn() {
    console.log(this.name);
  }
}
window.d.fn();
The problem of this pointing and the modification of this pointing by call(), apply(), bind()

Case IV png
Situation 5: comparison pit! Situation

FN () in E is assigned to F, but f has no object to call. At this time, it is still window f()

var name = 'global';
var e = {
  Name: 'e's name',
  fn() {
    console.log(this.name);
  }
}
var f = e.fn;
f();
The problem of this pointing and the modification of this pointing by call(), apply(), bind()

Case v png
Scenario 6:

The demo method is called by window, so the internal this point is still window, and the internal function fn () is equivalent to this FN () therefore, the printed result is global

var name = 'global';    
function demo() {
  Var name = 'G's name';
  fn();
  function fn() {
    console.log(this.name);
  }
}
demo();
The problem of this pointing and the modification of this pointing by call(), apply(), bind()

Case VI png

2. Change the direction of this: the arrow function in ES6

The arrow function in ES6 does not point to this. If this is used in the arrow function, it points to the context object.

function Foo(){
    this. Name = "Foo's name"
}
//Add method on prototype object
Foo.prototype.getName = function(){
  console. Log ('getname printed name: ', this. Name)
}
Foo.prototype.putName = function(){
  setTimeout(function(){
    this.getName()
  },100)
}
var f = new Foo();
f.putName();

In this case, within setTimeoutconsole.logCheck this out

The problem of this pointing and the modification of this pointing by call(), apply(), bind()

image.png

It is found that it points to the global object window, which is affected by the writing method of Es5. If you replace it with the arrow function of ES6, this problem will be solved.

Foo.prototype.putName = function(){
  setTimeout(() => {
    console.log(this);
    this.getName()
  },100)
}
The problem of this pointing and the modification of this pointing by call(), apply(), bind()

image.png

In this way, the pointing is modified correctly.

3. Change the second direction of this: apply ()

fn.apply(target, [argumentsList])

  • Target: the object bound when the function is called
  • Argumentslist: the list of arguments expected during function call. This parameter should be an object of class array

Use the same test case as before

function Foo(){
    this. Name = "Foo's name"
}
//Add method on prototype object
Foo.prototype.getName = function(){
  console. Log ('getname printed name: ', this. Name)
}
Foo.prototype.putName = function(){
  setTimeout(function(){
    this.getName()
  },100)
}
var f = new Foo();
f.putName();

At present, this refers to the window global object. You can add apply (f) at the end of the function to specify the instance object of the function call

Foo.prototype.putName = function(){
     setTimeout(function(){
        console.log(this);
         this.getName()
    }.apply(f),100)
}
The problem of this pointing and the modification of this pointing by call(), apply(), bind()

image.png

The modified result is still correct

4. Change the third direction of this: call()

Foo.prototype.putName = function(){
  setTimeout(function(){
    console.log(this);
    this.getName()
  }.call(f),100)
}
The problem of this pointing and the modification of this pointing by call(), apply(), bind()

image.png

5. Change the direction of this to four: bind()

Foo.prototype.putName = function(){
  setTimeout(function(){
    console.log(this);
    this.getName()
  }.bind(f)(),100)
}
The problem of this pointing and the modification of this pointing by call(), apply(), bind()

image.png

Recommended Today

Modul of fastems

Each module of fastems is implemented from the abstract class Fastems.Mms.Client.Infrastructure.UiModuleBase; public class DataManagerModule : UiModuleBase { public override void Initialize() { AddResourceDictionary(“/Resources/DataManagerResources.xaml”, typeof(DataManagerModule)); RegisterViewWithRegion(“DialogRegion”, typeof(DialogView)); RegisterViewWithRegion(“BusyIndicatorRegion”, typeof(BusyIndicatorView)); } } And Fastems.Mms.Client.Infrastructure.UiModuleBase inherits from Fastems.Mms.Client.Infrastructure.ModuleBase public abstract class UiModuleBase : ModuleBase { [Import] public IRegionManager RegionManager { get; set; } [Import] public IMergedDictionaryRegistry MergedDictionaryRegistry { […]