前端面試題JavaScript篇——2022-09-15

每日3題

1 以下代碼執行後，控制臺中的輸出內容為？

// 以下代碼執行後，控制臺中輸出的內容是什麼
var fullname = "a";
var obj = {
  fullname: "b",
  prop: {
    fullname: "c",
    getFullname: function () {
      return this.fullname;
    },
  },
};
console.log(obj.prop.getFullname());
var test = obj.prop.getFullname;
console.log(test());

2 以下代碼執行後，控制臺中的輸出內容為？

// 以下代碼執行後，控制臺中輸出的內容是什麼
function Foo() {
  Foo.a = function () {
    console.log(1);
  };
  this.a = function () {
    console.log(2);
  };
}

Foo.prototype.a = function () {
  console.log(3);
};

Foo.a = function () {
  console.log(4);
};

Foo.a();
let obj = new Foo();
obj.a();
Foo.a();

3 以下代碼執行後，控制臺中的輸出內容為？

// 以下代碼執行後，控制臺中輸出的內容是什麼
function getName() {
  for (let i = 0; i < 5; i++) {
    setTimeout((_) => {
      console.log(i);
    }, i * 1000);
  }
  return
  {
    name: "aaa";
  }
}

console.log(getName());

• 公眾號【今天也要寫bug】更多前端面試題

答案及解析

1

// 答案：c a
// 考察 this 綁定規則
var fullname = "a";
var obj = {
  fullname: "b",
  prop: {
    fullname: "c",
    getFullname: function () {
      return this.fullname; // 普通函數中的 this 在其運行時才能確定
    },
  },
};
console.log(obj.prop.getFullname()); // 隱式綁定：調用位置有上下文對象：prop，this指向它，因此輸出 c
var test = obj.prop.getFullname;
console.log(test()); // 預設綁定：獨立函數調用，this 指向全局對象，即 window
// 而在瀏覽器中，var 聲明的全局變數會成為全局對象的屬性
// 所以 test() 執行後返回 window.fullname=a

2

// 答案：4 2 1
// 考察：原型鏈、new 創建對象的過程、函數本身也是對象
function Foo() {
  Foo.a = function () {
    console.log(1);
  };
  this.a = function () {
    console.log(2);
  };
  // new 創建對象時讓新創建的對象作為 this 的上下文
  // 所以這裡的 this 指向下麵創建的 obj
  // 即在 obj 上添加了屬性 a
}

Foo.prototype.a = function () {
  console.log(3);
};

// 在對象 Foo 上添加屬性 a：指向一個普通函數
Foo.a = function () {
  console.log(4);
};

Foo.a(); // 調用上面那個普通函數，輸出 4
let obj = new Foo();
obj.a(); // 在構造函數中添加了屬性 a，調用後輸出 2
Foo.a(); // 在創建 obj 時已經改變了對象 Foo 上的屬性 a 的指向，輸出 1

3

// 答案：undefined 0 1 2 3 4
// 考察事件迴圈、return 語句
function getName() {
  for (let i = 0; i < 5; i++) {
    setTimeout((_) => {
      console.log(i);
    }, i * 1000);
  }
  // return 關鍵字和被返回的表達式之間不允許使用行終止符
  // 即 return 後要返回的表達式不能換行，否則返回 undefined
  return
  {
    name: "aaa";
  }
}

console.log(getName()); // 1
// setTimeout 是巨集任務，在這裡會在語句 1 執行之後執行
// getName 函數返回 undefined，因此先輸出 undefined
// 之後 setTimeout 依次執行，分別輸出 0 1 2 3 4