JavaScript中this的指向和改变this指向的方法 - 2024最新版前端秋招面试短期突击面试题【100道】

JavaScript中this的指向和改变this指向的方法 - 2024最新版前端秋招面试短期突击面试题【100道】 🔍

在JavaScript中,this关键字是一个非常重要的概念,它指向函数执行时的上下文对象。理解this的指向规则和改变this指向的方法,将帮助你更好地编写 JavaScript 代码。以下是关于this的详细讲解。

this的指向规则 📌

  1. 默认绑定 :独立函数调用时,this指向全局对象(在非严格模式下)或undefined(在严格模式下)。

    javascript 复制代码
    function foo() {
        console.log(this); // 非严格模式:window 或 global;严格模式:undefined
    }
    foo();
  2. 隐式绑定 :当函数作为对象的方法被调用时,this指向该对象。

    javascript 复制代码
    var obj = {
        method: function() {
            console.log(this); // 指向obj对象
        }
    };
    obj.method();
  3. 显式绑定 :通过callapplybind方法可以明确地设置函数执行时的this指向。

    javascript 复制代码
    function foo() {
        console.log(this);
    }
    var obj = {};
    foo.call(obj); // this指向obj
  4. new绑定 :使用new关键字调用构造函数时,this指向新创建的对象。

    javascript 复制代码
    function Foo() {
        this.bar = 'bar';
    }
    var baz = new Foo();
    console.log(baz.bar); // 输出 'bar'

改变this指向的方法 🔄

  1. call方法 :调用一个函数并指定this的值和参数。

    javascript 复制代码
    function foo(a, b) {
        console.log(this, a, b);
    }
    foo.call({x: 1}, 'arg1', 'arg2'); // this指向{x: 1},参数为'arg1'和'arg2'
  2. apply方法 :与call类似,但参数以数组的形式传递。

    javascript 复制代码
    function foo(a, b) {
        console.log(this, a, b);
    }
    foo.apply({x: 1}, ['arg1', 'arg2']); // this指向{x: 1},参数为数组['arg1', 'arg2']
  3. bind方法 :创建一个新的函数,并预设this的值,但不立即调用。

    javascript 复制代码
    function foo(a, b) {
        console.log(this, a, b);
    }
    var bar = foo.bind({x: 1}); // 创建新函数bar,预设this为{x: 1}
    bar('arg1', 'arg2'); // 调用bar时,this指向{x: 1}
  4. 箭头函数 :箭头函数不绑定自己的this,它捕获其所在上下文的this值。

    javascript 复制代码
    var obj = {
        method: function() {
            setTimeout(() => {
                console.log(this); // this指向obj对象
            }, 1000);
        }
    };
    obj.method();

总结 📝

了解this的工作原理是掌握JavaScript的关键之一,特别是在编写复杂的应用程序时。正确使用this可以避免许多常见的问题和错误。在实际开发中,合理选择不同的绑定方法,可以让你的代码更加灵活和易于维护。

掌握这些this的知识点将帮助你在前端面试中脱颖而出!祝你顺利上岸!

相关推荐
鸡吃丸子7 分钟前
常见的实时通信技术(轮询、sse、websocket、webhooks)
前端·websocket·状态模式
默心29 分钟前
运维工程师面试经验分享
运维·经验分享·面试
胡斌附体34 分钟前
vue添加loading后修复页面渲染问题
前端·javascript·vue.js·渲染·v-if·异步加载
Dontla44 分钟前
Webpack DefinePlugin插件介绍(允许在编译时创建JS全局常量,常量可以在源代码中直接使用)JS环境变量
运维·javascript·webpack
酷爱码1 小时前
css中的 vertical-align与line-height作用详解
前端·css
沐土Arvin2 小时前
深入理解 requestIdleCallback:浏览器空闲时段的性能优化利器
开发语言·前端·javascript·设计模式·html
专注VB编程开发20年2 小时前
VB.NET关于接口实现与简化设计的分析,封装其他类
java·前端·数据库
小妖6662 小时前
css 中 content: “\e6d0“ 怎么变成图标的?
前端·css
L耀早睡3 小时前
mapreduce打包运行
大数据·前端·spark·mapreduce
咖啡の猫3 小时前
JavaScript基础-创建对象的三种方式
开发语言·javascript·ecmascript