<tbody id="5vw1z"></tbody>
<rp id="5vw1z"></rp>
  •  

    javascript中關于”this”的面試題,你知道幾個?

    在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!"??

    const object = {
      message: 'Hello, World!'
    };
    function logMessage() {
      console.log(this.message); // "Hello, World!"
    }

    答案

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

    const object = {
      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。

    「點點贊賞,手留余香」

    2

    給作者打賞,鼓勵TA抓緊創作!

    微信微信 支付寶支付寶

    還沒有人贊賞,快來當第一個贊賞的人吧!

    聲明:
    1. 本站所有文章教程及資源素材均來源于網絡與用戶分享或為本站原創,僅限用于學習和研究。
    2. 如果內容損害你的權益請聯系客服QQ:1642748312給予處理。
    碼云筆記 » javascript中關于”this”的面試題,你知道幾個?

    發表回復

    IT互聯網行業相關廣告投放 更專業 更精準

    立即查看 聯系我們
    亚洲 自拍 另类小说综合图区