深刻認知 JavaScript

時間 2019-11-08

標籤深刻認知 javascript 欄目 JavaScript 简体版

原文原文鏈接

本文當時寫在本地，發現換電腦很不是方便，在這裏記錄下。javascript

深刻認知 Javascript

:zero: 前言

關於 Javascript，平時咱們僅僅作到了使用，可是真的理解爲何這麼使用嗎？html

這裏詳細介紹一些咱們經常使用的 Javascript 語法。java

:one: 關鍵字

what: 在Javascript 關鍵字是有不少的，而普通的關鍵字基本沒有太多的難度，例如var，eval，void，break...，這裏僅僅挑選兩個 this 和 new 也是最讓人疑惑的關鍵字。數組

1.1 this

在 Javascript6.0 如下，Javascript是沒有塊級做用域的，只有函數做用域。而若是在做用域中嵌套做用域，那麼就會有做用域鏈。瀏覽器

foo = "window";
function first(){
    var foo = "first";
    function second(){
       var foo = "second";
       console.log(foo);
    }
    function third(){
       console.log(foo);
    }
    second(); //second
    third();  //first
}
first();
複製代碼

:exclamation: 理解：當執行second時，JS引擎會將second的做用域放置鏈表的頭部，其次是first的做用域，最後是window對象，因而會造成以下做用域鏈：second->first->window, 此時，JS引擎沿着該做用域鏈查找變量foo, 查到的是 second。當執行third時，third造成的做用域鏈：third->first->window, 所以查到的是：frist。安全

弄清楚做用域，咱們在來看 this 關鍵字，Javascript 中的 this 老是指向當前函數的全部者對象，this老是在運行時才能肯定其具體的指向, 也才能知道它的調用對象app

window.name = "window";
function f(){
    console.log(this.name);
}
f();//window
 
var obj = {name:'obj'};
f.call(obj); //obj
複製代碼

:exclamation: 理解：在執行f()時，此時f()的調用者是window對象，所以輸出 window ，f.call(obj) 是把f()放在obj對象上執行，至關於obj.f(),此時f 中的this就是obj,因此輸出的是 obj函數

Demo 1性能

var foo = "window";
var obj = {
    foo : "obj",
    getFoo : function() {
        return function() {
            return this.foo;
        };
    }
};
var f = obj.getFoo();
f();
複製代碼

**Demo 2 **測試

var foo = "window";
var obj = {
    foo : "obj",
    getFoo : function() {
        var that = this;
        return function(){
            return that.foo;
        };
    }
};
var f = obj.getFoo();
f();
複製代碼

❓ Demo1 和 Demo2 的返回值是多少

:exclamation: 代碼解析：

// demo1:
//執行var f = obj.getFoo()返回的是一個匿名函數，至關於:
var f = function(){
     return this.foo;
}
// f() 至關於window.f(), 所以f中的this指向的是window對象，this.foo至關於window.foo, 因此f()返回"window"
 
// demo2:
// 執行var f = obj.getFoo() 一樣返回匿名函數，即：
var f = function(){
     return that.foo;
}
// 惟一不一樣的是f中的this變成了that, 要知道that是哪一個對象以前，先肯定f的做用域鏈：f->getFoo->window 並在該鏈條上查找that,
// 此時能夠發現that指代的是getFoo中的this, getFoo中的this指向其運行時的調用者，
// 從var f = obj.getFoo() 可知此時this指向的是obj對象，所以that.foo 就至關於obj.foo,因此f()返回 "obj"
複製代碼

1.2 new

what: 和其餘高級語言同樣 Javascript 中也有 new 運算符，咱們知道 new 運算符是用來實例化一個類，從而在內存中分配一個實例對象。但在 Javascript 中，萬物皆對象，爲何還要經過 new 來產生對象

1.2.1 認識

先看一個例子

