浅析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>
复制代码

结语：学疏才浅，仅供学习与交流