JavaScript函数调用与this指向问题

this指向问题

1、函数调用方式

1)直接调用函数

• 直接函数名调用

  function fn () {};
  fn()
  

• 对象的方法调用

  let demo = {
      name: 'zhang san',
      age: 20,
      add: () => {}
  }
  demo.add(); 
  

• 构造函数调用

  let Person = function () {
      this,name = 'zhang san';
      this.add = () => {}
  }
  let p = new Person();
  p.add()
  

2)以 call() 方法调用

call是直接传递函数的实参：

用法： 函数.call(调用者, 参数1, 参数2, ...)

3)以apply() 方法调用

apply是直接传递函数的实参，但是和call不一样，是将参数封装在一个数组中，以数组为参数：

用法： 函数.apply(调用者,[ 参数1, 参数2, ...])

2、this指向

• this的指向在函数定义时不能确定，只有函数执行时才能确定

• this的指向是调用函数的那个对象，this永远指向函数运行时所在的对象

函数的调用方式不一致，this指向不同的对象：

• 直接函数名调用的时候，this永远指向window
• 以方法的形式调用时，this是调用方法的那个对象
• 以构造函数的形式调用时，this是新创建的那个对象
• 使用call和apply调用时，this是指定的那个对象

注：箭头函数的this指向，this等同于上一层的非箭头函数的this值或者全局对象（window 或 undefined）（严格模式下this的值是undefined）

3、改变this指向

1、call()

用法： 函数.call(指向谁, 参数1, 参数2, ...)

function fn (a, b) {
    console.log(this)
    console.log(this.name)
}
var obj = {
    name: 'zhang san'
}

fn(1, 2);
fn.call(obj, 1, 2);

2、apply()

用法： 函数.apply(指向谁, [ 参数1, 参数2, ...])

function fn (a, b) {
    console.log(this)
    console.log(this.name)
}
var obj = {
    name: 'zhang san'
}

fn(1, 2);
fn.apply(obj, [1, 2]);

3、bind()

不直接调用函数，会返回一个新的函数，this指向的是bind的函数

function fn (a, b) {
    console.log(this)
    console.log(this.name)
}
var obj = {
    name: 'zhang san'
}

fn(1, 2);
let newFn = fn.bind(obj, 1, 2);
newFn();
// fn.bind(obj, 1, 2)()