Four kinds of call mode function => analyze this point

Disclaimer: This article is a blogger original article, follow the CC 4.0 BY-SA copyright agreement, reproduced, please attach the original source link and this statement.

This link: https://blog.csdn.net/weixin_45674894/article/details/102524862

Four kinds of call mode function

注意:在函数声明的时候是无法确定this的指向,只有当函数调用的时候才能确定下来！

In the function this point is flexible, in order to know that this point needs to analyze two things:

• See this is a function which belongs
• Look what function to call mode

Depending on the internal function of this point, the function calling pattern may be divided into 4

1. Function call mode
2. Constructor call mode
3. Method call mode
4. Context call mode (mode borrowing Method)

What is the function? What is the method?

Function: When a property is not a function object, which we call the function.
Method: When a function is stored as a property of the object, a method we call.

First, the function call mode

Definition: If a property is not a function object, is to be carried out as a function call. At this time, this points to the window.

//函数调用模式
function fn(){
  console.log(this);//window
}

//函数名(),这种函数调用模式属于函数调用模式,this指向的是window
fn();

Second, the constructor call mode

function Person(){
    console.log(this);//Person {}
}

// new 构造函数() 这种调用模式属于构造函数调用模式
// 构造函数内的this指向了新创建的实例对象。
var p = new Person();

Third, the method call mode

var obj = {
  sayHi:function(){
    console.log(this);//obj
  }
}

//在方法调用模式中，this指向调用当前方法的对象。
obj.sayHi();//点语法调用
obj["sayHi"]();//中括号语法调用

Fourth, the context of the calling mode
context of the calling mode is also called the method borrow mode
poke here to learn more about the call, apply, bind
role:
as a method call and apply methods role

1. You can call mode
2. Modifying this point (the first parameter) in the function
3. Other parameters passed to the function arguments

var xm = {
    name: '小明',
    age: 10,
    fn: function (a, b) {
        console.log(this.age); // undefined
        console.log(a + b); //NaN 非数值
    }
}

var fn2 = xm.fn;
//若不传参，和函数调用模式相同,this指向window
fn2.call(); 

var xm = {
    name: '小明',
    age: 10,
    fn: function (a, b) {
        console.log(this.age); // 10
        console.log(a + b); //30
    }
}

var fn2 = xm.fn;

//修改了this指向,此时指向了xm这个对象
//fn2.apply(xm,[10,20]); 
fn2.call(xm,10,20); 

3.bind()
bind()方法创建一个新的函数, 可以绑定新的函数的this指向

 var fn = function () {
     console.log(this);//window
}
fn(); //函数调用模式,this指向window

//fn和fn2长的一样，但是在内存中是两份函数，地址是不一样。
 var fn = function () {
     console.log(this);//[10, 20, 30]
}
      
var fn2 = fn.bind( [10, 20, 30] ); // fn2 是创建的新函数，新函数和fn长的一样。

console.log(fn === fn2); // false 
//fn和fn2长的一样，但是在内存中是两份函数，地址是不一样。

fn2();
//fn2函数是由bind创建出来的， fn2函数内的this指向被固定了,所以this指向了[10, 20, 30]
//固定的理解： 不论fn2 函数的调用模式是何种，fn2内的this指向被固定写死了。

Finally: that several special this point

• Timers this point to the window, because the timer function is ultimately invoked by the window.
  Poke here for three points this timer method to modify
• Event this points to the current element, when an event is triggered, the browser so that the current element called function.