看完這幾道 JavaScript 面試題，讓你與考官對答如流（上）
做者：Mark A
譯者：前端小智
來源：devjavascript
本文
GitHubgithub.com/qq449245884… 上已經收錄，更多往期高贊文章的分類，也整理了不少個人文檔，和教程資料。歡迎Star和完善，你們面試能夠參照考點複習，但願咱們一塊兒有點東西。html
考題列表
- 1. undefined 和 null 有什麼區別？
- 2. && 運算符能作什麼
- 3. || 運算符能作什麼
- 4. 使用 + 或一元加運算符是將字符串轉換爲數字的最快方法嗎？
- 5. DOM 是什麼？
- 6. 什麼是事件傳播?
- 7. 什麼是事件冒泡？
- 8. 什麼是事件捕獲？
- 9. event.preventDefault() 和 event.stopPropagation()方法之間有什麼區別？
- 10. 如何知道是否在元素中使用了event.preventDefault()方法？
- 11. 爲何此代碼obj.someprop.x會引起錯誤?
- 12. 什麼是event.target？
- 13. 什麼是event.currentTarget？
- 14. == 和 === 有什麼區別？
- 15. 爲何在 JS 中比較兩個類似的對象時返回 false？
- 16. !! 運算符能作什麼？
- 17. 如何在一行中計算多個表達式的值？
- 18. 什麼是提高？
- 19. 什麼是做用域？
- 20. 什麼是閉包？
- 21. JavaScript中的虛值是什麼？
- 22. 如何檢查值是否虛值？
- 23. 'use strict' 是幹嗎用的？
- 24. JavaScript中 this 值是什麼？
- 25. 對象的 prototype 是什麼？
1.undefined 和 null 有什麼區別？
在理解undefined和null之間的差別以前，咱們先來看看它們的類似類。前端
它們屬於 JavaScript 的 7 種基本類型。java
let primitiveTypes = ['string','number','null','undefined','boolean','symbol', 'bigint'];
複製代碼
它們是屬於虛值，可使用Boolean(value)或!!value將其轉換爲布爾值時，值爲false。git
console.log(!!null); // false
console.log(!!undefined); // false
console.log(Boolean(null)); // false
console.log(Boolean(undefined)); // false
複製代碼
接着來看看它們的區別。github
undefined是未指定特定值的變量的默認值，或者沒有顯式返回值的函數，如：console.log(1)，還包括對象中不存在的屬性，這些 JS 引擎都會爲其分配 undefined 值。 web
let _thisIsUndefined;
const doNothing = () => {};
const someObj = {
a : "ay",
b : "bee",
c : "si"
};
console.log(_thisIsUndefined); // undefined
console.log(doNothing()); // undefined
console.log(someObj["d"]); // undefined
複製代碼
null是「不表明任何值的值」。 null是已明肯定義給變量的值。 在此示例中，當fs.readFile方法未引起錯誤時，咱們將得到null值。面試
fs.readFile('path/to/file', (e,data) => {
console.log(e); // 當沒有錯誤發生時，打印 null
if(e){
console.log(e);
}
console.log(data);
});
複製代碼
在比較null和undefined時，咱們使用==時獲得true，使用===時獲得false:算法
console.log(null == undefined); // true
console.log(null === undefined); // false
複製代碼
2. && 運算符能作什麼
&& 也能夠叫邏輯與，在其操做數中找到第一個虛值表達式並返回它，若是沒有找到任何虛值表達式，則返回最後一個真值表達式。它採用短路來防止沒必要要的工做。segmentfault
console.log(false && 1 && []); // false
console.log(" " && true && 5); // 5
複製代碼
使用if語句
const router: Router = Router();
router.get('/endpoint', (req: Request, res: Response) => {
let conMobile: PoolConnection;
try {
//do some db operations
} catch (e) {
if (conMobile) {
conMobile.release();
}
}
});
複製代碼
使用&&操做符
const router: Router = Router();
router.get('/endpoint', (req: Request, res: Response) => {
let conMobile: PoolConnection;
try {
//do some db operations
} catch (e) {
conMobile && conMobile.release()
}
});
複製代碼
3. || 運算符能作什麼
||也叫或邏輯或，在其操做數中找到第一個真值表達式並返回它。這也使用了短路來防止沒必要要的工做。在支持 ES6 默認函數參數以前，它用於初始化函數中的默認參數值。
console.log(null || 1 || undefined); // 1
function logName(name) {
var n = name || "Mark";
console.log(n);
}
logName(); // "Mark"
複製代碼
4. 使用 + 或一元加運算符是將字符串轉換爲數字的最快方法嗎？
根據MDN文檔，+是將字符串轉換爲數字的最快方法，由於若是值已是數字，它不會執行任何操做。
5. DOM 是什麼？
DOM 表明文檔對象模型，是 HTML 和 XML 文檔的接口(API)。當瀏覽器第一次讀取(解析)HTML文檔時，它會建立一個大對象，一個基於 HTM L文檔的很是大的對象，這就是DOM。它是一個從 HTML 文檔中建模的樹狀結構。DOM 用於交互和修改DOM結構或特定元素或節點。
假設咱們有這樣的 HTML 結構：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document Object Model</title>
</head>
<body>
<div>
<p>
<span></span>
</p>
<label></label>
<input>
</div>
</body>
</html>
複製代碼
等價的DOM是這樣的：
JS 中的document對象表示DOM。它爲咱們提供了許多方法，咱們可使用這些方法來選擇元素來更新元素內容，等等。
6. 什麼是事件傳播?
當事件發生在DOM元素上時，該事件並不徹底發生在那個元素上。 在「冒泡階段」中，事件冒泡或向上傳播至父級，祖父母，祖父母或父級，直到到達window爲止；而在「捕獲階段」中，事件從window開始向下觸發元素 事件或event.target。
事件傳播有三個階段：
捕獲階段–事件從
window開始，而後向下到每一個元素，直到到達目標元素。目標階段–事件已達到目標元素。
冒泡階段–事件從目標元素冒泡，而後上升到每一個元素，直到到達
window。
7. 什麼是事件冒泡？
當事件發生在DOM元素上時，該事件並不徹底發生在那個元素上。 在冒泡階段，事件冒泡，或者事件發生在它的父代，祖父母，祖父母的父代，直到到達window爲止。
假設有以下的 HTML 結構：
<div class="grandparent">
<div class="parent">
<div class="child">1</div>
</div>
</div>
複製代碼
對應的 JS 代碼:
function addEvent(el, event, callback, isCapture = false) {
if (!el || !event || !callback || typeof callback !== 'function') return;
if (typeof el === 'string') {
el = document.querySelector(el);
};
el.addEventListener(event, callback, isCapture);
}
addEvent(document, 'DOMContentLoaded', () => {
const child = document.querySelector('.child');
const parent = document.querySelector('.parent');
const grandparent = document.querySelector('.grandparent');
addEvent(child, 'click', function (e) {
console.log('child');
});
addEvent(parent, 'click', function (e) {
console.log('parent');
});
addEvent(grandparent, 'click', function (e) {
console.log('grandparent');
});
addEvent(document, 'click', function (e) {
console.log('document');
});
addEvent('html', 'click', function (e) {
console.log('html');
})
addEvent(window, 'click', function (e) {
console.log('window');
})
});
複製代碼
addEventListener方法具備第三個可選參數useCapture，其默認值爲false，事件將在冒泡階段中發生，若是爲true，則事件將在捕獲階段中發生。 若是單擊child元素，它將分別在控制檯上記錄child，parent，grandparent，html，document和window，這就是事件冒泡。
8. 什麼是事件捕獲？
當事件發生在 DOM 元素上時，該事件並不徹底發生在那個元素上。在捕獲階段，事件從window開始，一直到觸發事件的元素。
假設有以下的 HTML 結構：
<div class="grandparent">
<div class="parent">
<div class="child">1</div>
</div>
</div>
複製代碼
對應的 JS 代碼:
function addEvent(el, event, callback, isCapture = false) {
if (!el || !event || !callback || typeof callback !== 'function') return;
if (typeof el === 'string') {
el = document.querySelector(el);
};
el.addEventListener(event, callback, isCapture);
}
addEvent(document, 'DOMContentLoaded', () => {
const child = document.querySelector('.child');
const parent = document.querySelector('.parent');
const grandparent = document.querySelector('.grandparent');
addEvent(child, 'click', function (e) {
console.log('child');
});
addEvent(parent, 'click', function (e) {
console.log('parent');
});
addEvent(grandparent, 'click', function (e) {
console.log('grandparent');
});
addEvent(document, 'click', function (e) {
console.log('document');
});
addEvent('html', 'click', function (e) {
console.log('html');
})
addEvent(window, 'click', function (e) {
console.log('window');
})
});
複製代碼
addEventListener方法具備第三個可選參數useCapture，其默認值爲false，事件將在冒泡階段中發生，若是爲true，則事件將在捕獲階段中發生。 若是單擊child元素，它將分別在控制檯上打印window，document，html，grandparent和parent，這就是事件捕獲。
9. event.preventDefault() 和 event.stopPropagation()方法之間有什麼區別？
event.preventDefault() 方法可防止元素的默認行爲。 若是在表單元素中使用，它將阻止其提交。 若是在錨元素中使用，它將阻止其導航。 若是在上下文菜單中使用，它將阻止其顯示或顯示。 event.stopPropagation()方法用於阻止捕獲和冒泡階段中當前事件的進一步傳播。
10. 如何知道是否在元素中使用了`event.preventDefault()`方法？
咱們能夠在事件對象中使用event.defaultPrevented屬性。 它返回一個布爾值用來代表是否在特定元素中調用了event.preventDefault()。
11. 爲何此代碼 `obj.someprop.x` 會引起錯誤?
const obj = {};
console.log(obj.someprop.x);
複製代碼
顯然，因爲咱們嘗試訪問someprop屬性中的x屬性，而 someprop 並無在對象中，因此值爲 undefined。 記住對象自己不存在的屬性，而且其原型的默認值爲undefined。由於undefined沒有屬性x，因此試圖訪問將會報錯。
12. 什麼是 event.target ？
簡單來講，event.target是發生事件的元素或觸發事件的元素。
假設有以下的 HTML 結構：
<div onclick="clickFunc(event)" style="text-align: center;margin:15px;
border:1px solid red;border-radius:3px;">
<div style="margin: 25px; border:1px solid royalblue;border-radius:3px;">
<div style="margin:25px;border:1px solid skyblue;border-radius:3px;">
<button style="margin:10px">
Button
</button>
</div>
</div>
</div>
複製代碼
JS 代碼以下：
function clickFunc(event) {
console.log(event.target);
}
複製代碼
若是單擊 button，即便咱們將事件附加在最外面的div上，它也將打印 button 標籤，所以咱們能夠得出結論event.target是觸發事件的元素。
13. 什麼是 event.currentTarget？？
event.currentTarget是咱們在其上顯式附加事件處理程序的元素。
假設有以下的 HTML 結構：
<div onclick="clickFunc(event)" style="text-align: center;margin:15px;
border:1px solid red;border-radius:3px;">
<div style="margin: 25px; border:1px solid royalblue;border-radius:3px;">
<div style="margin:25px;border:1px solid skyblue;border-radius:3px;">
<button style="margin:10px">
Button
</button>
</div>
</div>
</div>
複製代碼
JS 代碼以下：
function clickFunc(event) {
console.log(event.currentTarget);
}
複製代碼
若是單擊 button，即便咱們單擊該 button，它也會打印最外面的div標籤。 在此示例中，咱們能夠得出結論，event.currentTarget是附加事件處理程序的元素。
14. == 和 === 有什麼區別？
==用於通常比較，===用於嚴格比較，==在比較的時候能夠轉換數據類型，===嚴格比較，只要類型不匹配就返回flase。
先來看看 == 這兄弟：
強制是將值轉換爲另外一種類型的過程。 在這種狀況下，==會執行隱式強制。 在比較兩個值以前，==須要執行一些規則。
假設咱們要比較x == y的值。
- 若是
x和y的類型相同，則 JS 會換成===操做符進行比較。 - 若是
x爲null,y爲undefined，則返回true。 - 若是
x爲undefined且y爲null，則返回true。 - 若是
x的類型是number,y的類型是string，那麼返回x == toNumber(y)。 - 若是
x的類型是string,y的類型是number，那麼返回toNumber(x) == y。 - 若是
x爲類型是boolean，則返回toNumber(x)== y。 - 若是
y爲類型是boolean，則返回x == toNumber(y)。 - 若是
x是string、symbol或number，而y是object類型，則返回x == toPrimitive(y)。 - 若是
x是object，y是string，symbol則返回toPrimitive(x) == y。 - 剩下的 返回
false
注意：toPrimitive首先在對象中使用valueOf方法，而後使用toString方法來獲取該對象的原始值。
舉個例子。
| x | y | x == y |
|---|---|---|
| 5 | 5 | true |
| 1 | '1' | true |
| null | undefined | true |
| 0 | false | true |
| '1,2' | [1,2] | true |
| '[object Object]' | {} | true |
這些例子都返回true。
第一個示例符合條件1，由於x和y具備相同的類型和值。
第二個示例符合條件4，在比較以前將y轉換爲數字。
第三個例子符合條件2。
第四個例子符合條件7，由於y是boolean類型。
第五個示例符合條件8。 使用toString()方法將數組轉換爲字符串，該方法返回1,2。
最後一個示例符合條件8。 使用toString()方法將對象轉換爲字符串，該方法返回[object Object]。
| x | y | x === y |
|---|---|---|
| 5 | 5 | true |
| 1 | '1' | false |
| null | undefined | false |
| 0 | false | false |
| '1,2' | [1,2] | false |
| '[object Object]' | {} | false |
若是使用===運算符，則第一個示例之外的全部比較將返回false，由於它們的類型不一樣，而第一個示例將返回true，由於二者的類型和值相同。
具體更多規則能夠對參考我以前的文章：
我對 JS 中相等和全等操做符轉化過程一直很迷惑，直到有了這份算法
15. 爲何在 JS 中比較兩個類似的對象時返回 false？
先看下面的例子：
let a = { a: 1 };
let b = { a: 1 };
let c = a;
console.log(a === b); // 打印 false，即便它們有相同的屬性
console.log(a === c); // true
複製代碼
JS 以不一樣的方式比較對象和基本類型。在基本類型中，JS 經過值對它們進行比較，而在對象中，JS 經過引用或存儲變量的內存中的地址對它們進行比較。這就是爲何第一個console.log語句返回false，而第二個console.log語句返回true。a和c有相同的引用地址，而a和b沒有。
16. !! 運算符能作什麼？
!!運算符能夠將右側的值強制轉換爲布爾值，這也是將值轉換爲布爾值的一種簡單方法。
console.log(!!null); // false
console.log(!!undefined); // false
console.log(!!''); // false
console.log(!!0); // false
console.log(!!NaN); // false
console.log(!!' '); // true
console.log(!!{}); // true
console.log(!![]); // true
console.log(!!1); // true
console.log(!![].length); // false
複製代碼
17. 如何在一行中計算多個表達式的值？
可使用逗號運算符在一行中計算多個表達式。 它從左到右求值，並返回右邊最後一個項目或最後一個操做數的值。
let x = 5;
x = (x++ , x = addFive(x), x *= 2, x -= 5, x += 10);
function addFive(num) {
return num + 5;
}
複製代碼
上面的結果最後獲得x的值爲27。首先，咱們將x的值增長到6，而後調用函數addFive(6)並將6做爲參數傳遞並將結果從新分配給x，此時x的值爲11。以後，將x的當前值乘以2並將其分配給x，x的更新值爲22。而後，將x的當前值減去5並將結果分配給x x更新後的值爲17。最後，咱們將x的值增長10，而後將更新的值分配給x，最終x的值爲27。
18. 什麼是提高？
提高是用來描述變量和函數移動到其(全局或函數)做用域頂部的術語。
爲了理解提高，須要來了解一下執行上下文。執行上下文是當前正在執行的「代碼環境」。執行上下文有兩個階段:編譯和執行。
編譯-在此階段，JS 引薦獲取全部函數聲明並將其提高到其做用域的頂部，以便咱們稍後能夠引用它們並獲取全部變量聲明（使用var關鍵字進行聲明），還會爲它們提供默認值： undefined。
執行——在這個階段中，它將值賦給以前提高的變量，並執行或調用函數(對象中的方法)。
注意:只有使用var聲明的變量，或者函數聲明纔會被提高，相反，函數表達式或箭頭函數，let和const聲明的變量，這些都不會被提高。
假設在全局使用域，有以下的代碼：
console.log(y);
y = 1;
console.log(y);
console.log(greet("Mark"));
function greet(name){
return 'Hello ' + name + '!';
}
var y;
複製代碼
上面分別打印：undefined,1, Hello Mark!。
上面代碼在編譯階段實際上是這樣的：
function greet(name) {
return 'Hello ' + name + '!';
}
var y; // 默認值 undefined
// 等待「編譯」階段完成，而後開始「執行」階段
/*
console.log(y);
y = 1;
console.log(y);
console.log(greet("Mark"));
*/
複製代碼
編譯階段完成後，它將啓動執行階段調用方法，並將值分配給變量。
function greet(name) {
return 'Hello ' + name + '!';
}
var y;
//start "execution" phase
console.log(y);
y = 1;
console.log(y);
console.log(greet("Mark"));
複製代碼
19. 什麼是做用域？
JavaScript 中的做用域是咱們能夠有效訪問變量或函數的區域。JS 有三種類型的做用域：全局做用域、函數做用域和塊做用域(ES6)。
- 全局做用域——在全局命名空間中聲明的變量或函數位於全局做用域中，所以在代碼中的任何地方均可以訪問它們。
//global namespace
var g = "global";
function globalFunc(){
function innerFunc(){
console.log(g); // can access "g" because "g" is a global variable
}
innerFunc();
}
複製代碼
- 函數做用域——在函數中聲明的變量、函數和參數能夠在函數內部訪問，但不能在函數外部訪問。
function myFavoriteFunc(a) {
if (true) {
var b = "Hello " + a;
}
return b;
}
myFavoriteFunc("World");
console.log(a); // Throws a ReferenceError "a" is not defined
console.log(b); // does not continue here
複製代碼
- 塊做用域-在塊
{}中聲明的變量（let，const）只能在其中訪問。
function testBlock(){
if(true){
let z = 5;
}
return z;
}
testBlock(); // Throws a ReferenceError "z" is not defined
複製代碼
做用域也是一組用於查找變量的規則。 若是變量在當前做用域中不存在，它將向外部做用域中查找並搜索，若是該變量不存在，它將再次查找直到到達全局做用域，若是找到，則可使用它，不然引起錯誤，這種查找過程也稱爲做用域鏈。
/* 做用域鏈
內部做用域->外部做用域-> 全局做用域
*/
// 全局做用域
var variable1 = "Comrades";
var variable2 = "Sayonara";
function outer(){
// 外部做用域
var variable1 = "World";
function inner(){
// 內部做用域
var variable2 = "Hello";
console.log(variable2 + " " + variable1);
}
inner();
}
outer(); // Hello World
複製代碼
20. 什麼是閉包？
這多是全部問題中最難的一個問題，由於閉包是一個有爭議的話題，這裏從我的角度來談談，若是不妥，多多海涵。
閉包就是一個函數在聲明時可以記住當前做用域、父函數做用域、及父函數做用域上的變量和參數的引用，直至經過做用域鏈上全局做用域，基本上閉包是在聲明函數時建立的做用域。
看看小例子：
// 全局做用域
var globalVar = "abc";
function a(){
console.log(globalVar);
}
a(); // "abc"
複製代碼
在此示例中，當咱們聲明a函數時，全局做用域是a閉包的一部分。
變量globalVar在圖中沒有值的緣由是該變量的值能夠根據調用函數a的位置和時間而改變。可是在上面的示例中，globalVar變量的值爲abc。
來看一個更復雜的例子：
var globalVar = "global";
var outerVar = "outer"
function outerFunc(outerParam) {
function innerFunc(innerParam) {
console.log(globalVar, outerParam, innerParam);
}
return innerFunc;
}
const x = outerFunc(outerVar);
outerVar = "outer-2";
globalVar = "guess"
x("inner");
複製代碼
上面打印結果是 guess outer inner。
當咱們調用outerFunc函數並將返回值innerFunc函數分配給變量x時，即便咱們爲outerVar變量分配了新值outer-2，outerParam也繼續保留outer值，由於從新分配是在調用outerFunc以後發生的，而且當咱們調用outerFunc函數時，它會在做用域鏈中查找outerVar的值，此時的outerVar的值將爲 "outer"。
如今，當咱們調用引用了innerFunc的x變量時，innerParam將具備一個inner值，由於這是咱們在調用中傳遞的值，而globalVar變量值爲guess，由於在調用x變量以前，咱們將一個新值分配給globalVar。
下面這個示例演示沒有理解好閉包所犯的錯誤：
const arrFuncs = [];
for(var i = 0; i < 5; i++){
arrFuncs.push(function (){
return i;
});
}
console.log(i); // i is 5
for (let i = 0; i < arrFuncs.length; i++) {
console.log(arrFuncs[i]()); // 都打印 5
}
複製代碼
因爲閉包，此代碼沒法正常運行。var關鍵字建立一個全局變量，當咱們 push 一個函數時，這裏返回的全局變量i。 所以，當咱們在循環後在該數組中調用其中一個函數時，它會打印5，由於咱們獲得i的當前值爲5，咱們能夠訪問它，由於它是全局變量。
由於閉包在建立變量時會保留該變量的引用而不是其值。 咱們可使用IIFES或使用 let 來代替 var 的聲明。
21. JavaScript 中的虛值是什麼？
const falsyValues = ['', 0, null, undefined, NaN, false];
複製代碼
簡單的來講虛值就是是在轉換爲布爾值時變爲 false 的值。
22. 如何檢查值是否虛值？
使用 Boolean 函數或者 !! 運算符。
23. 'use strict' 是幹嗎用的？
"use strict" 是 ES5 特性，它使咱們的代碼在函數或整個腳本中處於嚴格模式。嚴格模式幫助咱們在代碼的早期避免 bug，併爲其添加限制。
嚴格模式的一些限制：
- 變量必須聲明後再使用
- 函數的參數不能有同名屬性，不然報錯
- 不能使用
with語句 - 不能對只讀屬性賦值，不然報錯
- 不能使用前綴 0 表示八進制數，不然報錯
- 不能刪除不可刪除的屬性，不然報錯
- 不能刪除變量
delete prop，會報錯，只能刪除屬性delete global[prop] eval不能在它的外層做用域引入變量eval和arguments不能被從新賦值arguments不會自動反映函數參數的變化- 不能使用
arguments.callee - 不能使用
arguments.caller - 禁止
this指向全局對象 - 不能使用
fn.caller和fn.arguments獲取函數調用的堆棧 - 增長了保留字（好比
protected、static和interface）
設立」嚴格模式」的目的，主要有如下幾個：
- 消除Javascript語法的一些不合理、不嚴謹之處，減小一些怪異行爲;
- 消除代碼運行的一些不安全之處，保證代碼運行的安全；
- 提升編譯器效率，增長運行速度；
- 爲將來新版本的Javascript作好鋪墊。
24. JavaScript 中 `this` 值是什麼？
基本上，this指的是當前正在執行或調用該函數的對象的值。this值的變化取決於咱們使用它的上下文和咱們在哪裏使用它。
const carDetails = {
name: "Ford Mustang",
yearBought: 2005,
getName(){
return this.name;
},
isRegistered: true
};
console.log(carDetails.getName()); // Ford Mustang
複製代碼
這一般是咱們指望結果的，由於在getName方法中咱們返回this.name，在此上下文中，this指向的是carDetails對象，該對象當前是執行函數的「全部者」對象。
接下咱們作些奇怪的事情：
var name = "Ford Ranger";
var getCarName = carDetails.getName;
console.log(getCarName()); // Ford Ranger
複製代碼
上面打印Ford Ranger，這很奇怪，由於在第一個console.log語句中打印的是Ford Mustang。這樣作的緣由是getCarName方法有一個不一樣的「全部者」對象，即window對象。在全局做用域中使用var關鍵字聲明變量會在window對象中附加與變量名稱相同的屬性。請記住，當沒有使用「use strict」時，在全局做用域中this指的是window對象。
console.log(getCarName === window.getCarName); // true
console.log(getCarName === this.getCarName); // true
複製代碼
本例中的this和window引用同一個對象。
解決這個問題的一種方法是在函數中使用apply和call方法。
console.log(getCarName.apply(carDetails)); // Ford Mustang
console.log(getCarName.call(carDetails)); // Ford Mustang
複製代碼
apply和call方法指望第一個參數是一個對象，該對象是函數內部this的值。
IIFE或當即執行的函數表達式，在全局做用域內聲明的函數，對象內部方法中的匿名函數和內部函數的this具備默認值，該值指向window對象。
(function (){
console.log(this);
})(); // 打印 "window" 對象
function iHateThis(){
console.log(this);
}
iHateThis(); // 打印 "window" 對象
const myFavoriteObj = {
guessThis(){
function getName(){
console.log(this.name);
}
getName();
},
name: 'Marko Polo',
thisIsAnnoying(callback){
callback();
}
};
myFavoriteObj.guessThis(); // 打印 "window" 對象
myFavoriteObj.thisIsAnnoying(function (){
console.log(this); // 打印 "window" 對象
});
複製代碼
若是咱們要獲取myFavoriteObj對象中的name屬性（即Marko Polo）的值，則有兩種方法能夠解決此問題。
一種是將 this 值保存在變量中。
const myFavoriteObj = {
guessThis(){
const self = this; // 把 this 值保存在 self 變量中
function getName(){
console.log(self.name);
}
getName();
},
name: 'Marko Polo',
thisIsAnnoying(callback){
callback();
}
};
複製代碼
第二種方式是使用箭頭函數
const myFavoriteObj = {
guessThis(){
const getName = () => {
console.log(this.name);
}
getName();
},
name: 'Marko Polo',
thisIsAnnoying(callback){
callback();
}
};
複製代碼
箭頭函數沒有本身的 this。它複製了這個封閉的詞法做用域中this值，在這個例子中，this值在getName內部函數以外，也就是myFavoriteObj對象。
25. 對象的 prototype(原型) 是什麼？
簡單地說，原型就是對象的藍圖。若是它存在當前對象中，則將其用做屬性和方法的回退。它是在對象之間共享屬性和功能的方法，這也是JavaScript實現繼承的核心。
const o = {};
console.log(o.toString()); // logs [object Object]
複製代碼
即便o對象中不存在o.toString方法，它也不會引起錯誤，而是返回字符串[object Object]。 當對象中不存在屬性時，它將查看其原型，若是仍然不存在，則將其查找到原型的原型，依此類推，直到在原型鏈中找到具備相同屬性的屬性爲止。 原型鏈的末尾是Object.prototype。
console.log(o.toString === Object.prototype.toString); // logs true
複製代碼
因爲篇幅過長，我將此係列分紅上中下三篇，下篇咱們在見。
代碼部署後可能存在的BUG無法實時知道，過後爲了解決這些BUG，花了大量的時間進行log 調試，這邊順便給你們推薦一個好用的BUG監控工具 Fundebug。
原文：
交流
乾貨系列文章彙總以下，以爲不錯點個Star，歡迎 加羣 互相學習。
我是小智，公衆號「大遷世界」做者，對前端技術保持學習愛好者。我會常常分享本身所學所看的乾貨，在進階的路上，共勉！
關注公衆號，後臺回覆福利，便可看到福利，你懂的。
- 1. 看完這幾道 JavaScript 面試題，讓你與考官對答如流（上）
- 2. 看完這幾道 JavaScript 面試題，讓你與考官對答如流（下）
- 3. 看完這幾道 JavaScript 面試題，讓你與考官對答如流（中）
- 4. 這 7 道關於 this 的面試題，你能答對幾個？
- 5. 這7道經典的Java面試題，你能答對幾題？
- 6. （含答案）這份js基礎試題，你能答對幾道？
- 7. 史上最全 40 道 Dubbo 面試題及答案，看完碾壓面試官！
- 8. 史上最全 40 道 Dubbo 面試題及答案，看完碾壓面試官
- 9. [前端面試]前端緩存問題看這篇，讓面試官愛上你
- 10. 75 道 BAJT 高級 Java 面試題，你能答上幾道？
- 更多相關文章...
- • JavaScript 指南 - 網站建設指南
- • Rust 面向對象 - RUST 教程
- • 再有人問你分佈式事務，把這篇扔給他
- • 使用阿里雲OSS+CDN部署前端頁面與加速靜態資源
-
每一个你不满意的现在，都有一个你没有努力的曾经。
- 1. 看完這幾道 JavaScript 面試題，讓你與考官對答如流（上）
- 2. 看完這幾道 JavaScript 面試題，讓你與考官對答如流（下）
- 3. 看完這幾道 JavaScript 面試題，讓你與考官對答如流（中）
- 4. 這 7 道關於 this 的面試題，你能答對幾個？
- 5. 這7道經典的Java面試題，你能答對幾題？
- 6. （含答案）這份js基礎試題，你能答對幾道？
- 7. 史上最全 40 道 Dubbo 面試題及答案，看完碾壓面試官！
- 8. 史上最全 40 道 Dubbo 面試題及答案，看完碾壓面試官
- 9. [前端面試]前端緩存問題看這篇，讓面試官愛上你
- 10. 75 道 BAJT 高級 Java 面試題，你能答上幾道？