原型與原型鏈，做用域及閉包，異步和單線程

時間 2019-11-21

標籤原型閉包異步單線简体版

原文原文鏈接

原型與原型鏈

說到原型，就不得不提一下構造函數，首先咱們看下面一個簡單的例子：web

function Dog(name,age){ ajax
this.name = name;windows
this.age = age;數組
}網絡
let dog1 = new Dog("哈士奇",3);多線程
let dog2 = new Dog("泰迪",2);閉包

首先創造空的對象，再讓 this 指向這個對象，經過 this.name 進行賦值，最終返回 this，這其實也是 new 一個對象的過程。app

其實：let obj = {} 是 let obj = new Object() 的語法糖；let arr = [] 是 let arr = new Array() 的語法糖；function Dog(){...} 是 let Dog = new Fucntion() 的語法糖。異步

那什麼是原型那？在 js 中，全部對象都是 Object 的實例，並繼承 Object.prototype 的屬性和方法，可是有一些是隱性的。函數

咱們來看一下原型的規則：

1. 全部的引用類型（包括數組，對象，函數）都具備對象特性；可自由擴展屬性。

var obj = {};
obj.attribute = "三座大山";
var arr = [];
arr.attribute = "三座大山";
function fn1 () {}
fn1.attribute = "三座大山";

2. 全部的引用類型（包括數組，對象，函數）都有隱性原型屬性（proto）, 值也是一個普通的對象。

console.log(obj.__proto__);

3. 全部的函數，都有一個 prototype 屬性，值也是一個普通的對象。

console.log(obj.prototype);

4. 全部的引用類型的proto屬性值都指向構造函數的 prototype 屬性值。

console.log(obj.__proto__ === Object.prototype); // true

5. 當試圖獲取對象屬性時，若是對象自己沒有這個屬性，那就會去他的proto（prototype）中去尋找。

function Dog(name){
this.name = name;
}
Dog.prototype.callName = function (){
console.log(this.name,"wang wang");
}
let dog1 = new Dog("Three Mountain");
dog1.printName = function (){
console.log(this.name);
}
dog1.callName(); // Three Mountain wang wang
dog1.printName(); // Three Mountain

原型鏈：以下圖。

我找一個屬性，首先會在 f.proto中去找，由於屬性值爲一個對象，那麼就會去 f.proto.proto去找，同理若是還沒找到，就會一直向上去查找，直到結果爲 null 爲止。這個串起來的鏈即爲原型鏈。

做用域及閉包

講到做用域，你會想到什麼？固然是執行上下文。每一個函數都有本身的 excution context，和 variable object。這些環境用於儲存上下文中的變量，函數聲明，參數等。只有函數才能製造做用域。

PS：for if else 不能創造做用域。

console.log(a) ; // undefined
var a = 1;
//可理解爲
var a;
console.log(a); // undefined
a = 1;

執行 console.log 時，a 只是被聲明出來，並無賦值；因此結果固然是 undefined。

this

本質上來講，在 js 裏 this 是一個指向函數執行環境的指針。this 永遠指向最後調用它的對象，而且在執行時才能獲取值，定義是沒法確認他的值。

var a = {
name : "A",
fn : function （）{
console.log (this.name)
}
}
a.fn() // this === a
a 調用了fn() 因此此時this爲a
a.fn.call ({name : "B"}) // this === {name : "B"}
使用call(),將this的值指定爲{name:"B"}
var fn1 = a.fn
fn1() // this === window
雖然指定fn1 = a.fn，可是調用是有window調用，因此this 爲window

this 有多種使用場景，下面我會主要介紹 4 個使用場景：

1. 做爲構造函數執行

function Student(name,age) {
this.name = name // this === s
this.age = age // this === s
//return this
}
var s = new Student("py1988",30)

首先 new 字段會建立一個空的對象，而後調用 apply() 函數，將 this 指向這個空對象。這樣的話，函數內部的 this 就會被空對象代替。

2. 做爲普通函數執行

function fn () {
console.log (this) // this === window
}
fn ()

3. 做爲對象屬性執行

