账号密码登录
微信安全登录
微信扫描二维码登录

登录后绑定QQ、微信即可实现信息互通

手机验证码登录
找回密码返回
邮箱找回 手机找回
注册账号返回
其他登录方式
分享
  • 收藏
    X
    一道关于this指向的前端面试题
    37
    0

    前端笔试中遇到这么一道考this指向的题,求解答为什么x.x 调用结果会是undefined?

    相关Code

        function a(xx) {
            this.x = xx;
            return this;
        }
    
        var x = a(5);
        var y = a(6);
    
        console.log(x.x);    //undefined
        console.log(y.x);    //6
    
    
    
    0
    打赏
    收藏
    点击回答
        全部回答
    • 0
    • 孤ジ离人群 普通会员 1楼

      题目:如何在JavaScript中正确使用this关键字?

      在JavaScript中,this关键字在函数、方法和对象实例中都有其特定的指向方式,掌握正确的使用方式对于理解和维护代码有着重要的意义。以下是一些常见情况下的this指向问题及其解决方案:

      1. 在函数中使用this

      在函数内部,this关键字默认指向函数自身。例如:

      ```javascript function greet(name) { console.log("Hello, " + name + "!"); }

      greet("World"); // 输出:Hello, World! ```

      greet函数调用时,this会指向调用它的对象,即全局对象或window对象,因此当greet执行完成后,它会打印出Hello, World!

      1. 在对象实例中使用this

      对象的实例都有一个this对象,它在函数内部和全局作用域中都有对应的副本。当在对象实例上调用方法或属性时,this将自动更新为该对象的引用。例如:

      ```javascript let obj = { name: "John", greet: function() { console.log("Hello, " + this.name + "!"); } };

      obj.greet(); // 输出:Hello, John! ```

      obj.greet方法调用时,this将指向obj对象,因为objgreet方法的调用者。

      1. 使用callapply方法传递this

      callapply方法允许你传递一个或多个上下文对象到函数或方法中。call方法使用当前函数的上下文对象作为thisapply方法使用传递的上下文对象的this作为this,并共享相同的this值。例如:

      ``javascript function sayHello(name) { console.log(Hello, ${name}!`); }

      sayHello.call(this, "World"); // 输出:Hello, World! sayHello.apply(this, { name: "John" }); // 输出:Hello, John! ```

      sayHello函数调用时,this将共享当前函数的上下文对象,因此在sayHello.call(this, "World")中,this将指向全局对象。

      1. 通过bind方法绑定this

      bind方法允许你创建一个新函数,该函数在调用时绑定给定的this值。例如:

      ``javascript function greeting(name) { console.log(Hello, ${name}!`); }

      greeting.prototype.sayHello = function(name) { console.log(Hello, ${name}!); }

      let obj = { name: "John", greet: greeting.prototype.sayHello };

      obj.greet("World"); // 输出:Hello, World! ```

      greeting.prototype.sayHello方法中,我们通过this指向greeting对象,然后通过greeting.prototype引用greeting对象的sayHello方法。

      1. 多重作用域的this

      在异步编程中,this在不同的作用域中具有不同的指向。当函数返回一个Promise或async函数时,this的指向由该Promise或async函数决定。例如:

      ``javascript async function greet(name) { return new Promise((resolve, reject) => { setTimeout(() => { resolve(Hello, ${name}!`); }, 1000); }); }

      let obj = await greet("World"); ```

      greet函数返回Promise后,this的指向由该Promise决定,因此obj在异步编程中具有与greet函数相同的功能,即输出Hello, World!

      1. 在箭头函数中使用this

      箭头函数使用this关键字来指向函数的参数或返回值,以及与上下文相关的上下文对象。例如:

      ``javascript function greet(name) { console.log(Hello, ${name}!`); }

      const obj = greet("World"); console.log(obj.name); // 输出:World console.log(obj.greet); // 输出:Hello, World! ```

      greet函数中,this指向其参数name,然后指向全局对象window

      以上就是在JavaScript中正确使用this关键字的一些常见情况和解决方案,掌握这些知识对于理解和维护代码有着重要的意义。

    更多回答
    扫一扫访问手机版
    • 回到顶部
    • 回到顶部