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

    2019-02-11 19:15:00
    一、原型链: 1.原型对象: 每一个构造函数都有一个prototype属性,这个属性就叫原型对象。 每一个构造函数new出来的对象都有一个--proto--属性,这个属性指向原型对象。 <script> function Car()...

    一、原型链:

    1.原型对象:

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

     

    2.原型链

    <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>

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

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

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

    转载于:https://www.cnblogs.com/kinoko-1009/p/10362910.html

    展开全文
  • 深入理解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的原型链和作用域链

    千次阅读 2017-07-18 13:00:43
    谈起js的原型链和作用域链,我觉得还是和图结合起来说比较明白,手绘了一些图片,图片看起来虽然比较丑,但是结合起来理解地应该比较清楚

    谈起js的原型链和作用域链,我觉得还是和图结合起来说比较明白,手绘了一些图片,

    原型链

    创建一个函数及调用构造函数创建实例的背后

    当我们创建了一个新函数时,都会自动为该函数创建一个prototype属性,这个prototype属性是一个指针,指向这个函数的原型对象。而这个原型对象会自动创建一个constructor属性,constructor也是一个指针,指向prototype属性所在的那个函数,即我们创建的那个新函数。
    当我们以new形式调用我们刚刚创建的那个函数时(即是以构造函数调用,可以把我们刚刚创建的那个函数理解为类,尽管js本身没有类的概念),我们创建了一个实例,这个实例内部有一个[[Prototype]]指针,指向构造函数的原型对象,即constructor所在的对象。(我们可以通过proto属性访问这个[[Prototype]],也可以通过Object.getPrototypeOf()来访问)

    这里写图片描述

    重写原型对象

    重写函数的原型对象后,函数的prototype指向新的对象,而之前创建的实例的[[prototype]]指向的对象没有改变,尽管这个对象的constructor仍然指向函数,但是当前函数的原型对象和实例之间已经没有联系了。

    这里写图片描述

    继承中的原型链及默认的原型对象

    直接上图就好了,,,

    这里写图片描述

    作用域链

    每个执行环境都有一个与之关联的变量对象,环境中所有的变量和函数都保存在这个变量对象里面。这个变量对象虽然我们无法访问,但是解释器会在后台使用。
    当代码在一个环境中执行时,会创建变量对象的一个作用域链,作用域链的前端始终是当前执行的代码所在环境的变量对象,下一个变量对象来自外部包含环境,一直延伸到全局执行环境。
    每个函数都有自己的执行环境,当执行到一个函数时,该函数的环境被推入一个环境栈,函数执行后将其弹出。

    作用域链与闭包有着密切的关系

    作用域链实质上是一个指向变量对象的指针列表。
    闭包,简单说就是有权访问另一个函数作用域中变量的函数(一整句话感觉还是觉得比较绕,分开说就是:闭包是一个函数,它不仅能够访问自己作用域中的变量,还能访问另一个函数作用域中的变量)。闭包常见的创建方式是在一个函数中返回另一个函数。

    function Outer() {
        var a = 5;
        return function() {
            console.log(a);
        }
    }
    var fun = Outer();
    fun();
    

    如上,即使这个内部函数被返回了,而且是在全局调用的,但是它仍然可以访问变量a。这是因为内部函数的作用域链中包含了外部函数Outer()的作用域。

    函数被调用时发生了什么?
    1. 创建一个执行环境
    2. 创建作用域链
    3. 使用arguments及其他命名参数初始化活动对象

    举个例子:

    function add(a, b) {
        return a + b;
    }
    var value = add(1, 2);
    

    以这个简单的函数为例子,画出执行环境及作用域链图:

    这里写图片描述

    创建add函数时,会创建一个预先包含全局变量对象的作用域链,这个作用域链保存在函数内部的[[Scope]]属性中。
    当调用add()时,会为函数创建一个执行环境,然后复制函数[[Scope]]属性中的对象构建执行环境的作用域链,之后函数的活动对象被创建并推入执行环境作用域的前端。

    正常情况下,函数执行完毕后,局部活动对象被销毁,内存中仅保存全局执行环境的变量对象,但是闭包的情况有所不同。
    在一个函数内部创建的另一个函数,会将外部函数的活动对象添加到它的作用域链中,以我们第一段代码为例子。Outer()中定义并返回了一个匿名函数,这个匿名函数的会将Outer()的活动对象添加到自己的作用域链中。当匿名函数被返回后,它的作用域链包含Outer()函数的活动对象和全局变量对象,所以这个匿名函数可以访问Outer()中的变量,即使他是在全局调用的。Outer()在执行完毕后,其执行环境的作用域链会被销毁,但是它的活动对象不会被销毁,因为匿名函数的作用域链仍在引用这个活动对象。

    这里写图片描述

    展开全文
  • 1、作用域是对于变量而言,原型链是对于对象的属性。 2、作用域链顶层是window,原型链顶层是Object。

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

    展开全文
  • 分为普通对象函数对象,Object ,Function 是JS自带的函数对象。下面举例说明  function f1(){};  var f2 = function(){};  var f3 = new Function('str','console.log(str)');  var o3
  •  作用域链的终点是全局对象window,首先来说在一个作用域里面首先访问的是作用域链的最里层,如上面的例子的dd函数里面的e,如果没有找到就沿着作用域链向外层查询,当然和原型链一样查询到了立即终止查询,直到...
  • 面向对象的基础总结,这里还少一个部分内容如就是函数调用的四种模式,等哪天我整理好再发上来。(最后地址链接的是我自己录的原型链的画图法)
  • JavaScript 不包含传统的类继承模型,而是使用 prototypal 原型模型。 虽然这经常被当作是 JavaScript 的缺点被提及,其实基于原型的继承模型比传统的类继承还要强大。实现传统的类继承模型是很简单,但是实现 ...
  • 原型链和作用域

    2019-02-27 10:42:03
    原型: 每个函数(构造函数)都有一个prototype(原型)属性...原型链和作用域 作用域是针对变量的 全局作用域==&gt;函数1作用域==&gt;函数2作用域  var a = 1; function b(){ var a = 2; function ...
  • 原型和原型链作用域链区别

    千次阅读 2016-10-13 15:56:22
    原型和原型链作用域链区别: 在JavaScript中,一共有两种类型的值,原始值对象值.每个对象都有一个内部属性[[prototype]],我们通常称之为原型.原型的值可以是一个对象,也可以是null.如果它的值是一个对象,则这...
  • 在JavaScript中,一共有两种类型的值,原始值对象值.每个对象都有一个内部属性[[prototype]],我们通常称之为原型.原型的值可以是一个对象,也可以是null....一般来说,作用域链是针对变量的,js里面大的范围上来...
  • 文章目录JS高级显式原型隐式原型原型链原型链的属性问题instanceof原型链继承内存溢出内存泄漏作用域与作用域链闭包闭包的作用预编译1. 全局预编译2. 函数中的预编译JS用在本地存储一些函数 显式原型隐式原型 ...
  • 原型与原型链作用域及闭包,异步单线程 原型与原型链 说到原型,就不得不提一下构造函数,首先我们看下面一个简单的例子: function Dog(name,age){ this.name = name; this.age = age; } let dog1 = new ...
  • JavaScript面向对象的基础——原型链 JavaScript闭包的形成 JavaScript中this JavaScript中的毒瘤缺陷 一些JavaScript简单语法 . 操作符:访问对象的属性 var 操作符:用来声明变量(也叫标识符) function: ...
  • 作用域链和原型链

    2020-02-13 13:25:37
    原型链作用域链 区别: 作用域是对于变量而言,原型链是对于对象的属性。 作用域链顶层是window,原型链顶层是Object。 联系:从链表开头寻找,直到找到为止。 二、作用域链 作用域 作用域就是变量与函数的可...
  • 2.显示原型链和隐式原型链 3.原型链 4.原型链的属性问题 5.原型链的补充 6.探索instanceof 7.面试常问 8.变量提升与函数执行 9.执行上下文 10.执行上下文栈 11.执行上下文2 12.面试题 13.作用域 14.作用...
  • 由此逐层衍生,逐层嵌套的作用域,称之为作用域链。拥有以下的特性。 1 外层作用域无法调用内层作用域的变量。比如全局作用域无法调用局部作用域声明的变量或常量。 function func(){ var foo =...
  • 当面试的时候遇到问原型链,闭包,还有作用域,直接 拿张纸和笔把原型链画出来,闭包跟作用域直接用笔写几道题出来加深理解(因为我们是理科生,图形题目以及控制台输出结果才是最直观的方法) 问:什么是原型链...
  • JavaScript中的链(作用域链原型链) Js中存在两种老生常谈的链,作用域链和原型链作用域链是为了访问变量而存在的链,原型链是访问对象的属性而存在的链。 作用域链 说到作用域链,首先来说下作用域的概念:...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 1,003
精华内容 401
关键字:

原型链和作用域链