博客
关于我
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底层概述—4.InnoDB数据文件
    查看>>
    MySQL底层概述—5.InnoDB参数优化
    查看>>
    MySQL底层概述—6.索引原理
    查看>>
    MySQL底层概述—7.优化原则及慢查询
    查看>>
    MySQL底层概述—8.JOIN排序索引优化
    查看>>
    MySQL底层概述—9.ACID与事务
    查看>>
    Mysql建立中英文全文索引(mysql5.7以上)
    查看>>
    mysql建立索引的几大原则
    查看>>
    Mysql建表中的 “FEDERATED 引擎连接失败 - Server Name Doesn‘t Exist“ 解决方法
    查看>>
    mysql开启bin-log日志,用于canal同步
    查看>>
    MySQL开源工具推荐,有了它我卸了珍藏多年Nactive!
    查看>>
    MySQL异步操作在C++中的应用
    查看>>
    MySQL引擎讲解
    查看>>
    Mysql当前列的值等于上一行的值累加前一列的值
    查看>>
    MySQL当查询的时候有多个结果,但需要返回一条的情况用GROUP_CONCAT拼接
    查看>>
    MySQL必知必会(组合Where子句,Not和In操作符)
    查看>>
    MySQL必知必会总结笔记
    查看>>
    MySQL快速入门
    查看>>
    MySQL快速入门——库的操作
    查看>>
    mysql快速复制一张表的内容,并添加新内容到另一张表中
    查看>>