web前端面试必问之this的指向问题 this与函数的四种调用模式

this与函数的四种调用模式

根据函数内部this的指向不同，可以将函数的调用模式分成4种

1. 函数调用模式
2. 方法调用模式
3. 构造函数调用模式
4. 上下文调用模式（借用方法模式）

1.函数调用模式

如果一个函数不是一个对象的属性时，就是被当做一个函数来进行调用的。此时this指向了window

function fn(){
  console.log(this);// 指向window 
}
fn();

2.方法调用模式

当一个函数被保存为对象的一个属性时，我们称之为一个方法。当一个方法被调用时，this被绑定到当前对象

const obj = {
  sayHi:function(){
    console.log(this);//在方法调用模式中，this指向调用当前方法的对象。
  }
}
obj.sayHi();

3.构造函数调用模式

如果函数是通过new关键字进行调用的，此时this被绑定到创建出来的新对象上。

function Person(){
  console.log(this);
}
Person();//this指向window
var p = new Person();//this指向Person{}

4.方法借用模式
也叫上下文模式,分为 apply 与 call

call方法可以调用一个函数，并且可以指定这个函数的this指向

 const RichWumon = {
      name: "没有借调",
      say: function () {
        console.log(this.name);
      }
    }

    const obj = {
      name: "借调后"
    }

    RichWumon.say();			// 打印结果没有借调
    RichWumon.say.call(obj);	// 打印结果借调后