关于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() 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, 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 和欠缺，大家面试能够参照考点温习，另外关注公众号，后盾回复 福利，即可看到福利，你懂的。