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的知识点将帮助你在前端面试中脱颖而出!祝你顺利上岸!

相关推荐
拾光拾趣录3 分钟前
组件封装的⼀些基本准则
前端·前端工程化
CAD老兵4 分钟前
TypeScript 中如何转换两个具有相同值的枚举类型?
前端
1024小神8 分钟前
Cocos游戏开发中,检测两个物体碰撞,并实现物理反弹逻辑
前端·javascript
拾光拾趣录10 分钟前
Vue Router 执行顺序
前端·vue.js·vue-router
前端权10 分钟前
Vue3 多行文本溢出隐藏与展开收起功能实现总结
前端·vue.js
用户38022585982411 分钟前
vue3源码解析:调度器
前端·vue.js
一一一87121 分钟前
javaScript数据存储, 对象和原型与原型链
javascript
Dolphin_海豚34 分钟前
electron windows 无边框窗口最大化时的隐藏边框问题
前端·electron·api
梦想CAD控件36 分钟前
WEB CAD与Mapbox结合实现在线地图和CAD编辑(CGCS2000)
前端·javascript·vue.js