01 function Animal(name){
02     this.name = name;
03 }
04 Animal.color = "black";
05 Animal.prototype.say = function(){
06	   console.log("I'm " + this.name);
07 };
08 var cat = new Animal("cat");
09
10 console.log(
11     cat.name,  //cat
12	   cat.height //undefined
13 );
14 cat.say(); //I'm cat
15
16 console.log(
17	   Animal.name, //Animal
18	   Animal.color //back
19 );
20 Animal.say(); //Animal.say is not a function
複製代碼

:exclamation: 代碼解析：

:small_blue_diamond: 1-3行建立了一個函數 Animal，並在其 this 上定義了屬性 name，name的值是函數被執行時的形參。

:small_blue_diamond: 4行在 Animal 對象（Animal 自己是一個函數對象）上定義了一個靜態屬性 color，並賦值「black」

:small_blue_diamond: 5-7行在 Animal 函數的原型對象 prototype 上定義了一個 say 方法，say 方法輸出了 this.name。

:small_blue_diamond: 8行經過 new 關鍵字建立了一個新對象 cat。

:small_blue_diamond: 10-14行 cat 對象嘗試訪問 name 和 color 屬性，並調用 say 方法。

:small_blue_diamond: 16-20行 Animal 對象嘗試訪問 name 和 color 屬性，並調用 say 方法。

:exclamation: 重點解析：

注意到第 8 行，

var cat = new Animal("cat");
複製代碼

JS引擎執行這句代碼時，在內部作了不少工做，用僞代碼模擬其工做流程以下：

new Animal("cat") = {
    var obj = {};
    obj.__proto__ = Animal.prototype;
    var result = Animal.call(obj, "cat");
    return typeof result === 'object'? result : obj;
}
複製代碼

:exclamation: 代碼解析：

:small_blue_diamond: 建立一個空對象obj;

:small_blue_diamond: 把obj 的 __proto__ 指向 Animal 的原型對象 prototype，此時便創建了 obj 對象的原型鏈：

obj :arrow_right: Animal.prototype :arrow_right: Object.prototype :arrow_right: null

簡單解釋下原型對象和原型鏈：

原型對象：指給後臺函數繼承的父對象

原型鏈：連接成 java 的繼承

🔹 在obj對象的執行環境調用Animal函數並傳遞參數cat。至關於var result = obj.Animal("cat")。當這句執行完以後，obj便產生了屬性name並賦值爲cat。

簡單解釋下 call 和 apply：

相同：調用一個對象的一個方法，用另外一個對象替換當前對象。

B.call(A, args1,args2); 即A對象調用B對象的方法。

B.apply(A, arguments); 即A對象應用B對象的方法

不一樣: 二者傳入的列表形式不同

call能夠傳入多個參數

apply只能傳入兩個參數，因此其第二個參數每每是做爲數組形式傳入

🔹 考察第3步返回的返回值，若是無返回值或者返回一個非對象值，則將obj返回做爲新對象；不然會將返回值做爲新對象返回。

❗️ 深刻解析：

理解new的運行機制之後，咱們知道cat其實就是過程（4）的返回值，所以咱們對cat對象的認知就多了一些：

cat的原型鏈是： cat :arrow_right: Animal.prototype :arrow_right: Object.prototype :arrow_right: null

cat上新增了一個屬性：name

分析完了cat的產生過程，咱們再看看輸出結果：

🔹 cat.name -> 在過程（3）中，obj對象就產生了name屬性。所以cat.name就是這裏的obj.name

🔹 cat.color -> cat會先查找自身的color，沒有找到便會沿着原型鏈查找，在上述例子中，咱們僅在Animal對象上定義了color,並無在其原型鏈上定義，所以找不到。

🔹 cat.say -> cat會先查找自身的say方法，沒有找到便會沿着原型鏈查找，在上述例子中，咱們在Animal的prototype上定義了say,所以在原型鏈上找到了say方法。

另外，在say方法中還訪問this.name，這裏的this指的是其調用者obj,所以輸出的是obj.name的值。

對於Animal來講，它自己也是一個對象，所以，它在訪問屬性和方法時也遵照上述查找規則，因此：

