原型链和作用域链

一、原型链:

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

时间: 2024-10-10 02:06:36

原型链和作用域链的相关文章

关于JS的原型链和作用域链

最近在看<Javascript高级程序设计第三版>,用了两周把前七章磕磕绊绊的读完了,也阅读了许多大牛们写的博客,对JS的理解有了很大的提高,不过要将这么多的知识全部融会贯通还有还需要多多练习,加深自己的理解,今天就将自己迷糊的几个地方列出来写写自己的理解,新手小白,如有错误欢迎大家指正(: 1.原型链和作用域链的概念模糊 这个问题可能有人觉得很无厘头,不过确实在我学习过程中突然出现而且让我产生很大的困扰,觉得是不是之前自己的理解就出现很大的问题.出现这个问题的原因是第七章函数表达式,原先在单

JavaScript原型链与作用域链

layout: 'page' title: '原型链与作用域链' date: 2019-09-30 15:38:38 tags: JAVASCRIPT categories: JAVASCRIPT 原型 所有函数自带一个属性:prototype,属性值是一个对象,存储供实例调用的公共方法 这个对象自带属性constructor,属性值是函数本身 每个对象自带_ _proto__的属性,这个属性指向当前实例所属类的prototype(如果不能确定他是谁的实例,都是Object的实例) 原型链 如果

关于原型链和作用域链的终点问题

1 <script language="javascript" type="text/javascript"> 2 function A(){ 3 this.a=11; 4 this.getA=function(){ 5 return this.a; 6 } 7 } 8 A.prototype.b=33; 9 Object.prototype.b=22; 10 var k=new A() 11 alert(k.b);//33; 12 </scrip

2. 原型链_作用域链_预处理_预解析

1. 谈谈原型 能够实现继承,对象查找属性的规则 实例对象的隐式原型的值 为其 对应构造函数的 显式原型的值 prototype 显示原型属性 所有函数都有显示原型属性 __proto__ 隐式原型属性 所有实例对象都有隐式原型属性 所有函数都是 Function 的实例 Function 是通过 new 自己产生的实例 2. 谈谈原型 由多个隐式原型属性构成的链状结构就是原型链 作用: 用来查找对象的 属性/方法 先自身找,找不到再去 __proto__ 找,最终找到 Object.proto

原型及原型链及作用域链

原型:所有的函数都有一个特殊的属性prototype(原型),prototype属性是一个指针,指向的是一个对象(原型对象),原型对象中的方法和属性都可以被函数的实例所共享.所谓的函数实例是指以函数作为构造函数创建的对象,这些对象实例都可以共享构造函数的原型的方法. 原型链:原型链是用于查找引用类型(对象)的属性,查找属性会沿着原型链依次进行,如果找到该属性会停止搜索并做相应的操作,否则将会沿着原型链依次查找直到结尾.常见的应用是用在创建对象和继承中. 例子: 解析: 函数Person中有一个原

从作用域链谈闭包

闭包(closure)是Javascript语言的一个难点,也是它的特色.非常多高级应用都要依靠闭包实现. 神马是闭包 关于闭包的概念,是婆说婆有理. 因而,我就翻阅了红皮书(p178)上对于闭包的陈述: 闭包是指有权訪问另外一个函数作用域中的变量的函数 这概念有点绕,拆分一下.从概念上说,闭包有两个特点: 1.函数 2.能訪问另外一个函数作用域中的变量 在ES 6之前,Javascript仅仅有函数作用域的概念.没有块级作用域(但catch捕获的异常 仅仅能在catch块中訪问)的概念(IIF

JS详细图解作用域链与闭包

JS详细图解作用域链与闭包 攻克闭包难题 初学JavaScript的时候,我在学习闭包上,走了很多弯路.而这次重新回过头来对基础知识进行梳理,要讲清楚闭包,也是一个非常大的挑战. 闭包有多重要?如果你是初入前端的朋友,我没有办法直观的告诉你闭包在实际开发中的无处不在,但是我可以告诉你,前端面试,必问闭包.面试官们常常用对闭包的了解程度来判定面试者的基础水平,保守估计,10个前端面试者,至少5个都死在闭包上. 可是为什么,闭包如此重要,还是有那么多人没有搞清楚呢?是因为大家不愿意学习吗?还真不是,

JavaScript深入之作用域链(转)

前言 在<JavaScript深入之执行上下文栈>中讲到,当JavaScript代码执行一段可执行代码(executable code)时,会创建对应的执行上下文(execution context). 对于每个执行上下文,都有三个重要属性: 变量对象(Variable object,VO) 作用域链(Scope chain) this 今天重点讲讲作用域链. 作用域链 在<JavaScript深入之变量对象>中讲到,当查找变量的时候,会先从当前上下文的变量对象中查找,如果没有找到

关于Javascript作用域及作用域链的总结

本文是根据以下文章以及<Javascript高级程序设计(第三版)>第四章相关内容总结的. 1.Javascript作用域原理,地址:http://www.laruence.com/2009/05/28/863.html 2.JavaScript 开发进阶:理解 JavaScript 作用域和作用域链,地址:http://www.cnblogs.com/lhb25/archive/2011/09/06/javascript-scope-chain.html 在介绍有关作用域的内容之前,先来介绍