Detailed introduction to method calls in JavaScript

This article mainly introduces the detailed introduction of method calling in JavaScript. In JavaScript, if a function belongs to an object, the act of accessing the function through the object is called "method calling". Friends in need can refer to it.

In JavaScript, if a function belongs to an object, the act of accessing the function through the object is called "method call". Different from ordinary function calls, when making a method call, the this reference in the function will change - this will refer to the object used to call the function (the object will become the invocation context of the method call):

var x = 99;
var sample = {
  x:1,
  act:function(a){
    this.x = a*a;//assign value to sample's x, not global object's x.
  }
}
sample.act(6);
console.log(sample.x);//36
console.log(x);//9

Same as accessing properties in objects, in addition to using the dot operator, JavaScript can also use the bracket operator to make method calls:

//other ways to invoke method
sample["act"](7);
console.log(sample.x);//4

For functions in JavaScript , a more interesting behavior is that functions (closures) can be embedded in functions. When making a method call, if there is an embedded function in the method function, then the code in the embedded function can access the external variable value:

//nested function can access variable outside of it.
var y = 88;
var sample2 = {
  y:1,
  act2:function(a){
    this.y = inner();
    function inner(){
      return a*a;
    }
  }
}
sample2.act2(8);
console.log(sample2.y);//64
console.log(y);//88

However, contrary to intuition, the embedded function The code in cannot inherit this from the outside; that is to say, in the embedded function, this does not refer to the object that calls the method, but the global object:

//nested function does not inherit "this". The "this" in nested function is global object
var sample3 = {
  act3:function(){
    inner();
    function inner(){
      console.log(this);//window object
    }
  }
}
sample3.act3();

If you really need to embed the function To access the object calling the method, you can save this value to a variable in the external function:

//pass "this" to nested function
var sample4 = {
  act4:function(){
    var self = this;
    inner();
    function inner(){
        console.log(self);//Object {act4=function()}
    }
  }
}
sample4.act4();

The above is the entire content of this chapter. For more related tutorials, please visit JavaScript video tutorial !