JS高级<函数四种调用模式和this的指向>

64 阅读1分钟

一.函数调用模式

如果一个函数不是一个对象的属性时,就是被当做一个函数来进行调用的。此时this指向了window
//Example Code:
function test() {
        console.log(this)  // 输出window
}
test() 

二.方法调用模式

当一个函数被保存为对象的一个属性时,我们称之为一个方法。
当一个方法被调用时,this被绑定到当前对象.(即谁调用了方法,this指向谁)
//Example Code:
let obj = {
  sayHi:function(){
    console.log(this);   //输出obj对象(obj调用了sayHi,所以this指向obj)
  }
}
obj.sayHi();

三.构造函数调用模式

如果函数是通过new关键字进行调用的,此时this被绑定到创建出来的新对象上。
function Person(){
  console.log(this);
}
Person();//this指向window(函数调用模式)
var p = new Person();//this指向Person(构造函数调用模式)

四.方法借用模式

也叫上下文模式,分为 apply 与 call,bind,此文只讲call

call

call:可以调用一个函数,并且可以指定这个函数的this指向,本质上就是改变this的指向
语法:方法.call(this对象,参数....)
//Example Code:
     let obj = {
        name: 'jack',
        say: function() {
          console.log(`我的名字是${this.name}`)
        }
      }
      obj.say()  //此时this指向obj,因为是obj调用了say方法,上面输出 我的名字是jack

      let newObj = {
        name: 'rose'
      }

      obj.say.call(newObj) //此时this指向newObj,上面输出 我的名字是rose