摘要：深入認知前言關于，平時我們僅僅做到了使用，但是真的理解為什么這么使用嗎這里詳細介紹一些我們常用的語法。在以下，是沒有塊級作用域的，只有函數(shù)作用域。而如果在作用域中嵌套作用域，那么就會有作用域鏈。

本文當時寫在本地，發(fā)現(xiàn)換電腦很不是方便，在這里記錄下。

關于 Javascript，平時我們僅僅做到了使用，但是真的理解為什么這么使用嗎？

這里詳細介紹一些我們常用的 Javascript 語法。

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

在 Javascript6.0 以下，Javascript是沒有塊級作用域的，只有函數(shù)作用域。而如果在作用域中嵌套作用域，那么就會有作用域鏈。

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();

理解：當執(zhí)行second時，JS引擎會將second的作用域放置鏈表的頭部，其次是first的作用域，最后是window對象，于是會形成如下作用域鏈：second->first->window, 此時，JS引擎沿著該作用域鏈查找變量foo, 查到的是 second。當執(zhí)行third時，third形成的作用域鏈：third->first->window, 因此查到的是：frist。

弄清楚作用域，我們在來看 this 關鍵字，Javascript 中的 this 總是指向當前函數(shù)的所有者對象，this總是在運行時才能確定其具體的指向, 也才能知道它的調(diào)用對象

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

理解：在執(zhí)行f()時，此時f()的調(diào)用者是window對象，因此輸出 window ，f.call(obj) 是把f()放在obj對象上執(zhí)行，相當于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 的返回值是多少

代碼解析：

// demo1:
//執(zhí)行var  f = obj.getFoo()返回的是一個匿名函數(shù)，相當于:
var f = function(){
     return this.foo;
}
// f() 相當于window.f(), 因此f中的this指向的是window對象，this.foo相當于window.foo, 所以f()返回"window"
 
// demo2:
// 執(zhí)行var f = obj.getFoo() 同樣返回匿名函數(shù)，即：
var f = function(){
     return that.foo;
}
// 唯一不同的是f中的this變成了that, 要知道that是哪個對象之前，先確定f的作用域鏈：f->getFoo->window 并在該鏈條上查找that,
// 此時可以發(fā)現(xiàn)that指代的是getFoo中的this, getFoo中的this指向其運行時的調(diào)用者，
// 從var f = obj.getFoo() 可知此時this指向的是obj對象，因此that.foo 就相當于obj.foo,所以f()返回 "obj"

what: 和其他高級語言一樣 Javascript 中也有 new 運算符，我們知道 new 運算符是用來實例化一個類，從而在內(nèi)存中分配一個實例對象。 但在 Javascript 中，萬物皆對象，為什么還要通過 new 來產(chǎn)生對象

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

代碼解析：

1-3行創(chuàng)建了一個函數(shù) Animal，并在其 this 上定義了屬性 name，name的值是函數(shù)被執(zhí)行時的形參。

4行在 Animal 對象（Animal 本身是一個函數(shù)對象）上定義了一個靜態(tài)屬性 color，并賦值“black”

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

8行通過 new 關鍵字創(chuàng)建了一個新對象 cat。

10-14行 cat 對象嘗試訪問 name 和 color 屬性，并調(diào)用 say 方法。

16-20行 Animal 對象嘗試訪問 name 和 color 屬性，并調(diào)用 say 方法。

重點解析：

注意到第 8 行，

var cat = new Animal("cat");

JS引擎執(zhí)行這句代碼時，在內(nèi)部做了很多工作，用偽代碼模擬其工作流程如下：

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

代碼解析：

創(chuàng)建一個空對象obj;

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

obj Animal.prototype Object.prototype null

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

原型對象：指給后臺函數(shù)繼承的父對象
原型鏈：鏈接成 java 的繼承