7个关于"this"面试题,你能回答上来吗?

巴拉米 等级 350 0 0

作者:Shadeed
译者:前端小智
来源:dmitripavlutin

点赞再看,微信搜索大迁世界,B站关注前端小智这个没有大厂背景,但有着一股向上积极心态人。本文 GitHub https://github.com/qq44924588... 上已经收录,文章的已分类,也整理了很多我的文档,和教程资料。

最近开源了一个 Vue 组件,还不够完善,欢迎大家来一起完善它,也希望大家能给个 star 支持一下,谢谢各位了。

github 地址:https://github.com/qq44924588...

在JavaScript中,this 表示函数调用上下文。this难点在于它有一个复杂的行为,这也是面试中经常被考的点。

本文列举7个关于this有趣的面试问题:

  • 问题1:变量 vs 属性
  • 问题2:Cat 的名字
  • 问题3:延迟打招呼
  • 问题4:人工方法
  • 问题5:问候和告别
  • 问题6:棘手的 length
  • 问题7:调用参数

问题1:变量 vs 属性

下面的打印结果是啥:

const object = {
  message: 'Hello, World!',

  getMessage() {
    const message = 'Hello, Earth!';
    return this.message;
  }
};

console.log(object.getMessage()); // ??

答案:'Hello, World!'

object.getmessage()是一个方法调用,此时的 this 表示 object

方法还有一个变量声明const message = 'Hello, Earth!'。这个变量都不会影响this.message的值。

问题2:Cat 的名字

下面代码打印什么:

function Pet(name) {
  this.name = name;

  this.getName = () => this.name;
}

const cat = new Pet('Fluffy');

console.log(cat.getName()); // What is logged?

const { getName } = cat;
console.log(getName());     // What is logged?

答案:'Fluffy''Fluffy'

当函数作为构造函数new Pet('Fluffy')调用时,构造函数内部的this等于构造的对象

Pet构造函数中的this.name = name表达式在构造的对象上创建name属性。

this.getName = () => this.name在构造的对象上创建方法getName。 而且由于使用了箭头函数,箭头函数内部的this值等于外部作用域的this值, 即 Pet

调用cat.getName()以及getName()会返回表达式this.name,其计算结果为'Fluffy'

问题3:延迟打招呼

下面代码打印什么:

const object = {
  message: 'Hello, World!',

  logMessage() {
    console.log(this.message); // What is logged?
  }
};

setTimeout(object.logMessage, 1000);

答案:1秒后,打印 undefined

尽管setTimeout()函数使用object.logMessage作为回调,但仍将object.logMessage用作常规函数,而不是方法。

在常规函数调用期间,this等于全局对象,即浏览器环境中的 window。

这就是为什么logMessage方法中的 this.message等于 window.message,即undefined

问题4:人工方法

如何调用logMessage函数,让它打印 "Hello, World!" ?

 message: 'Hello, World!'
};

function logMessage() {
  console.log(this.message); // "Hello, World!"
}

答案:

至少有 3 种方式,可以做到:

 message: 'Hello, World!'
};

function logMessage() {
  console.log(this.message); // logs 'Hello, World!'
}

// Using func.call() method
logMessage.call(object);

// Using func.apply() method
logMessage.apply(object);

// Creating a bound function
const boundLogMessage = logMessage.bind(object);
boundLogMessage();

问题5:问候和告别

下面代码打印什么:

const object = {
  who: 'World',

  greet() {
    return `Hello, ${this.who}!`;
  },

  farewell: () => {
    return `Goodbye, ${this.who}!`;
  }
};

console.log(object.greet());    // What is logged?
console.log(object.farewell()); // What is logged?

答案: 'Hello, World!''Goodbye, undefined!'

当调用object.greet()时,在greet()方法内部,this值等于 object,因为greet是一个常规函数。因此object.greet()返回'Hello, World!'

但是farewell()是一个箭头函数,箭头函数中的this值总是等于外部作用域中的this值。

farewell()的外部作用域是全局作用域,它是全局对象。因此object.farewell()实际上返回'Goodbye, ${window.who}!',它的结果为'Goodbye, undefined!'

问题6:棘手的 length

下面代码打印什么:

var length = 4;
function callback() {
  console.log(this.length); // What is logged?
}

const object = {
  length: 5,
  method(callback) {
    callback();
  }
};

object.method(callback, 1, 2);

答案: 4

callback()是在method()内部使用常规函数调用来调用的。由于在常规函数调用期间的this值等于全局对象,所以this.length结果为window.length。。

第一个语句var length = 4,处于最外层的作用域,在全局对象 window 上创建一个属性length

问题7:调用参数

下面代码打印什么:

var length = 4;
function callback() {
  console.log(this.length); // What is logged?
}

const object = {
  length: 5,
  method() {
    arguments[0]();
  }
};

object.method(callback, 1, 2);

答案: 3

obj.method(callback, 1, 2)被调用时有3个参数:callback, 12。结果,method()内部的参数特殊变量是如下结构的数组类对象:

{
  0: callback,
  1: 1, 
  2: 2, 
  length: 3 
}

因为arguments[0]()是arguments对象上的回调的方法调用,所以回调内部的参数等于arguments。 所以 callback()中的this.lengtharguments.length相同,即3

~ 完,我是小智,我要去刷碗了,我们下期见!


代码部署后可能存在的BUG没法实时知道,事后为了解决这些BUG,花了大量的时间进行log 调试,这边顺便给大家推荐一个好用的BUG监控工具 Fundebug

原文:https://dmitripavlutin.com/ja...

交流

