摘要：第一部分請點(diǎn)擊快速掌握面試基礎(chǔ)知識一關(guān)鍵字如果使用關(guān)鍵字來調(diào)用函數(shù)式很特別的形式。該對象默認(rèn)包含了指向原構(gòu)造函數(shù)的屬性。接下來通過例子來幫助理解屬性包含了構(gòu)造函數(shù)以及構(gòu)造函數(shù)中在上定義的屬性。也就是說，的回調(diào)函數(shù)后執(zhí)行。

譯者按： 總結(jié)了大量JavaScript基本知識點(diǎn)，很有用！

原文: The Definitive JavaScript Handbook for your next developer interview

為了保證可讀性，本文采用意譯而非直譯。另外，本文版權(quán)歸原作者所有，翻譯僅用于學(xué)習(xí)。

根據(jù)StackOverflow調(diào)查， 自2014年一來，JavaScript是最流行的編程語言。當(dāng)然，這也在情理之中，畢竟1/3的開發(fā)工作都需要一些JavaScript知識。因此，如果你希望在成為一個開發(fā)者，你應(yīng)該學(xué)會這門語言。

這篇博客的主要目的是將所有面試中常見的概念總結(jié)，方便你快速去了解。(鑒于本文內(nèi)容過長，方便閱讀，將分為三篇博客來翻譯, 此為第三部分。第一部分請點(diǎn)擊快速掌握J(rèn)avaScript面試基礎(chǔ)知識(一))

如果使用new關(guān)鍵字來調(diào)用函數(shù)式很特別的形式。我們把那些用new調(diào)用的函數(shù)叫做構(gòu)造函數(shù)(constructor function)。

使用了new的函數(shù)到底做了什么事情呢？

創(chuàng)建一個新的對象

將對象的prototype設(shè)置為構(gòu)造函數(shù)的prototype

執(zhí)行構(gòu)造函數(shù)，this執(zhí)行新構(gòu)造的對象

返回該對象。如果構(gòu)造函數(shù)返回對象，那么返回該構(gòu)造對象。

// 為了更好地理解底層，我們來定義new關(guān)鍵字
function myNew(constructor, ...arguments) {
  var obj = {}
  Object.setPrototypeOf(obj, constructor.prototype);
  return constructor.apply(obj, arguments) || obj
}

使用new和不使用的區(qū)別在哪里呢？

function Bird() {
  this.wings = 2;
}
/* 普通的函數(shù)調(diào)用 */
let fakeBird = Bird();
console.log(fakeBird);    // undefined
/* 使用new調(diào)用 */
let realBird= new Bird();
console.log(realBird)     // { wings: 2 }

為了便于對比理解，譯者額外增加了測試了一種情況：

function MBird(){
  this.wings =2; 
  return "hello";
}

let realMBrid = new MBird();
console.log(realMBird) // { wings: 2 }

你會發(fā)現(xiàn)，這一句return "hello"并沒有生效！

原型(Prototype)是JavaScript中最容易搞混的概念，其中一個原因是prototype可以用在兩個不同的情形下。

原型關(guān)系
每一個對象都有一個prototype對象，里面包含了所有它的原型的屬性。
.__proto__是一個不正規(guī)的機(jī)制(ES6中提供)，用來獲取一個對象的prototype。你可以理解為它指向?qū)ο蟮?b>parent。
所有普通的對象都繼承.constructor屬性，它指向該對象的構(gòu)造函數(shù)。當(dāng)一個對象通過構(gòu)造函數(shù)實(shí)現(xiàn)的時候，__proto__屬性指向構(gòu)造函數(shù)的構(gòu)造函數(shù)的.prototype。Object.getPrototypeOf()是ES5的標(biāo)準(zhǔn)函數(shù)，用來獲取一個對象的原型。

原型屬性
每一個函數(shù)都有一個.prototype屬性，它包含了所有可以被繼承的屬性。該對象默認(rèn)包含了指向原構(gòu)造函數(shù)的.constructor屬性。每一個使用構(gòu)造函數(shù)創(chuàng)建的對象都有一個構(gòu)造函數(shù)屬性。

接下來通過例子來幫助理解：

function Dog(breed, name){
  this.breed = breed,
  this.name = name
}
Dog.prototype.describe = function() {
  console.log(`${this.name} is a ${this.breed}`)
}
const rusty = new Dog("Beagle", "Rusty");

/* .prototype 屬性包含了構(gòu)造函數(shù)以及構(gòu)造函數(shù)中在prototype上定義的屬性。*/
console.log(Dog.prototype)  // { describe: ? , constructor: ? }

/* 使用Dog構(gòu)造函數(shù)構(gòu)造的對象 */
console.log(rusty)   //  { breed: "Beagle", name: "Rusty" }
/* 從構(gòu)造函數(shù)的原型中繼承下來的屬性或函數(shù) */
console.log(rusty.describe())   // "Rusty is a Beagle"
/* .__proto__ 屬性指向構(gòu)造函數(shù)的.prototype屬性 */
console.log(rusty.__proto__)    // { describe: ? , constructor: ? }
/* .constructor 屬性指向構(gòu)造函數(shù) */
console.log(rusty.constructor)  // ? Dog(breed, name) { ... }

JavaScript的使用可以說相當(dāng)靈活，為了避免出bug了不知道，不妨接入Fundebug線上實(shí)時監(jiān)控。

原型鏈?zhǔn)侵笇ο笾g通過prototype鏈接起來，形成一個有向的鏈條。當(dāng)訪問一個對象的某個屬性的時候，JavaScript引擎會首先查看該對象是否包含該屬性。如果沒有，就去查找對象的prototype中是否包含。以此類推，直到找到該屬性或則找到最后一個對象。最后一個對象的prototype默認(rèn)為null。