🔹 Animal.color -> "black"

🔹 Animal.name -> "Animal" , Animal先查找自身的name, 找到了name，注意：但這個name不是咱們定義的name,而是函數對象內置的屬性。通常狀況下，函數對象在產生時會內置name屬性並將函數名做爲賦值（僅函數對象）。

🔹 Animal.say -> Animal在自身沒有找到say方法，也會沿着其原型鏈查找，話說Animal的原型鏈是什麼呢？

從測試結果看：Animal的原型鏈是這樣的：

Animal :arrow_right: Function.prototype :arrow_right: Object.prototype :arrow_right: null

所以Animal的原型鏈上沒有定義say方法！

1.2.2 存在的意義

以前提到js中，萬物皆對象，爲何還要經過new來產生對象？要弄明白這個問題，咱們首先要搞清楚cat和Animal的關係。

經過上面的分析，咱們發現cat繼承了Animal中的部分屬性，所以咱們能夠簡單的理解：Animal和cat是繼承關係。

另外一方面，cat是經過new產生的對象，那麼cat究竟是不是Animal的實例對象？咱們先來了解一下JS是如何來定義「實例對象」的？

A instanceof B
複製代碼

若是上述表達式爲true,JS認爲A是B的實例對象，咱們用這個方法來判斷一下cat和Animal

var isInstance = cat instanceof Animal; //true 
複製代碼

❗️ 代碼解析：

cat 確實是 Animal 實例，要想證明這個結果，咱們再來了解一下JS中 instanceof 的判斷規則：

var L = A.proto; 
var R = B.prototype; 
console.log(L === R);
複製代碼

在new的執行過程當中，cat的__proto__指向了Animal的prototype，因此cat和Animal符合instanceof的判斷結果。所以，咱們認爲：cat是Animal的實例對象。

1.2.3 總結

在javascript中, 經過new能夠產生原對象的一個實例對象，而這個實例對象繼承了原對象的屬性和方法。所以，new存在的意義在於它實現了javascript中的繼承，而不只僅是實例化了一個對象！

:two: 高級函數

what: 在Javascript中，對象分普通對象和函數對象，普通的常見，這裏不作說明。提及 Javascript的函數，十分強大。它們是第一類對象，也能夠做爲另外一個對象的方法，還能夠做爲參數傳入另外一個函數，不只如此，還能被一個函數返回！能夠說，在JS中，函數無處不在，無所不能。

why: 除了函數相關的基礎知識外，掌握一些高級函數並應用起來，不只能讓JS代碼看起來更爲精簡，還能夠提高性能。

2.1 安全構造函數

常規寫法：

function Person(name,age){
this.name = name;
this.age = age;
}
var p1 = new Person("Claiyre",80);
複製代碼

可是，若是忘記加new了會發生什麼？

var p3 = Person("Tom",30);
console.log(p3); //undefined
console.log(window.name); //Tom
複製代碼

因爲使用了不安全的構造函數，上面的代碼意外的改變了window的name，由於this對象是在運行時綁定的，使用new調用構造函數時this是指向新建立的對象的，不使用new時，this是指向window的。因爲window的name屬性是用來識別連接目標和frame的，所在這裏對該屬性的偶然覆蓋可能致使其餘錯誤。

做用域安全的構造函數會首先確認this對象是正確類型的實例，而後再進行更改，以下：

function Person(name,age){
    if(this instanceof Person){
        this.name = name;
        this.age = age;
    } else {
    	return new Person(name,age);
    }
}
複製代碼

:pushpin: 做用：避免了在全局對象上意外更改或設置屬性。在多人協做的項目中，爲了不他們誤改了全局對象，使用做用域安全的構造函數會更好。

2.2 惰性載入函數

因爲瀏覽器間的行爲差別，代碼中可能會有許多檢測瀏覽器行爲的if語句。但用戶的瀏覽器若支持某一特性，便會一直支持，因此這些if語句，只用被執行一次，即使只有一個if語句的代碼，也比沒有要快。惰性載入表示函數執行的分支僅會執行一次，有兩種實現惰性載入的方式

