前端面试题每日3题——2022-09-02

每日 3 题

10 以下代码执行后，控制台中的输出内容为？

var obj = {
  a: 1,
};

((obj) => {
  console.log(obj.a);
  obj.a = 3;
  var obj = {
    a: 2,
  };
  console.log(obj.a);
})(obj);

console.log(obj.a);

11 以下代码执行后，控制台中的输出内容为？

function Fun() {}

Fun.prototype.a = 1;

let f1 = new Fun();

Fun.prototype = {
  b: 2,
  c: 3,
};

let f2 = new Fun();

Fun.prototype.d = 4;

console.log(f1.a);
console.log(f1.b);
console.log(f2.c);
console.log(f2.d);

12 以下代码执行后，控制台中的输出内容为？

var num = 1;
let obj = {
  num: 2,
  foo: function () {
    console.log(this.num);
  },
  foo2: () => {
    console.log(this.num);
  },
};

let f1 = obj.foo;
let f2 = obj.foo2;
obj.foo();
obj.foo2();
f1();
f2();

答案及解析

10

// 答案 1 2 3
// 考察形参、局部变量、引用类型、立即执行函数

// 立即执行函数内部，var 声明的变量会提升到函数顶部
var obj = {
  a: 1,
};

((obj) => {
  var obj; // 重复声明无效
  console.log(obj.a); // *1
  obj.a = 3; // *2
  obj = {
    a: 2,
  }; // *3
  console.log(obj.a); // *4
})(obj);
console.log(obj.a); // *5

/**
 * 形式参数 obj 属于局部变量，函数内 var obj 重复声明无效
 * 立即执行函数将全局对象 obj 作为参数传入函数，注意是引用类型，
 * 所以函数内 obj 指向全局对象 obj，因此`*1`处输出 1（即全局变量的属性 1）
 *
 * *2处将全局变量的属性 a 赋值为 3
 * *3处局部变量 obj 指向了一个新的对象`{ a: 2 }`，注意对全局变量不会有影响
 * *4处输出的是局部变量的属性 a，即新对象`{ a: 2 }`的属性 a，为 2
 * *5处输出全局变量的属性 a，在函数内已经被改为 3
 */

11

// 答案：1 undefined 3 4
// 考察原型链
function Fun() {}

Fun.prototype.a = 1;
// 在 Fun 的原型对象上添加属性 a 并赋值为 1

let f1 = new Fun();
// 创建实例 f1，此时 f1 的属性 __proto__ 指向 Fun.prototype

Fun.prototype = {
  b: 2,
  c: 3,
};
// Fun 的 prototype 属性指向了一个新对象
// 注意不会影响实例 f1，因为 f1.__proto__ 还是指向原来那个原型对象

let f2 = new Fun();
// 创建实例 f2，此时 f2 的属性 __proto__ 指向 Fun.prototype
// 注意这时 Fun.prototype 已经跟创建 f1 时的不同了
// 即 f2.__proto__ 指向 { b: 2, c: 3 }

Fun.prototype.d = 4;
// 在 Fun 的原型对象上添加属性 d 并赋值为 4
// 此时 Fun 的原型对象变为 { b: 2, c: 3, d: 4}
// 注意这是修改了 Fun.prototype 指向的那个对象
// 此时 f2.__proto__ 也指向 { b: 2, c: 3, d: 4}

// 综上：f1.__proto__ 为 { a: 1 }
// f2.__proto__ 为 { b: 2, c: 3, d: 4}

console.log(f1.a); // 1
console.log(f1.b); // undefined，自身及原型对象上都没有属性 b
console.log(f2.c); // 3
console.log(f2.d); // 4

12

// 答案 在浏览器中 2 1 1 1
// 考察 this、箭头函数和普通函数的区别

var num = 1; // 在浏览器中 var 声明的全局变量会挂载到 window 对象上

let obj = {
  num: 2,
  foo: function () {
    console.log(this.num);
  },
  // 普通函数的 this 在其执行时才能确定下来
  foo2: () => {
    console.log(this === global);
    console.log(this.num);
  },
  // 箭头函数的 this 在定义时就确定下来了
  // 箭头函数内部的 this 就是定义时外部代码块的 this
  // 注意这里外部代码块就是全局作用域，即 this 指向全局作用域 this 即 window
  // obj 后面的 {} 不是代码块！
  // 因此箭头函数中的 this.num 就是全局 num 为 1
};

let f1 = obj.foo;
let f2 = obj.foo2;
obj.foo(); // 调用位置有执行上下文对象为 obj，因此 this 指向 obj 输出 2
obj.foo2(); // 箭头函数输出 1
f1(); // 调用位置执行上下文对象为全局对象，因此输出全局 num 为 1
f2(); // 箭头函数输出 1