精华内容
下载资源
问答
  • js作用域链和原型链

    2020-02-16 09:35:10
    作用域链 如果要理解作用域链就要先理解作用域,所以要先明白作用域 一、作用域 作用域就是变量与函数的可访问范围 即作用域控制着变量与函数的可见性生命周期 二、作用域分为全局作用域局部作用域 全局作用域...

    作用域链

    如果要理解作用域链就要先理解作用域,所以要先明白作用域
    一、作用域

    作用域就是变量与函数的可访问范围
    即作用域控制着变量与函数的可见性和生命周期
    

    二、作用域分为全局作用域和局部作用域

    全局作用域:代码在程序的任何地方都能被访问,window 对象的内置属性都拥有全局作用域。
    局部作用域:在固定的代码片段才能被访问。函数内部的声明式函数也是局部函数

    三、[[scope]]

    [[scope]]: 每个JavaScript函数都是一个对象,对象中有些属性我们可以访问,但有些不可以,这些属性仅供JavaScript引擎存取,
    [[scope]]就是其中一个,[[scope]]指的是我们所说的作用域,其中存储了运行期上下文集合;

    四、作用域链

    作用域链: [[scope]]中所存储的执行期上下文对象集合,这个集合呈链式链接,我们把这种链式链接叫做作用域链;
    逐层衍生、逐层嵌套的作用域拥有以下的特性:
    1.外层作用域无法调用内层作用域的变量和常量
    2.代码执行需要时,优先引用当前所在执行环境中的变量和常量
    3.直至追溯到最外层作用域( window 或 global)仍未定义的引用,即为 not defined.

    原型链

    JavaScript的所有对象中都包含了一个 __proto__内部属性,这个属性所对应的就是自身的原型,实例与原型之间的链条形成的链式结构叫做原型链
    1.prototype

    prototype是函数独有的属性,它从一个函数指向另一个对象,代表这个对象是这个函数的原型对象,这个对象也是当前函数所创建的实例的原型对象。
    2.proto

    __proto__属性是对象(包括函数)独有的。__proto__属性是从一个对象指向另一个对象,即从一个对象指向该对象的原型对象(也可以理解为父对象)
    3.constructor

    constructor是原型对象有的属性,它是从一个对象指向一个函数的。指向的函数就是该对象的构造函数。
    原型链的一些特点

    1.所有的实例的__ proto __ 都指向该构造函数的原型对象(prototype)。

    2.所有的函数(包括构造函数)是Function的实例,所以所有函数的__ proto __的都指向Function的原型对象。

    3.所有的原型对象(包括 Function的原型对象)都是Object的实例,所以__ proto__都指向 Object(构造函数)的原型对象。而Object构造函数的__ proto __指向 null。

    4.Function构造函数本身就是Function的实例,所以__ proto __指向Function的原型对象。
    当读取实例的属性时,如果找不到,就会查找与对象关联的原型中的属性,如果还查不到,就去找原型的原型,一直找到最顶层为止。

    展开全文
  • 深入理解js原型链和作用域链,了解作用域链和原型链的区别一、原型链二、作用域链三、原型链和作用域链的区别:总结 一、原型链 每一个构造函数都有一个prototype属性,这个属性就叫原型对象。 每一个构造函数new...

    深入理解js原型链和作用域链,了解作用域链和原型链的区别

    一、原型链

    每一个构造函数都有一个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>
    

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

    原型链:原型链作用在构造函数上,原型链操作的是构造函数的属性:实例属性和原型属性;

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

    总结

    good afternoon
    展开全文
  • 最在在学习前端一些技术,首先就看了js红宝书,觉得这本书确实讲的很细致,值得看,接下来就是根据我看的我自己理解的对作用域链和原型链的总结。作用域链:提到作用域链,大家应该都会想到一个名词执行环境,执行...

    最在在学习前端一些技术,首先就看了js红宝书,觉得这本书确实讲的很细致,值得看,接下来就是根据我看的我自己理解的对作用域链和原型链的总结。

    作用域链:提到作用域链,大家应该都会想到一个名词执行环境,执行环境就是代码执行时的作用域,与执行环境相对应的一个就是变量对象,每一个执行环境都对应一个变量对象,变量对象是存储该执行环境里函数和变量的一个对象。当代码执行的时候,会根据变量对象生成一个作用域链。作用域链的前端总是当前执行环境的变量对象。作用域链的下一个变量对象是包含环境,而再下一个变量对象是包含环境的包含环境,……最后一个变量对象总是全局执行环境对应的变量对象。

    变量对象中保存的是该变量对象对应的执行环境中所定义的变量和函数,每一个变量对象中都有一个argument属性,该属性是一个类数组对象。

    作用域链有个特点,作用域链只能支持向上搜索,而不支持向下搜索,就是当前执行环境中可以访问其包含环境中的变量和函数,而不可以访问其被包含环境中的变量和函数。

    而原型链是在继承的时候用的一个很重要的概念。其基本思想就是通过原型让一个引用类型来使用另一个引用类型的属性和函数。

    下面我通过一个简单的例子来说明使用原型链实现继承。

    function A(){

        this.property=true;

    }

    A.prototype.getAValue=function (){

        return this.property;

    }

    function B(){

        this.myproperty=false;

    }

    B.prototype=new A();

    B.prototype.getBValue=function (){

        return this.myproperty;

    }


    var instance = new B();

    console.log(instance.property);

    console.log(instance.getAValue());//true

    加粗部分就是B继承A。

    而他的原理是这样的

    因为每一个对象中都有prototype这个属性,这个属性是一个对象,该对象指向的是该属性所在构造函数的原型对象。A.prototype指向的是A的原型对象,而B.prototype指向的是B的原型对象。B.prototype=new A()。实际上是将B的原型对象中的[[Prototype]]的指向改变为A的原型对象。


    展开全文
  • 作用域链 百度:js中一切都是对象,包括函数,拥有可以通过代码访问的属性只有js引擎能够访问的属性,其中一个内部属性是 作用域,包含了函数被创建的时作用域中的所有对象的集合。称为函数的作用域。 通常来说...

    作用域链
    百度:js中一切都是对象,包括函数,拥有可以通过代码访问的属性和只有js引擎能够访问的属性,其中一个内部属性是 作用域,包含了函数被创建的时作用域中的所有对象的集合。称为函数的作用域。
    通常来说,一段程序代码中使用的函数和变量不总是可用的,限定其可用的范围及作用域
    作用域的使用提高了程序逻辑的局部性增强程序的可靠性,减少名字的冲突。
    作用域链决定了哪些数据能够被函数访问,当一个函数创建后它的作用域链会被创建此函数的作用域中可访问的对象所填充。
    每一个execution context 都会分配一个变量对象。变量对象的属性是由变量和函数申明构成。在函数上下文情况下,参数列表的值也会被加入到变量对象中作为属性。变量对象和当前作用域息息相关,不同的作用域变量对象互不相同,他保存了当前作用域的所有函数和变量。

    关于global object
    Global object 其实就是 变量对象。当js编译器开始执行的时候,会初始化一个global object 来关联全局的作用。对于全局作用域而言,global object j就是variable object.在浏览器端 被具象成为window 对象。也就是说global object == 全局环境的variable object == window

    关于活动对像 activation object
    在函数被激活的时候,活动对象会被创建并且会被分配给执行上下文,ao是由特殊的对象arguments初始化而成,随后被当做变量对象用作函数初始化。

    执行环境和作用域链 execution Context and scope chain
    执行环境可以抽象的理解为一个对象

    executionContext:{
    Variable object:vars,function declared,arguments
    Scope chain: variable object + all parent scopes
    thisValue :conext object
    }

    此外js解释器运行阶段还会维护一个环境栈。栈顶始终是正在执行的函数环境。

    总结:
    在ECMAScript 中只有函数可以创建一个新的作用域。在函数内部定义的变量和内部函数,函数外部是不能直接访问的。
    变量对象是由变量和函数声明 组成的,如果再加上arguments 和形参,那么就是活动对象。
    作用域链与原型链的类似。如果一个变量在函数自身的作用域(活动变量)中搜索不到,那么就会搜索父级作用域中的变量对象。以此类推。

    静态作用域是一个语言拥有闭包的必须条件。ECMAScript 完全支持闭包,技术上是通过[[scope]] 实现的。

    闭包是一个代码块和以静态方式存储所有父级作用域的一个集合体。所以通过这些作用域函数可以很容易的找到自由变量。
    闭包中可能有多个函数有相同的父级作用域,那么同时操作父级作用域的数据时候,会出现问题。

    var data =[];
    For(var k = 0;k<3;k++){
    Data[k] = function(){
    Alert(k)
    }
    }
    Data[0]()//3

    这是因为所有这些函数拥有相同的[[scope]]

    函数调用的的时候活动对象被创建,就是变量对象+arguments + 参数变量

    作用域链:
    这里写图片描述
    这里写图片描述

    原型链:
    function SuperType(){
    this.property = true;
    }
    SuperType.prototype.geSupertPropertyValue = function(){
    alert(this.property);
    }
    function SubType(){
    this.property = false;
    }
    SubType.prototype = new SuperType();
    SubType.prototype.getSubPropertyValue = function(){
    alert(this.property);
    }
    var instance = new SubType();
    instance.geSupertPropertyValue ();//true
    
    //会经过(1) 搜索实例(2) 搜索SubType.prototype(3) 搜索SuperType.prototype
    
    
    __proto__ 是指向构造该实例的构造函数的原型
    展开全文
  • JavaScript作用域链和原型链 作用域链 作用域 ​ 作用域,是指变量的生命周期(一个变量在哪个范围内保持一定的值),在JavaScript中,作用域分为以下几种:全局作用域、函数作用域、块级作用域、动态作用域。 ...
  • 首先,要分清作用域链原型链的区别,简单来说作用域链是相对于函数的,原型链是相对于对象的js中访问变量有多种方式1. 直接通过标识符访问2. 通过 . 或 [] 访问对象中的标识符猜想访问方式不同,导致了查找的方式...
  • 对于其中的`函数作用域链的问题`博主似乎没有解释清楚,有一些疑问:js中的变量到底是沿着作用域链还是原型链查找呢? 首先,要分清作用域链原型链的区别,简单来说作用域链是相对于函数的,原型链是相对于对象的...
  • JS作用域和原型链

    2020-02-16 15:43:22
    作用域是在运行时代码中的某些特定部分中变量,函数对象的可访问性。换句话说,作用域决定了代码区块中变量其他资源的可见性。可能这两句话并不好理解,我们先来看个例子: function outFun2() { var in...
  • 作用域 事实上JavaScript并不具有动态作用域,它只有词法作用域,简单明了,但是this机制某种程度上很像动态作用域 词法作用域 是一套引擎如何寻找变量以及...作用域链 A(B(C{ console.log(xxx)})) A中有B,B中...
  • 作用域链和原型链

    2020-02-13 14:37:48
    JS中变量分为全局变量局部变量 而局部变量可以是函数的参数、函数内定义以及{}内(ES6语法)定义,如果局部变量与全局变量重名的话,会优先取局部变量 全局执行环境 全局执行环境是最外围的一个执行环境,在web...
  • 3.什么是作用域链 [[scope]]:每个javascript函数都是一个对象,对象中有些属性我们可以访问,但有些不可以,这些属性仅供javascript引擎存取,[[scope]]就是其中一个。[[scope]]指的就是我们所说的作用域,其中存储了...
  • Js中存在两种老生常谈的链,作用域链和原型链。作用域链是为了访问变量而存在的链,原型链是访问对象的属性而存在的链。 作用域链 说到作用域链,首先来说下作用域的概念:执行代码的上下文,也可以说是变量对象,是...
  • 简谈JS原型链和作用域链

    千次阅读 2017-07-18 13:00:43
    谈起js原型链和作用域链,我觉得还是和图结合起来说比较明白,手绘了一些图片,图片看起来虽然比较丑,但是结合起来理解地应该比较清楚
  • 文章目录js高级 第六天回顾作用域作用域链变量查找原则执行上下文作用域的区别原型原型分类原型链 又叫隐式原型链内置构造函数(对象)原型中的属性 回顾 1.执行上下文与执行上下文栈 执行上下文:js代码的执行...
  • 作为初学者经常容易混淆作用域链和原型链,导致使用 this 指针时诸多混乱,比方企图使用 this 指针引用一个私有变量;也可能导致在原型函数中使用类的私有变量或者调用类的私有函数的错误。举两个例子,不加解释: ...
  • 先来普及一下JS的概念(不要嫌我啰嗦,可能一些朋友开始学习JS是跟着视频写好的代码学的,应该有一部分对它的结构或者说它的历史还不太了解),JavaScript由三种东西组成,一个叫ECMAScript,一个叫DOM,还有一个叫...
  • 一般来说,作用域链是针对变量的,js里面大的范围上来说,只有两种作用域,全局作用域函数内部作用域,如果函数1里面又定义了函数2(一般都是匿名函数), 那么就有了这么一个作用域链全局作用域==>函数1作用域...
  • 要注意作用域和原型, 作用域链和原型链的区别。 执行上下文 变量或函数的上下文决定了它们可以访问哪些数据,以及它们的行为。 每个上下文都有一个关联的变量对象(variable object), 而这个上下文中定义的...
  •  js变量作用域第一种:没有使用var修饰,定义的是全局变量,在严格模式下该方法不能使用i = 0;第二种:使用var修饰,没有定义在函数体内是被认为是window属性,是全局属性,定义在函数体内时是局部属性,仅在...
  • 作用域有上下级关系,子作用域可以访问到父作用域的变量跟函数,但是父作用域无法访问到子作用域的变量跟函数(这里说的访问是直接访问,通过闭包是可以间接访问到的)。 js中一切都是对象,除了基本值类型之外。...
  • 文章目录JS高级显式原型隐式原型原型链原型链的属性问题instanceof原型链继承内存溢出内存泄漏作用域与作用域链闭包闭包的作用预编译1. 全局预编译2. 函数中的预编译JS用在本地存储一些函数 显式原型隐式原型 ...
  • 预解析:浏览器在解析js代码时,会提前将变量的声明函数的声明解析到当前作用域的最前面去 1. 把变量的声明提升到当前作用域的最前面,只会提升声明,不会提升赋值。 2. 把函数的声明提升到当前作用域的最前面,...
  • 最后打印出来的是3,因为执行函数c()的时候它在自己的范围内找到了变量a所以就不会越上继续查找,如果在函数c()中没有找到则会继续向上找,一直会找到全局变量a,这个查找的过程就叫作用域链。 不知道你有没有...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 424
精华内容 169
关键字:

js作用域链和原型链