第一種就是在函數第一次被調用時再處理函數，用檢測到的結果重寫原函數。

function detection(){
    if(//支持某特性){
        detection = function(){
        //直接用支持的特性
        }
    } else if(//支持第二種特性){
        detection = function(){
        //用第二種特性
        }
    } else {
        detection = function(){
        //用其餘解決方案
        }
    }
}
複製代碼

第二種實現惰性載入的方式是在聲明函數時就指定適當的函數

var detection = (function(){
    if(//支持某特性){
        return function(){
        //直接用支持的特性
        }
    } else if(//支持第二種特性){
        return function(){
        //用第二種特性
        }
    } else {
        return function(){
        //用其餘解決方案
        }
    }
})();
複製代碼

📌 做用：惰性載入函數的有點是在只初次執行時犧牲一點性能，以後便不會再有多餘的消耗性能。

2.3 函數綁定做用域

在JS中，函數的做用域是在函數被調用時動態綁定的，也就是說函數的this對象的指向是不定的，但在一些狀況下，咱們須要讓某一函數的執行做用域固定，老是指向某一對象。這時能夠用函數綁定做用域函數。

function bind(fn, context){
    return function(){
    	return fn.apply(context, arguments);
    }
}
複製代碼

// 具體一點
var person1 = {
    name: "claiyre",
    sayName: function(){
    	alert(this.name);
    }
}
var sayPerson1Name = bind(person1.sayName, person1);
sayPerson1Name(); // claiyre
複製代碼

📌 做用：函數的this對象固定，老是指向某一對象

2.4 函數柯里化

只傳遞部分參數來調用函數，而後讓函數返回另外一個函數去處理剩下的參數。能夠理解爲賦予了函數「加載」的能力。

// 較爲簡單的實現curry的方式
function curry(fn){
    var i = 0;
    var outer = Array.prototype.slice.call(arguments,1);
    var len = fn.length;
    return function(){
        var inner = outer.concat(Array.prototype.slice.call(arguments));
        return inner.length === len?fn.apply(null,inner) : function (){
            var finalArgs = inner.concat(Array.prototype.slice.call(arguments));
            return fn.apply(null,finalArgs);
        }
    }
}
// 一旦函數通過柯里化，咱們就能夠先傳遞部分參數調用它，而後獲得一個更具體的函數。
var match = curry(function(what,str){
	return str.match(what)
});
 
var hasNumber = match(/[0-9]+/g);
var hasSpace = match(/\s+/g)
 
hasNumber("123asd"); // ['123']
hasNumber("hello world!"); // null
 
hasSpace("hello world!"); // [' '];
hasSpace("hello"); // null
 
console.log(match(/\s+/g,'i am Claiyre')); // 直接所有傳參也可： [' ',' ']
複製代碼

📌 做用：逐步的具體化函數，最後獲得結果

2.5 debounce函數 (去抖函數)

當函數被調用時，不當即執行相應的語句，而是等待固定的時間w,若在w時間內，即等待還未結束時，函數又被調用了一次，則再等待w時間，重複上述過程，直到最後一次被調用後的w時間內該函數都沒有被再調用，則執行相應的代碼。

var myFunc = debounce(function(){
// 繁重、耗性能的操做
}，250); // 函數節流
window.addEventListener('resize',myFunc);
複製代碼

📌 做用：防止某一函數被連續調用，從而致使瀏覽器卡死或崩潰

2.6 once函數

function once(fn){
    var result;
    return function(){
        if(fn){
        result = fn(arguments);
        fn = null; // 在被執行過一次後,參數fn就被賦值null了，那麼在接下來被調用時，便不再會進入到if語句中了，也就是第一次被調用後，該函數永遠不會被執行了。
        }
		return result;
	}
}
 
var init = once(function(){
	// 初始化操做
})
複製代碼