[JavaScript知识库] this/call/apply/bind

开发: C++知识库 Java知识库 JavaScript Python PHP知识库人工智能区块链大数据移动开发嵌入式开发工具数据结构与算法开发测试游戏开发网络协议系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑笔记本显卡显示器固态硬盘硬盘耳机手机 iphone vivo oppo 小米华为单反装机图拉丁

-> JavaScript知识库 -> this/call/apply/bind -> 正文阅读

[JavaScript知识库]this/call/apply/bind

this

对this的理解

this是执行上下文中的一个属性，它指向最后一次调用这个方法的对象。

call()、apply()、bind()

例子1:

const name = "小王"
const age = 17

const obj = {
  name: "校长",
  objAge: this.age,
  func: function () {
    console.log(this.name + "年龄" + this.age)
  }
}

调用obj.func()输出”校长年龄undefined“。

例子2：

const name = "盲僧"
function shows(){
  console.log(this.name)
}

调用shows()输出“盲僧”
比较上边两个例子this的差别，第一个this指向obj，第二个this指向window。

1. call、apply、bind都是用来重定义this这个对象的
例如：

const name = "小王", age = 12
const obj = {
  name: "小张",
  objAge: this.age,
  func: function () {
    console.log(this.name + "年龄" + this.age);
  }
}

const db = {
  name: "约德尔人",
  age: 99,
}

obj.func.call(db)
obj.func.apply(db)
obj.func.bind(db)()

bind返回的是一个函数，必须调用它才会执行。

2. 对比call、apply、bind传参情况

const name = "小王", age = 12
const obj = {
  name: "小张",
  objAge: this.age,
  func: function (fm, t) {
    console.log(this.name + "年龄" + this.age, "来自" + fm + "去往" + t);
  }
}

const db = {
  name: "约德尔人",
  age: 99,
}

obj.func.call(db,'成都','上海')；　　　　 // 德玛 年龄 99  来自 成都去往上海
obj.func.apply(db,['成都','上海']);      // 德玛 年龄 99  来自 成都去往上海  
obj.func.bind(db,'成都','上海')();       // 德玛 年龄 99  来自 成都去往上海
obj.func.bind(db,['成都','上海'])();　　 // 德玛 年龄 99  来自 成都, 上海去往 undefined

call、bind、apply这三个函数的第一个参数都是this的指向对象，第二个参数差别就来了：
call可以传入多个参数，每个参数用逗号相隔。
apply的所有参数都要放在一个数组中。
bind除了返回的是函数外，其余都和call是一样的。

this指向问题

this是执行上下文的一个属性，它指向最后一次调用这个方法的对象。可以通过下面四种方法来判断：

函数调用模式：当一个函数不是一个对象的属性时，直接作为函数来调用，那么this指向全局对象。

const obj = {
  a: 2,
  b: {
    c: function test() {
      function test2() {
        console.log(this);   // window
      }
      test2()   // 直接作为函数来调用
    }
  }
}

obj.b.c()

方法调用模式：如果一个函数作为一个对象的方法来调用时，this指向这个对象。
构造器调用模式：如果一个函数用new调用时，函数执行前会新创建一个对象，this指向这个新创建的对象。
apply、call、bind调用模式：apply接收两个参数，一个是this绑定的对象，一个是参数数组。call方法接收多个参数一个是this绑定的对象，其余的时传入的参数。bind方法除了返回的是函数外，其余的都和call一样。