看代码说输出 ---- 浅析 this

我们在面试中经常会被问到一些题目:"这里的 this.xxx 指的是什么?"

其实面试官并不是想要问你 this.xxx 而是想要问 this 指的是什么。

那么接下来我先简要介绍一下this,再拿几道例题来聊聊常见的 this 指向问题。

简要介绍 this

this是JavaScript中的一个关键字,它在函数被调用时自动定义。this的值在函数调用时确定,并且在函数执行过程中不能更改。它引用的是调用函数的对象------由于JavaScript允许函数在多个上下文中使用,因此this的具体值取决于函数的调用方式。

在JavaScript中,this主要有以下几种使用情况:

  1. 全局作用域或函数外部 :在非严格模式下,this指向全局对象(在浏览器中,这通常是window对象)。在严格模式下,this是undefined。
  2. 普通函数调用 :当一个函数作为一个普通函数调用时(即不是作为对象的方法或者使用new关键字调用),this通常指向全局对象。但是在严格模式下,它会是undefined。
  3. 作为对象的方法调用 :当一个函数作为对象的方法被调用时,this指向这个调用方法的对象。
  4. 使用new关键字调用 :当一个函数使用new关键字调用时,JavaScript会创建一个新的空对象,并将这个新对象的原型链接到构造函数的prototype对象,并将this绑定到这个新对象上。
  5. 使用call、apply或bind方法 :JavaScript的函数对象提供了call、apply和bind方法,可以用来改变函数的执行上下文,即this的指向。
  6. 箭头函数 :箭头函数中的this是继承自外部的上下文,而不是在箭头函数被调用时创建的新的上下文。

来几道题

Q1

js 复制代码
var name = 'Bob';
var a = {
    name: 'Mary',
    getName: () => {
        console.log(this.name);
    }
}
a.getName();
a.getName.call();

这里的答案是 BobBob,前者是因为箭头函数内的this与外部的this是一致的,所以这里的 this 直接相当于 window,而后者是因为.call的调用没法改变箭头函数。

Q2

js 复制代码
var name = 'Bob';
var a = {
    name: 'Mary',
    getName: function() {
        console.log(this.name);
    }
}
a.getName();
a.getName.call();

这里的答案是 MaryBob,第一个值直接适用于我们介绍this的第三点 ==> 作为对象的方法调用,而第二个为什么会是Bob呢,别急,我们一个一个来说,我们调用了.call,那么我们可以看一下call的简略实现

js 复制代码
Function.prototype.call = function(context, ...args) {
    context = context || window;
    args = args ? args : [];
    const key = Symbol();
    context[key] = this;
    const result = context[key](...args);
    delete context[key];
    return result;
}

call的简略实现我们可以知道,如果说我们什么都不调用,这里默认绑定的是 window,所以第二个值是返回的 Bob,现在你明白了莫。

相关推荐
袁煦丞2 分钟前
【局域网秒传神器】LocalSend:cpolar内网穿透实验室第418个成功挑战
前端·程序员·远程工作
江城开朗的豌豆3 分钟前
Vuex数据突然消失?六招教你轻松找回来!
前端·javascript·vue.js
好奇心笔记13 分钟前
ai写代码随机拉大的,所以我准备给AI出一个设计规范
前端·javascript
江城开朗的豌豆13 分钟前
Vue状态管理进阶:数据到底是怎么"跑"的?
前端·javascript·vue.js
用户214118326360214 分钟前
dify案例分享-Dify v1.6.0 重磅升级:双向 MCP 协议引爆 AI 生态互联革命
前端
程序员海军15 分钟前
AI领域又新增协议: AG-UI
前端·openai·agent
我想说一句17 分钟前
React待办事项开发记:Hook魔法与组件间的悄悄话
前端·javascript·前端框架
真夜17 分钟前
CommonJS与ESM
前端·javascript
LaoZhangAI18 分钟前
GPT-image-1 API如何传多图:开发者完全指南
前端·后端
G等你下课19 分钟前
从点击到执行:如何优雅地控制高频事件触发频率
前端·javascript·面试