博客
关于我
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学习总结(55)——MySQL 语句大全再温习
    查看>>
    Mysql学习总结(56)——MySQL用户管理和权限设置
    查看>>
    Mysql学习总结(57)——MySQL查询当天、本周、本月、上周、本周、上月、距离当前现在6个月数据
    查看>>
    Mysql学习总结(58)——深入理解Mysql的四种隔离级别
    查看>>
    Mysql学习总结(59)——数据库分库分表策略总结
    查看>>
    Mysql学习总结(5)——MySql常用函数大全讲解
    查看>>
    Mysql学习总结(60)——并发量大、数据量大的互联网业务数据库设计规范总结
    查看>>
    Mysql学习总结(61)——MySQL优化之DBA级优化整理汇总
    查看>>
    Mysql学习总结(62)——MySQL连接com.mysql.jdbc.exceptions.jdbc4.CommunicationsException: Communications link问题
    查看>>
    Mysql学习总结(63)——Mysql数据库架构方案选择与分析
    查看>>
    Mysql学习总结(64)——Mysql配置文件my.cnf各项参数解读
    查看>>
    Mysql学习总结(65)——项目实战中常用SQL实践总结
    查看>>
    Mysql学习总结(66)——设置MYSQL数据库编码为UTF-8
    查看>>
    Mysql学习总结(67)——MYSQL慢查询日志
    查看>>
    Mysql学习总结(68)——MYSQL统计每天、每周、每月、每年数据 SQL 总结
    查看>>
    Mysql学习总结(69)——Mysql EXPLAIN 命令使用总结
    查看>>
    Mysql学习总结(6)——MySql之ALTER命令用法详细解读
    查看>>
    Mysql学习总结(70)——MySQL 优化实施方案
    查看>>
    Mysql学习总结(71)——MySQL 重复记录查询与删除总结
    查看>>
    Mysql学习总结(71)——数据库介绍(MySQL安装 体系结构、基本管理)再回顾
    查看>>