每日 3 題 10 以下代碼執行後，控制臺中的輸出內容為？ var obj = { a: 1, }; ((obj) => { console.log(obj.a); obj.a = 3; var obj = { a: 2, }; console.log(obj.a); })(obj); consol ...
每日 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
