关于html5:7个关于this面试题你能回答上来吗

作者：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() methodlogMessage.call(object);// Using func.apply() methodlogMessage.apply(object);// Creating a bound functionconst 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, 1和2。后果，method()外部的参数非凡变量是如下构造的数组类对象:

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

因为arguments[0]()是arguments对象上的回调的办法调用，所以回调外部的参数等于arguments。所以 callback()中的this.length与arguments.length雷同，即3。

~ 完，我是小智，我要去刷碗了，咱们下期见！

代码部署后可能存在的BUG没法实时晓得，预先为了解决这些BUG，花了大量的工夫进行log 调试，这边顺便给大家举荐一个好用的BUG监控工具 Fundebug。

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

交换

文章每周继续更新，能够微信搜寻「大迁世界」第一工夫浏览和催更（比博客早一到两篇哟），本文 GitHub https://github.com/qq449245884/xiaozhi 曾经收录，整顿了很多我的文档，欢送Star和欠缺，大家面试能够参照考点温习，另外关注公众号，后盾回复福利，即可看到福利，你懂的。