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

  • 前端面试题每日3题——2022-09-02已关闭评论
  • 20 次浏览
  • A+
所属分类:Web前端

每日 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