JavaScript 函数的四种调用模式(分享)

1. 函数模式

function fn(){
  console.log("我是函数调用")
}

fn()

2. 方法模式

let obj = {
  fn(){
  	console.log("我是方法调用")
  }
}

obj.fn()

3. 构造器模式

function Person(name){
  this.name = name
}
// 构造器模式调用
let p = new Person("小红")

4. 上下文模式(显式绑定)

• apply()、call()，改变this指向，同时也会调用函数
• bind()，改变this指向，返回这个函数

function fn1(){
  console.log(this) // 这个时候的this指向window
}

let obj = {}

// 把fn1的this指向obj
fn1.apply(obj) // 打印obj

4.1 call 的基本使用

// call(要改变的this指向, 参数一, 参数二, 参数三)
function fn(a, b, c) {
  this.count = a + b + c
}

let obj = {}

// 把fn的this指向了obj
fn.call(obj, 3, 6, 9)

console.log(obj); // {count: 18}

4.2 apply 的基本使用

// apply(要改变的this指向, [参数一, 参数二, 参数三])
function fn(a, b, c) {
  this.count = a + b + c
}

let obj = {}

fn.apply(obj, [3, 6, 9])

console.log(obj); // {count: 18}

4.3 bind 的基本使用

// bind(要改变的this指向, 参数一, 参数二, 参数三)
function fn(a, b, c) {
  this.count = a + b + c
}

let obj = {}

// bind会返回一个函数，并不会调用，需要自己去调用
let fn1 = fn.bind(obj, 3, 6, 9)
fn1()

// 参数也可以这样去传
// 1. fn.bind(obj, 3, 6, 9)()
// 2. fn.bind(obj)(3, 6, 9)
// 3. let fn1 = fn.bind(obj);  fn1(3, 6, 9)

console.log(obj); // {count: 18}

// 注意：bind绑定的函数改变this指向后，除了new以外
// 再次call、apply、bind都无法更改this指向了
// call 和 apply没有这个问题

4.4 连续点call的问题

// 在了解这个问题的时候需要熟悉call的作用
// call会调用点他的函数并改变 this 指向
function fn1() {
  console.log(111)
}

function fn2() {
  console.log(222);
}

// 这个时候是fn1点call，fn1的this指向fn2，但是还是fn1指向
fn1.call(fn2)                // 111
// call本身也是一个函数，call点call的时候，前面的call的调用this指向就指向了fn2
fn1.call.call(fn2)           // 222
// 后面再多也是同理，点call不执行它就只是一个函数，每一个函数都会继承原型上的call方法
// 只有到点call括号的时候才会改变调用指向
fn1.call.call.call(fn2)      // 222
fn1.call.call.call.call(fn2) // 222

4.5 new与显式绑定优先级

• new 的优先级要大于显式绑定，通过 bind 就可以看出
• 但是 call 和 apply 是直接执行，所以 new 还来不及更改