`
caolixiang
  • 浏览: 8123 次
  • 性别: Icon_minigender_1
  • 来自: 杭州
文章分类
社区版块
存档分类
最新评论

理解闭包_javascript原型链

    博客分类:
  • Js
阅读更多

作用域链(继承体现)

 

Js代码 
  1.      
  2. function MyOne( number ) {  
  3.      this.number = number;  
  4. }  
  5. function MyTwo( name ) {  
  6.      this.name = name;  
  7. }  
  8.   
  9. MyTwo.prototype = new MyOne( 8 );  
  10. var test = new MyTwo( "HuJin" );  
  11.   
  12. alert( test.__proto__.hasOwnProperty( "constructor" ) ); // false  
  13. alert( var val = test.name ); // "HuJin"  
  14. alert( var val = test.number ); // 8  

 
 

自己的思考

alert( test.name )的查找顺序为:

1. if( test.hasOwnProperty( "name" ) ) // Yes

2. var val = test.name // val = "HuJin"

3. alert(val);

 

输出结果:

 

alert( test.number )的查找顺序为:

1. if( test.hasOwnProperty( "number" ) ) // No

2. then 查找 test的原型 new MyOne( 8 ),因为test的构造函数 new MyTwo()的原型对象是一个MyOne的实例

   代码相当于:

   else if( test.__proto__.hasOwnProperty( "number" ) ) // Yes

3. var val = test.__proto__.number // val = 8;如果仍然找不到number属性,则继续向原型链上方走

4. else if( test.__proto__.hasOwnProperty( "number" ) ) // No

5. then if( test.__proto__.__proto__.hasOwnProperty( "number" )) // Yes

    then val = test.__proto__.__proto__.number // 这时test.__proto__.__proto__应该指向MyOne.prototype

   验证一下 : alert(test.__proto__.__proto__ === MyOne.prototype) // 神奇般的对了,参照上面的图

 

输出结果:

6. 如果还是找不到

    if( test.__proto__.__proto__.hasOwnProperty( "number" )) // No 那么继续向上走,也就是从MyOne.prototype向上走,也就到了Object对象了。

 

Extra:

我们在Object.prototype上增加一个奇怪的"monk"属性,然后调用 alert( test.monk )测试一下,看看是否会继续往上找...

Js代码 

  1. Object.prototype.monk = "Pray";  
  2. function MyOne(number) {  
  3.      this.number = number;  
  4. }  
  5. function MyTwo(name) {  
  6.      this.name = name;  
  7. }  
  8.   
  9. MyTwo.prototype = new MyOne(8);  
  10. var test = new MyTwo("HuJin");  
  11.   
  12. alert(val = test.monk);  

 

输出结果:
 

 

该告一段落了。如果在Object.prototype中还是查找不到,那么undefined就弹出来了。也就是说访问不存在的属性,会一直遍历整个原型链。

  • 大小: 29.8 KB
  • 大小: 9 KB
  • 大小: 8.5 KB
  • 大小: 9 KB
分享到:
评论

相关推荐

    深入理解javascript原型和闭包

    深入理解javascript原型和闭包(01)——一切都是对象 深入理解javascript原型和闭包(02)——函数和对象的关系

    深度探讨javascript函数的原型链和闭包

    理解函数的原型链和闭包对于深入掌握JavaScript至关重要。 首先,让我们看看函数的定义方式。在JavaScript中,我们可以使用`function`关键字直接定义函数,如`function fn(a, b) {}`。此外,函数也可以通过赋值语句...

    深入理解javascript原型和闭包.pdf

    JavaScript原型和闭包是这门语言中两个比较难以理解且与其他面向对象语言区别较大的概念。理解这两个概念,不仅能让我们更深层次地理解JavaScript,而且有助于我们了解编程语言的设计思路,拓宽我们的视野。 首先,...

    【JavaScript源代码】JS难点同步异步和作用域与闭包及原型和原型链详解.docx

    JavaScript是Web开发中的核心...总之,理解和掌握JavaScript的同步异步处理、作用域与闭包、以及原型和原型链,是成为一名熟练的JavaScript开发者所必需的技能。这些概念的深入理解有助于编写更高效、更健壮的代码。

    JavaScript作用域、闭包、对象与原型链概念及用法实例总结

    JavaScript是Web开发中不可或缺的一部分,它提供了丰富的特性,如作用域、闭包、对象和原型链,这些都是理解和编写高效代码的关键。以下是对这些概念的详细解释: 1. **JavaScript变量作用域** - **函数作用域**:...

    我所理解的this,闭包,原型链,继承及面向对象.zip

    总的来说,理解并掌握"this"、闭包、原型链和继承是成为熟练的JavaScript开发者的关键步骤。它们不仅在编写代码时起到重要作用,也是面试中的常见考点。通过深入学习和实践,可以提升你的编程能力,为构建复杂的应用...

    js.rar_JAVASCRIPT面试题_javascript

    - 闭包:理解闭包的原理,如何创建闭包,以及闭包在内存管理中的作用。 4. **异步编程** - 回调函数:了解回调地狱及其问题,以及如何通过模块化和Promise来解决。 - Promise:掌握Promise的基本用法,包括链式...

    JavaScript高级_javascript_zip_

    2. **原型链(Prototype Chain)**:JavaScript中的对象继承是通过原型链实现的,每个对象都有一个内部属性`__proto__`,指向其构造函数的原型对象。理解原型链对于掌握继承机制至关重要。 3. **函数表达式与函数...

    jscn.rar_java chm_java script_javascript_javascript c_javascript

    3. **对象与原型**:JavaScript中的对象是属性和方法的集合,通过原型链实现继承,了解`__proto__`、`prototype`和`Object.create()`等概念。 4. **数组和集合**:Array对象的常用方法(push、pop、shift、unshift...

    深入理解javascript原型和闭包1

    JavaScript的继承是通过原型链实现的,一个对象可以继承另一个对象的属性和方法。通过设置`prototype`,我们可以让一个函数(即构造函数)的实例继承另一个函数的实例的属性和方法。 (7)——原型的灵活性 ...

    Javascript(OOP).rar_javascript_javascript O_oop javascript

    在JavaScript中,面向对象主要通过构造函数和原型链实现。构造函数是一种特殊的函数,用于创建和初始化对象。当你使用`new`关键字调用一个函数时,实际上就是在创建一个新的对象实例。例如: ```javascript ...

    Javascript基础_javascrip_castkmb_javascript_

    理解闭包和作用域对于编写高效且无bug的代码至关重要。 原型和原型链: JavaScript对象可以通过原型链共享属性和方法,这是其面向对象特性的一种体现。每个对象都有一个proto属性指向其构造函数的prototype,形成...

    Object_Oriented_Javascript

    - **构造函数与原型链**:JavaScript中创建对象的主要方式,构造函数用于初始化对象,而原型链则支持继承机制。 以上概述了《Object_Oriented_Javascript》一书中的主要内容,涉及了JavaScript的基础知识、面向对象...

    javascript闭包模型与原型模型(共31张PPT).pptx

    `[[Prototype]]`是所有JavaScript原生对象的内置原型属性,它不能直接通过JavaScript访问,但引擎会在搜索原型链时使用。`prototype`是函数对象的一个属性,可以被JavaScript直接访问。当使用`new`关键字创建一个新...

    java_note.zip_javascript

    你可以创建对象,使用构造函数和原型链实现继承,以及使用ES6的类语法来简化对象的创建。此外,JavaScript还支持函数式编程风格,如高阶函数、柯里化和闭包。 异步编程是现代JavaScript的重要部分。回调函数、...

    高性能JavaScript_编程_javascript_js_

    3. **对象和原型链**:深入理解原型和原型链,包括对象的创建方式、原型对象、__proto__属性、以及如何通过构造函数和Object.create()创建对象,这对于理解和利用JavaScript的面向对象特性十分关键。 4. **函数式...

    Pro_JavaScript_Design_Patterns

    本书首先介绍了JavaScript的基础知识,包括语言特性、原型链、闭包等,这些都是理解设计模式的关键。接着,它深入探讨了三种主要的设计模式类别:创建型、结构型和行为型模式。 1. **创建型模式** 主要关注对象的...

    精通JavaScript(图灵计算机科学丛书)_javascript_

    3. **对象与原型链**:JavaScript中的对象是基于原型创建的,每个对象都有一个[[Prototype]]内部属性,可以通过__proto__或Object.getPrototypeOf访问。原型链是通过原型对象形成的链式结构,用于查找对象的属性。 ...

    HEADFIRST_javascript.rar

    理解对象、原型链、继承和多态性是高级JavaScript开发的基础。 9. **ES6及以后的版本**:ECMAScript(ES)标准不断更新,引入了新的特性和语法糖,如箭头函数、解构赋值、模板字符串、let和const、Promise、async/...

Global site tag (gtag.js) - Google Analytics