前端面试题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