一、原型链

每一个构造函数都有一个prototype属性，这个属性就叫原型对象。

每一个构造函数new出来的对象都有一个–proto–属性，这个属性指向原型对象。

<script>
   function Car(){
           //实例属性：
          //this.produce = ‘chevrolet‘,
          this.price = 8800000;
       }
          //原型属性：
       Car.prototype.produce = "BMW";
       var chevrolet = new Car();
       console.log(chevrolet.produce,chevrolet.price);//BMW 8800000  
       console.log(chevrolet==Car.prototype);//false;  构造函数new出来的对象和构造函数的原型对象不是同一个对象。
       console.log(chevrolet.produce==Car.prototype.produce);//true;
       /*构造函数new出来的对象和构造函数的原型对象不是同一个对象,为什么构造函数new出来的对象能获取到构造函数原型对象的
       属性：因为每一个构造函数new出来的对象都有一个--protot--原型链，该原型链可以把new出来的对象和原型对象连接在一起。
       */
</script>

<script>
//    function Car(){
//        //实例属性：
//       this.produce = ‘chevrolet‘,
//       this.price = 8800000;
//    }
//    var chevrolet = new Car();
//    console.log(chevrolet.produce,chevrolet.price);//chevrolet 8800000


//    function Car(){
//        //实例属性：
//      // this.produce = ‘chevrolet‘,
//       this.price = 8800000;
//    }
//    //原型属性：
//    Car.prototype.produce = "BMW";//prototype相对于构造函数而言，写法：构造函数名.prototype.属性
//    var chevrolet = new Car();
//    console.log(chevrolet.produce,chevrolet.price);//BMW 8800000

//    function Car(){
//        //实例属性：
//       this.produce = ‘chevrolet‘,
//       this.price = 8800000;
//    }
//    //原型属性：
//    Car.prototype.produce = "BMW";
//    var chevrolet = new Car();
//    console.log(chevrolet.produce,chevrolet.price);//chevrolet 8800000  原型链的解析过程：先找实例属性，再找原型属性。

   function Car(){
       //实例属性：
      //this.produce = ‘chevrolet‘,
      this.price = 8800000;
   }
   //原型属性：
  // Car.prototype.produce = "BMW";
   var chevrolet = new Car();
   Object.prototype.produce = ‘Audi‘;
   console.log(chevrolet.produce,chevrolet.price);//Audi 8800000  
   //原型链的解析过程：先找实例属性，再找原型属性,若实例属性和原型属性都不存在，则找Object的原型属性。

</script>

二、作用域链

全局作用域、局部作用域。

<script>
   var num = 10;
   function fn(num){
       num = 20;
   }
   fn();
   console.log(num);//10
   //向上查找，在函数体内找到同样的变量，操作的就是局部，否则是全局。
   //题解：1.找var,fn-->2.逐行解析代码：全局变量num;遇到函数跳过；调用函数，解析函数体：变量num向上查找，在函数体内
   //找到形参num,所以此处num是局部变量，因此输出结果为全局变量num=10。
</script>

<script>
   var num = 10;
   function fn(){
       num = 20;
   }
   fn();
   console.log(num);//20
   //题解：1.找var,fn——>2.逐行解析代码：全局变量num;遇到函数跳过；调用函数，解析函数体：变量num向上查找，在函数体内
   //没有找到num,继续在全局范围内找，找到全局变量num,并将num=20赋值于全局变量，因此输出结果为全局变量num=20。
</script>

<script>
    var num = 10;
   function fn(){
     var num = 20;//在函数体内部使用var明确定义的变量是私有变量。
   }
   fn();
   console.log(num);//10
   //题解：函数调用后，函数体内的变量会被销毁，所以输出结果10。
</script>

三、原型链和作用域链的区别：

原型链：原型链作用在构造函数上，原型链操作的是构造函数的属性：实例属性和原型属性；

作用域链：作用域链作用域普通函数上，操作的是全局变量和局部变量。

总结

目录

1.作用域链

2.原型链

1.作用域链

JavaScript 在执⾏过程中会创建一个个的可执⾏上下⽂。 (每个函数执行都会创建这么一个可执行上下文)

每个可执⾏上下⽂的词法环境中包含了对外部词法环境的引⽤，可通过该引⽤来获取外部词法环境中的变量和声明等。

这些引⽤串联起来，⼀直指向全局的词法环境，形成一个链式结构，被称为作⽤域链。

简而言之: 函数内部 可以访问到 函数外部作用域的变量, 而外部函数还可以访问到全局作用域的变量,

这样的变量作用域访问的链式结构, 被称之为作用域链

