Introduction to JavaScript function internal properties (with examples)

This article brings you an introduction to the internal properties of JavaScript functions (with examples). It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

There are two special objects inside the function, this and arguments. Arguments is an array-like object that contains all parameters passed into the function. It is mainly used to save function parameters. The arguments object also has a callee attribute, which is a pointer to the function that owns the arguments object.

callee

function fact(num){
        if(num<=1){
        return 1;
        }else{
        return num*fact(num-1);
        }
    }

This is a function that implements factorial, using a recursive method. One problem with this method is that when the name of the fact is changed, if the function inside the function is not changed in time name, the function is invalid. At this time, the callee attribute is used to replace the current function with num parameter object, which is fact.

Using callee to implement the following

function fact(num){
            if(num<=1){
            return 1;
            }else{
            return num*arguments.callee(num-1);
            }
        }

this

this refers to the environment object of function execution , when a function is called as a method of an object, the this object at this time refers to the object that is currently calling the function.

Different environments have different values ​​pointed to by this. Here are several values ​​pointed to by this in different execution environments

Method call

When the function is used as an object method , this in the function is bound to the current object (can also be called a method call)

For example:

var myNum = {
      value:1,
      increment:function(arg){
          this.value +=arg;

      }
  };
   myNum.increment(3);
  console.log('example1:'+myNum.value);//example1:4

The above increment is an object method, and this inside the object method Points to the current object

Function call

When the function is used as a non-object method, this is bound to the global object window. If you want to call an internal function at this time, you can use that = this.

// 一般的函数
function add(a){
    return a+2 ;
}

var value = 2;
myNum.count = function (){
    let value = 1;
    let help = function(){
        this.value = add(this.value);
    }
    help();
    console.log(this.value);//4
}
myNum.count();


that = this方式

var value = 2;
myNum.count = function (){
    let value = 1;
    let that = this;
    let help = function(){
        that.value = add(that.value);
    }
    help();
    console.log(that.value);//3
}
myNum.count();

Constructor

Using the new operator to call the constructor will first create a prototype (prototype object) connected to the constructor, and then bind this to the object

function Person(name){
    this.name = name;
}

Person.prototype.sayName = function(){
    return this.name;
}
var person1 = new Person('TOM');

console.log(person1.sayName());

apply\call\bind

Bind this to the specified environment object

 
 var people = {
    name:"LILY"
}
console.log(Person.prototype.sayName.apply(people));
console.log(Person.prototype.sayName.bind(people)());
console.log(Person.prototype.sayName.call(people));

call: The method calls a function with the given this value, and the provided parameter list.
apply: The method calls a function with a given this value, and the provided parameters (array or array-like object).
bind: The method creates a new function and sets the this keyword to the provided "value" when called.

ES6 Arrow Function

This in the es6 arrow function points to the object where it is defined, not the execution environment object, which means this is an unchanged value when used in the arrow function

function foo(){
    setTimeout(()=>{
        console.log('name:',this.name);
    },1000)
}
var name = "kiki";
foo.call({name:"didi"});//name:didi

The value of this in the arrow function points to the environment object where it was defined. The method of implementing the arrow function in es5: use the mechanism of that = this to realize the binding of this

Above It is an understanding of the internal properties of functions.

The above is the detailed content of Introduction to JavaScript function internal properties (with examples). For more information, please follow other related articles on the PHP Chinese website!