一個對象有兩種屬性，分別是它自身定義的和繼承的。

function Car() { }
Car.prototype.wheels = 4;
Car.prototype.airbags = 1;

var myCar = new Car();
myCar.color = "black";

/*  原型鏈中的屬性也可以通過in來查看:  */
console.log("airbags" in myCar)  // true
console.log(myCar.wheels)        // 4
console.log(myCar.year)          // undefined

/*  通過hasOwnProperty來查看是否擁有該屬性:  */
console.log(myCar.hasOwnProperty("airbags"))  // false — Inherited
console.log(myCar.hasOwnProperty("color"))    // true

Object.create(obj) 創(chuàng)建一個新的對象，prototype指向obj。

var dog = { legs: 4 };
var myDog = Object.create(dog);

console.log(myDog.hasOwnProperty("legs"))  // false
console.log(myDog.legs)                    // 4
console.log(myDog.__proto__ === dog)       // true

繼承屬性都是通過引用的形式。我們通過例子來形象理解：

var objProt = { text: "original" };
var objAttachedToProt = Object.create(objProt);
console.log(objAttachedToProt.text)   // original

// 我們更改objProt的text屬性，objAttachedToProt的text屬性同樣更改了
objProt.text = "prototype property changed";
console.log(objAttachedToProt.text)   // prototype property changed

// 但是如果我們講一個新的對象賦值給objProt，那么objAttachedToProt的text屬性不受影響
objProt = { text: "replacing property" };
console.log(objAttachedToProt.text)   // prototype property changed

Eric Elliott的文章有非常詳細(xì)的介紹：Master the JavaScript Interview: What’s the Difference Between Class & Prototypal Inheritance?
作者認(rèn)為原型繼承是優(yōu)于經(jīng)典的繼承的，并提供了一個視頻介紹：https://www.youtube.com/watch...

JavaScript是一個單線程程序語言，也就是說JavaScript引擎一次只能執(zhí)行某一段代碼。它導(dǎo)致的問題就是：如果有一段代碼需要耗費(fèi)很長的時間執(zhí)行，其它的操作就被卡住了。JavaScript使用Call Stack來記錄函數(shù)的調(diào)用。一個Call Stack可以看成是一摞書。最后一本書放在最上面，也最先被移走。最先放的書在最底層，最后被移走。

為了避免復(fù)雜代碼占用CPU太長時間，一個解法就是定義異步回調(diào)函數(shù)。我們自己來定義一個異步函數(shù)看看：

function greetingAsync(name, callback){
  let greeting = "hello, " + name ;
  setTimeout(_ => callback(greeting),0);
}

greetingAsync("fundebug", console.log);
console.log("start greeting");

我們在greetingAsync中構(gòu)造了greeting語句，然后通過setTimeout定義了異步，callback函數(shù)，是為了讓用戶自己去定義greeting的具體方式。為方便起見，我們時候直接使用console.log。
上面代碼執(zhí)行首先會打印start greeting，然后才是hello, fundebug。也就是說，greetingAsync的回調(diào)函數(shù)后執(zhí)行。在網(wǎng)站開發(fā)中，和服務(wù)器交互的時候需要不斷地發(fā)送各種請求，而一個頁面可能有幾十個請求。如果我們一個一個按照順序來請求并等待結(jié)果，串行的執(zhí)行會使得網(wǎng)頁加載很慢。通過異步的方式，我們可以先發(fā)請求，然后在回調(diào)中處理請求結(jié)果，高效低并發(fā)處理。

下面通過一個例子來描述整個執(zhí)行過程：

const first = function () {
  console.log("First message")
}
const second = function () {
  console.log("Second message")
}
const third = function() {
  console.log("Third message")
}

first();
setTimeout(second, 0);
third();

// 輸出:
  // First message
  // Third message
  // Second message

初始狀態(tài)下，瀏覽器控制臺沒有輸出，并且事件管理器(Event Manager)是空的；

first()被添加到調(diào)用棧

將console.log("First message")加到調(diào)用棧

console.log("First message")執(zhí)行并輸出“First message”到控制臺

console.log("First message")從調(diào)用棧中移除

first()從調(diào)用棧中移除

setTimeout(second, 0)加到調(diào)用棧

setTimeout(second, 0)執(zhí)行，0ms之后，second()被加到回調(diào)隊列

setTimeout(second, 0)從調(diào)用棧中移除

third()加到調(diào)用棧

console.log("Third message")加到調(diào)用棧

console.log("Third message")執(zhí)行并輸出“Third message”到控制臺

console.log("Third message")從調(diào)用棧中移除

third()從調(diào)用棧中移除

Event Loop 將second()從回調(diào)隊列移到調(diào)用棧

console.log("Second message")加到調(diào)用棧

console.log("Second message")Second message”到控制臺

console.log("Second message")從調(diào)用棧中移除

Second()從調(diào)用棧中移除

特別注意的是：second()函數(shù)在0ms之后并沒有立即執(zhí)行，你傳入到setTimeout()函數(shù)的時間和second()延遲執(zhí)行的時間并不一定直接相關(guān)。事件管理器等到setTimeout()設(shè)置的時間到期才會將其加入回調(diào)隊列，而回調(diào)隊列中它執(zhí)行的時間和它在隊列中的位置已經(jīng)它前面的函數(shù)的執(zhí)行時間有關(guān)。

快速掌握J(rèn)avaScript面試基礎(chǔ)知識(一)

快速掌握J(rèn)avaScript面試基礎(chǔ)知識(二)

版權(quán)聲明:
轉(zhuǎn)載時請注明作者Fundebug以及本文地址：
https://blog.fundebug.com/201...