共计 3381 个字符，预计需要花费 9 分钟才能阅读完成。
作者：Shadeed
译者：前端小智
起源：dmitripavlutin
点赞再看 ，微信搜寻【大迁世界】,B 站关注【前端小智】 这个没有大厂背景，但有着一股向上踊跃心态人。本文
GitHubhttps://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 和欠缺，大家面试能够参照考点温习，另外关注公众号，后盾回复 福利，即可看到福利，你懂的。