文章每周持续更新,可以微信搜索「 大迁世界 」第一时间阅读和催更(比博客早一到两篇哟),本文 GitHub https://github.com/qq449245884/xiaozhi 已经收录,整理了很多我的文档,欢迎Star和完善,大家面试可以参照考点复习,另外关注公众号,后台回复福利,即可看到福利,你懂的。

7个关于

收藏
评论区

相关推荐

utils.js 文件 工具类 方法分享
javascript / 时间解析工具 @param {(Object|string|number)} time @param {string} cFormat @returns {string | null} / export function parseTime(time, cFormat) { if (arguments.leng
同学,你这简历上没项目啊!
大家好,我是小五 同学,刚毕业或者转行去求职数据分析师的时候,你遭遇过这样的尴尬怪圈吗? (https://imghelloworld.osscnbei
一篇文章弄明白Javascript
在一片混沌中,一个叫Function的函数开天辟地,自己创建了自己。于是,一个叫JavaScript的星球诞生了。 图一:创建了自己的Function 新诞生
7个关于"this"面试题,你能回答上来吗?
作者:Shadeed 译者:前端小智 来源:dmitripavlutin 点赞再看,微信搜索【大迁世界(https://mp.weixin.qq.com/s/sY9ufGGKfcdaAQ7KJQs3HA)】,B站关注【前端小智(https://space.bilibili.com/31089477)】这个没有大厂背景,但有着一股向上积
Python中JSON的基本使用_Just do it !
JSON (JavaScript Object Notation) 是一种轻量级的数据交换格式。Python3 中可以使用 json 模块来对 JSON 数据进行编解码,它主要提供了四个方法: dumps、dump、loads、load。 dump和dumps dump和dumps对python对象进行序列化。将一个Python对象
你不知道的JSON Schema
1、JSON?JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式。具有简洁、可读性高、支持广泛的特点。下面我们用JSON描述了一个商品的基本信息,包含了JSON的一些基本数据的类型 。json{ "productId": 1, "
前端面试题自检 JS CSS 部分
JS类型 JavaScript的简单数据类型Number , String , Boolean , Undefined , Null , Symbol typeof 操作符的返回值 number string boolean undefined object function
你的镜像安全吗?
你的镜像安全吗?与传统的服务器和虚拟机相比,Docker容器为我们工作提供了更安全的环境。容器中可以使我们的应用环境组件实现更小,更轻。每个应用的组件彼此隔离并且大大减少了攻击面。这样即使有人入侵了您的应用,也会最大程度限制被攻击的程度,而且入侵后,利用漏洞传播攻击更难。不过,我们还是需要最大程度了解Docker技术本身的存在的安全隐患,这样
程序员怎样写出搞垮公司的代码?
1、乱写注释 注释就像内裤,外面看不见,但是很重要。 注释要严谨,不能有明显的漏洞。如果你的内裤有漏洞,你不尴尬吗?当然了,如果你实力够强大,别人会尴尬。 2、代码和显示不一致 界面上是Post code,代码里是Zip code。看代码看到怀疑人生! 所以说年轻人,你只看到了第二层,你以为我在第一层,实际上我在第五层,你明白我在讲什么吗?
您知道JavaScript中的0.1 + 0.2 ≠ 0.3吗?
嘿👋自从我使用JavaScript已有一段时间了。昨天,我经历了一个非常奇怪的行为。同时我真的很困惑和惊讶😕。最初我以为,我发现了一个论点再次诅咒JavaScript。但是,经过一些研究,我发现这不是错误。这是数学,也是计算机处理数字的方式。好吧,还有其他一些怪异的东西 幕后发生了什么?它背后的简单逻辑是计算机使用以2为基的(二进制)浮点数系统。让我们用一个
PhantomJS这几项功能你用过吗?
一、下载下载链接二、解压安装包直接解压即可三、配置环境变量找到高级系统设置,打开它,出现以下图。点击环境变量。分别点击编辑按钮分别新建添加当初的解压路径,到bin文件夹。点击确定。这样,环境变量配置好了,可以再命令行工具直接使用phantomjs命令。四、代码段 新建一个JS文件,如:main.js 执行命令:phantomjs main.js1、打印指定网
你不可不知的JS面试题(第一期)
1、JS中有哪些内置类型?7种。分别是boolean、number、string、object、undefined、null、symbol。 2、NaN是独立的一种类型吗?不是。NaN是number类型。 3、如何判断是哪个类型?Object.prototype.toString.call(),返回为[object Type]。现在我们来验证一下。Objec
你不可不知的JS面试题
1、JS中有哪些内置类型?7种。分别是boolean、number、string、object、undefined、null、symbol。 2、NaN是独立的一种类型吗?不是。NaN是number类型。 3、如何判断是哪个类型?Object.prototype.toString.call(),返回为\[object Type\]。 现在我们来验证一下
OMG!Java高级开发岗必问知识点
目录 1.Mysql 2.CHAR 与 VARCHAR 的区别? 3.能说下myisam 和 innodb的区别吗? 4.你能说下事务的基本特性和隔离级别吗? 5.并发问题 脏读、不可重复读、幻读? 6.事务的隔离级别? 7.说说自增主键、UUID? 8.mysql 的约束分类? 9.drop、delete 与 tru
AtomicStampedReference是怎样解决CAS的ABA问题
本文已收录 https://github.com/lkxiaolou/lkxiaolou 欢迎star。 什么是ABA问题但凡对Java有一点深入就会知道 CAS,即 compareAndSwap。在Java中使用 Unsafe 类提供的native方法可以直接操作内存,其中就有对compareAndSwap的实现。javapublic final nati