建站
咨詢
售后
建站咨詢
新聞中心
本文已經(jīng)過原作者 Shadeed 授權(quán)翻譯。
在JavaScript中，this 表示函數(shù)調(diào)用上下文。this難點(diǎn)在于它有一個(gè)復(fù)雜的行為，這也是面試中經(jīng)常被考的點(diǎn)。
本文列舉7個(gè)關(guān)于this有趣的面試問題:
- 問題1：變量 vs 屬性
- 問題2：Cat 的名字
- 問題3：延遲打招呼
- 問題4：人工方法
- 問題5：?jiǎn)柡蚝透鎰e
- 問題6：棘手的 length
- 問題7：調(diào)用參數(shù)
問題1：變量 vs 屬性
下面的打印結(jié)果是啥：
- const object = {
- message: 'Hello, World!',
- getMessage() {
- const message = 'Hello, Earth!';
- return this.message;
- }
- };
- console.log(object.getMessage()); // ??
答案：'Hello, World!'
object.getmessage()是一個(gè)方法調(diào)用，此時(shí)的 this 表示 object。
方法還有一個(gè)變量聲明const message = 'Hello, Earth!'。這個(gè)變量都不會(huì)影響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'
當(dāng)函數(shù)作為構(gòu)造函數(shù)new Pet('Fluffy')調(diào)用時(shí)，構(gòu)造函數(shù)內(nèi)部的this等于構(gòu)造的對(duì)象
Pet構(gòu)造函數(shù)中的this.name = name表達(dá)式在構(gòu)造的對(duì)象上創(chuàng)建name屬性。
this.getName = () => this.name在構(gòu)造的對(duì)象上創(chuàng)建方法getName。而且由于使用了箭頭函數(shù)，箭頭函數(shù)內(nèi)部的this值等于外部作用域的this值, 即 Pet。
調(diào)用cat.getName()以及getName()會(huì)返回表達(dá)式this.name，其計(jì)算結(jié)果為'Fluffy'。
問題3：延遲打招呼
下面代碼打印什么：
- const object = {
- message: 'Hello, World!',
- logMessage() {
- console.log(this.message); // What is logged?
- }
- };
- setTimeout(object.logMessage, 1000);
答案：1秒后，打印 undefined。
盡管setTimeout()函數(shù)使用object.logMessage作為回調(diào)，但仍將object.logMessage用作常規(guī)函數(shù)，而不是方法。
在常規(guī)函數(shù)調(diào)用期間，this等于全局對(duì)象，即瀏覽器環(huán)境中的 window。
這就是為什么logMessage方法中的 this.message等于 window.message,即undefined。
問題4：人工方法
如何調(diào)用logMessage函數(shù)，讓它打印 "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：?jiǎn)柡蚝透鎰e
下面代碼打印什么：
- 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!'。
當(dāng)調(diào)用object.greet()時(shí)，在greet()方法內(nèi)部，this值等于 object，因?yàn)間reet是一個(gè)常規(guī)函數(shù)。因此object.greet()返回'Hello, World!'。
但是farewell()是一個(gè)箭頭函數(shù)，箭頭函數(shù)中的this值總是等于外部作用域中的this值。
farewell()的外部作用域是全局作用域，它是全局對(duì)象。因此object.farewell()實(shí)際上返回'Goodbye， ${window.who}!'，它的結(jié)果為'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()內(nèi)部使用常規(guī)函數(shù)調(diào)用來(lái)調(diào)用的。由于在常規(guī)函數(shù)調(diào)用期間的this值等于全局對(duì)象，所以this.length結(jié)果為window.length。
第一個(gè)語(yǔ)句var length = 4，處于最外層的作用域，在全局對(duì)象 window 上創(chuàng)建一個(gè)屬性length。
問題7：調(diào)用參數(shù)
下面代碼打印什么：
- 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)被調(diào)用時(shí)有3個(gè)參數(shù):callback, 1和2。結(jié)果，method()內(nèi)部的參數(shù)特殊變量是如下結(jié)構(gòu)的數(shù)組類對(duì)象:
- {
- 0: callback,
- 1: 1,
- 2: 2,
- length: 3
- }
因?yàn)閍rguments[0]()是arguments對(duì)象上的回調(diào)的方法調(diào)用，所以回調(diào)內(nèi)部的參數(shù)等于arguments。所以 callback()中的this.length與arguments.length相同，即3。
~ 完，我是小智，我們下期見!
作者：Shadeed 譯者：前端小智 來(lái)源：dmitripavlutin原文：https://dmitripavlutin.com/javascript-this-interview-questions/
文章題目：七個(gè)關(guān)于"this"面試題，你能回答上來(lái)嗎？
文章地址：http://m.5511xx.com/article/cocgpjp.html
