淺析Js之 「做用域鏈與原型鏈「篇

1、做用域鏈

在談及做用域鏈以前，首先要談談做用域

1.做用域（Scope）

概念：在某一區域執行Js代碼時，需對變量或函數的值進行訪問，而這一區域又提供對變量或函數的查找，並肯定是否能夠訪問，則稱該區域爲做用域

做用域可分爲全局做用域(Global)與局部做用域(Local)

代碼示例：

<script>
var  a = 1;     //全局變量
function f(){
    var b = 2;  //局部變量
    console.log(a,b)    //1 2
}
f();
console.log(b)   //Uncaught ReferenceError:   b is not defined
</script>
複製代碼

Js中並無塊級做用域，都是相對函數而言的，而ES6新增能夠在函數內用Let聲明變量，使變量只能在代碼塊內有效

2.做用域鏈（Scope Chain）

概念: Js做用域鏈其實就是從函數內部訪問外部函數外部變量的一種機制，它從內到外進行鏈式查找,那麼他是如何進行查找的呢？如下從執行上下文的角度分析

代碼示例：

<script>
var a = 1;
function f(){
    var b = 2;
    var c = 3;
    function f1(){
        var d = 4;
        function f2(){
            console.log(b,c,d);     //2,3,4
        }
        f2();
    }
    f1();
    console.log(b,c);   //2,3
    console.log(d);     //Uncaught ReferenceError: d is not defined
    }
f();
</script>
複製代碼

因爲函數裏面再次定義了函數，因此呢，造成一個執行上下文的先後相互引用的關係，也就產生一個做用域鏈。

2、原型鏈（Prototype Chain）

1. 原型(Prototype)

• prototype其實就是原型，每個函數都有一個原型，它的值是一個對象;
• 在對象的實例化中包含了不少屬性，但其中必定有一個Constructor方法，它指向函數自己
• _proto_也是每個對象都具備的屬性，它指向建立這個對象的prototype

2. 原型鏈（Prototype Chain）

概念: 若是訪問一個對象的屬性時，先在這個對象本身的屬性中去找，若是找不到，則沿着_proto_這個屬性向中找，若是_proto_這個對象中仍是沒有找到，就在_proto_對象的_proto_屬性中去找，依次下去，這就是原型鏈。

代碼示例：

Function.prototype.new = "New Function !";
function f(){}
console.log(f.new);     //  New Function !
複製代碼

圖示以下：

函數f調用new方法，先從本身的 _proto_找，找不到就往 Function的 prototype中找，因爲我在 Function中建立了一個 new方法，因此能夠找到

因爲對象的__proto__[隱式原型]與建立這個對象的函數（構造器）的prototype是一致的。 因此理論上，你對__proto__修改會直接影響prototype。

3. 原型擴展：繼承

<script>
 function Parent(yourname){
        this.name = yourname;
    }
    
Parent.prototype.say = function (){
        console.log(this.name);
    }
    
function Son(yourname){
        Parent.call(this,yourname);     //調用父對象的構造器，把當前子類的對象傳給this
    }
    
Son.prototype = Parent.prototype;       //讓子對象的_proto_指向父對象的prototype
Son.prototype.constructor = Son;        //讓prototype原型上的constructor在指向Son
var s = new Son('Alex');
s.say();                            //  Alex
</script>
複製代碼

結語：學疏才淺，僅供學習與交流