var obj = {
name : "A",
printName : function () {
console.log (this.name) // this === obj
}
}
obj.printName ()

4.call(),apply(),bind()

三個函數能夠修改 this 的指向，具體請往下看：

var name = "小明" , age = "17"
var obj = {
name : "安妮",
objAge : this.age,
fun : function () {
console.log ( this.name + "今年" + this.age )
}
}
console.log(obj.objAge) // 17
obj.fun() // 安妮今年undefined

var name = "小明" , age = "17"
var obj = {
name : "安妮",
objAge ：this.age,
fun : function (like,dislike) {
console.log (this.name + "今年" + this.age ，"喜歡吃" + like + "不喜歡吃" + dislike)
}
}
var a = { name : "Jay", age : 23 }
obj.fun.call(a,"蘋果","香蕉") // Jay今年23 喜歡吃蘋果不喜歡吃香蕉
obj.fun.apply(a,["蘋果","香蕉"]) // Jay今年23 喜歡吃蘋果不喜歡吃香蕉
obj.fun.bind(a,"蘋果","香蕉")() // Jay今年23 喜歡吃蘋果不喜歡吃香蕉

首先 call，apply，bind 第一個參數都是 this 指向的對象，call 和 apply 若是第一個參數指向 null 或 undefined 時，那麼 this 會指向 windows 對象。

call，apply，bind 的執行方式如上例所示。call，apply 都是改變上下文中的 this，而且是當即執行的。bind 方法可讓對應的函數想何時調用就何時調用。

閉包

閉包的概念很抽象，看下面的例子你就會理解什麼叫閉包了：

function a(){
var n = 0;
this.fun = function () {
n++;
console.log(n);
};
}
var c = new a();
c.fun(); //1
c.fun(); //2

閉包就是可以讀取其餘函數內部變量的函數。在 js 中只有函數內部的子函數才能讀取局部變量。因此能夠簡單的理解爲：定義在內部函數的函數。

用途主要有兩個：

1）前面提到的，讀取函數內部的變量。 2）讓變量值始終保持在內存中。

異步和單線程

咱們先感覺下異步。

console.log("start");
setTimeout(function () {
console.log("medium");
}, 1000);
console.log("end");

使用異步後，打印的順序爲 start-> end->medium。由於沒有阻塞。

爲何會產生異步呢？

首先由於 js 爲單線程，也就是說 CPU 同一時間只能處理一個事務。得按順序，一個一個處理。

如上例所示，第一步：執行第一行打印「start」；第二步：執行 setTimeout，將其中的函數分存起來，等待時間結束後執行；第三步：執行最後一行，打印「end」；第四部：處於空閒狀態，查看暫存中，是否有可執行的函數；第五步：執行分存函數。

爲何 js 引擎是單線程？

js 的主要用途是與用戶互動，以及操做 DOM，這決定它只能是單線程。例：一個線程要添加 DOM 節點，一個線程要刪減 DOM 節點，容易形成分歧。

爲了更好使用多 CPU，H5 提供了 web Worker 標準，容許 js 建立多線程，可是子線程受到主線程控制，並且不得操做 DOM。

任務列隊

單線程就意味着，全部的任務都要排隊，前一個結束，纔會執行後面的任務。若是列隊是由於計算量大，CPU 忙不過來，倒也算了。可是更多的時候，CPU 是閒置的，由於 IO 設備處理得很慢，例如 ajax 讀取網絡數據。js 設計者便想到，主線程徹底能夠無論 IO 設備，將其掛起，而後執行後面的任務。等後面的任務結束掉，在反過頭來處理掛起的任務。

好，咱們來梳理一下：

1）全部的同步任務都在主線程上執行，行程一個執行棧。

2）除了主線程以外，還存在一個任務列隊，只要一步任務有了運行結果，就在任務列隊中植入一個時間。

3）主線程完成全部任務，就會讀取列隊任務，並將其執行。

4）重複上面三步。

只要主線程空了，就會讀取任務列隊，這就是 js 的運行機制，也被稱爲 event loop（事件循環）。