let num = 1
​
function fn () {
  let a = 100
  function inner () {
    console.log(a)
    console.log(num)
  }
  inner()
}
fn()

下图为由多个可执行上下文组成的调用栈：

• 栈最底部为全局可执行上下文

• 全局可执行上下文 之上有多个 函数可执行上下文

• 每个可执行上下文中包含了指向外部其他可执行上下文的引用，直到 全局可执行上下文 时它指向 null

js全局有全局可执行上下文, 每个函数调用时, 有着函数的可执行上下文, 会入js调用栈

每个可执行上下文, 都有者对于外部上下文词法作用域的引用, 外部上下文也有着对于再外部的上下文词法作用域的引用

=> 就形成了作用域链

2.原型链

要讲清楚这个问题，主要着重这几个方面：

• 什么是原型对象

• 构造函数, 原型对象, 实例的三角关系图

• 原型链如何形成

原型对象

在 JavaScript 中，除去一部分内建函数，绝大多数的函数都会包含有一个叫做 prototype 的属性，指向原型对象，

基于构造函数创建出来的实例, 都可以共享访问原型对象的属性。

例如我们的 hasOwnProperty, toString ⽅法等其实是 Obejct 原型对象的方法，它可以被任何对象当做⾃⼰的⽅法来使⽤。

hasOwnProperty 用于判断, 某个属性, 是不是自己的 (还是原型链上的)

来看一段代码：

let person = { 
  name: "Tom", 
  age: 18, 
  job: "student"
}
​
console.log(person.hasOwnProperty("name")) // true 
console.log(person.hasOwnProperty("hasOwnProperty")) // false 
console.log(Object.prototype.hasOwnProperty("hasOwnProperty")) // true

可以看到，hasOwnProperty 并不是 person 对象的属性，但是 person 却能调用它。

那么 person 对象是如何找到 Object 原型中的 hasOwnProperty 的呢？这就要靠原型链的能力了。

原型链

在 JavaScript 中，每个对象中都有一个 __proto__ 属性，这个属性指向了当前对象的构造函数的原型。

对象可以通过自身的 __proto__属性与它的构造函数的原型对象连接起来，

而因为它的原型对象也有 __proto__，因此这样就串联形成一个链式结构，也就是我们称为的原型链。

一.原型链与作用域链
区别：

1. 作用域是对于变量而言，原型链是对于对象的属性。
2. 作用域链顶层是window，原型链顶层是Object。

联系：从链表开头寻找，直到找到为止。

二、作用域链

1. 作用域
   作用域就是变量与函数的可访问范围，即作用域控制着变量与函数的可见性和生命周期。作用域分为全局作用域和局部作用域
   全局作用域：任何地方都能访问到的对象拥有全局作用域。
   局部作用域：局部作用域一般只在固定的代码片段内可访问到，最常见的例如函数内部，所以在一些地方会把这种作用域成为函数作用域。
2. 作用域链
   作用域链，即当声明一个函数时，局部作用域一级一级向上包起来，就是作用域链。
   var a = 10;
   function fun(){
   console.log(a);
   var a = 1;
   var b = 20;
   b++;
   function fun1(){
   console.log(b);
   b += 6;
   function fun2(){
   console.log(b);
   console.log(a);
   }
   }
   console.log(a);
   }
   
   1、首先，开始执行前，创建执行环境（数组）：ECS
   向执行环境栈中压入第一个默认的函数main()，创建全局作用域对象Window，全局做预编译GO，函数的隐藏属性scope记录执行期上下包括自己的所属作用域的对象。如上图
   2、执行开始，在执行环境中压入新的函数，创建一个活动的AO，保存函数中的局部变量，当自己的AO中没有该变量，可以通AO中的parent(scope)中去寻找。
   3、执行结束，执行环境中的的本次函数出栈，同时创建的活动对象AO消失。

三、原型链

1. 什么是原型
   每个构造函数都有一个prototype属性，这个属性指向一个对象，即原型对象。
   原型对象默认拥有一个constructor属性，指向指向它的那个构造函数（也就是说构造函数和原型对象是互相指向的关系）。
2. 什么是原型链
   由于__proto__任何对象都具有的属性，js中一切都是对象，所以一条由__proto__形成的链条，顶端为null，即原型链。

function Student(sname, sage){
this.sname = sname;
this.sage = sage;
}
Student.prototype.intr = function(){
console.log(I'm ${this.sname},I'm ${this.sage});
}
var lilie = new Student(“Li Lei”, 12);
var hmm = new Student(“Han Meimei”, 12);

其原型链图如下

Student.proto ==>Function.prototype
Function.prototype.constructor ==> function Function(){}
Function.prototype.proto ==>Object.prototype
Function.prototype.proto ==>Object.prototype