博客
关于我
2024前端面经---改变this指向问题(call、apply、bind)_apply改变this
阅读量:799 次
发布时间:2023-04-17

本文共 2440 字,大约阅读时间需要 8 分钟。

什么是this指向

理解this指向是学习JavaScript的重要基础之一。在编写函数或处理对象方法时,this关键字的行为可能会让人感到困惑。需要注意的是,this的指向会因函数类型的不同而有所差异。

一、this的定义与特点

this是一个特殊的关键字,它的值取决于如何调用函数。具体表现为:

  • 普通函数:在未被调用时,this默认指向window对象。如果函数被某个对象调用,this则指向调用者对象。
  • 箭头函数(ES6):箭头函数的this指向父级作用域。如果箭头函数被嵌套在另一个函数中,this则会指向外层函数;如果没有外层函数,this则指向window对象。
  • 二、this指向的实际场景

    通过以下几个场景可以更直观地理解this的行为:

  • 直接在控制台使用

    console.log(this); // window

    直接在控制台输入this会打印window对象。

  • 定时器回调函数

    setTimeout(function() {    console.log(this); // window}, 2000);

    定时器执行的回调函数中,this仍然指向window对象。

  • 事件处理函数

    click

    在事件处理中,this指向触发事件的DOM元素。

  • 对象方法的调用

    let obj = {    name: 'lebron james',    play: function() {        console.log(this.name); // lebron james    }};obj.play(); // this指向obj对象

    当对象方法被调用时,this指向调用者对象。

  • 箭头函数的this指向

    let obj1 = {    name: 'davis',    plays: () => {        console.log(this); // window    }};obj1.plays(); // this指向window对象

    箭头函数的this指向会向外层寻找作用域,如果没有外层函数,则指向window对象。

  • 三、改变this指向的方法

    在实际开发中,有时需要改变this指向的默认行为,以适应特定的需求。常用的方法包括call()apply()bind()

  • call()方法

    let obj1 = {    name: 'james',    getName1: function(a, b, c) {        console.log(`getName ${this.name}`); // getName davis        console.log(`参数:${a},${b},${c}`); // 参数:1,2,3    }};let obj2 = {    name: 'davis',    getName2: function() {        console.log(`getName ${this.name}`); // davis    }};obj1.getName1.call(obj2); // this指向obj2obj1.getName1.call(obj2, 1, 2, 3); // 可以传入多个参数
    • call()方法用于执行函数,并将this指向指定的对象。第一个参数为目标对象,后续参数会传递给函数。
  • apply()方法

    let obj1 = {    name: 'james',    getName1: function(a, b, c) {        console.log(`getName ${this.name}`); // getName davis        console.log(`参数:${a},${b},${c}`); // 参数:1,2,3    }};let obj2 = {    name: 'davis',    getName2: function() {        console.log(`getName ${this.name}`); // davis    }};obj1.getName1.apply(obj2, [1, 2, 3]); // this指向obj2
    • apply()方法与call()类似,但只能传入两个参数,第二个参数必须是数组。
  • bind()方法

    let obj1 = {    name: 'james',    getName1: function(a, b, c) {        console.log(`getName ${this.name}`); // getName davis        console.log(`参数:${a},${b},${c}`); // 参数:1,2,3    }};let obj2 = {    name: 'davis',    getName2: function() {        console.log(`getName ${this.name}`); // davis    }};const boundFunc = obj1.getName1.bind(obj2);boundFunc(); // this指向obj2
    • bind()方法用于将this指向指定的对象,返回一个新的函数。bind()方法的优势在于可以在函数定义时就指定this的值。
  • 四、总结

    this指向的行为在JavaScript中具有重要意义,其值取决于函数的调用方式和作用域。通过理解this的默认行为和掌握call()apply()bind()等方法,可以更灵活地控制函数执行时的this指向,从而提升代码的可读性和维护性。在实际开发中,合理使用这些方法可以帮助我们更好地管理对象和函数的行为。

    转载地址:http://fxgfk.baihongyu.com/

    你可能感兴趣的文章
    MySQL内存表使用技巧
    查看>>
    MySQL再叙(体系结构、存储引擎、索引、SQL执行过程)
    查看>>
    mysql出现错误的解决办法
    查看>>
    MySQL函数
    查看>>
    mysql函数汇总之字符串函数
    查看>>
    mysql函数汇总之数学函数
    查看>>
    mysql函数汇总之日期和时间函数
    查看>>
    mysql函数汇总之条件判断函数
    查看>>
    mysql函数汇总之系统信息函数
    查看>>
    MySQL函数简介
    查看>>
    mysql函数遍历json数组
    查看>>
    MySQL函数(转发)
    查看>>
    mysql分区表
    查看>>
    MySQL分层架构与运行机制详解
    查看>>
    mysql分库分表中间件简书_MySQL分库分表
    查看>>
    MySQL分库分表会带来哪些问题?分库分表问题
    查看>>
    MySQL分组函数
    查看>>
    MySQL分组查询
    查看>>
    Mysql分表后同结构不同名称表之间复制数据以及Update语句只更新日期加减不更改时间
    查看>>
    mySql分页Iimit优化
    查看>>