博客
关于我
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以下日期函数正确的_mysql 日期函数
    查看>>
    mysql以服务方式运行
    查看>>
    mysql优化--索引原理
    查看>>
    mysql优化概述(范式.索引.定位慢查询)
    查看>>
    MySQL优化配置详解
    查看>>
    Mysql优化高级篇(全)
    查看>>
    mysql会员求积分_MySql-统计所有会员的最高前10次的积分和
    查看>>
    mysql会对联合索性排序优化_MySQL索引优化实战
    查看>>
    MySQL作为服务端的配置过程与实际案例
    查看>>
    Mysql使用命令行备份数据
    查看>>
    MySQL保姆级教程(SQL语法基础篇)从小白到高手的进阶指南,收藏这一篇就够了
    查看>>
    MySQL修改root密码的多种方法
    查看>>
    mysql修改一列属性
    查看>>
    MySQL修改密码报错ERROR 1396 (HY000): Operation ALTER USER failed for ‘root‘@‘localhost‘
    查看>>
    Mysql全局优化参数
    查看>>
    MySQL全文索引实现简单版搜索引擎
    查看>>
    MySQL全面瓦解:安装部署与准备
    查看>>
    mysql共享锁与排他锁
    查看>>
    MySQL内存表使用技巧
    查看>>