`
caolixiang
  • 浏览: 7825 次
  • 性别: 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核心(对象、原型、继承、上下文、闭包、this).pdf

    面向对象概念(对象封装,各种继承,闭包原理,this作用域等)介绍清晰易懂

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

    深度讲解我所理解的this,闭包,原型链,继承及面向对象

    深入理解JavaScript系列

    深入理解JavaScript系列(5):强大的原型和原型链 深入理解JavaScript系列(6):S.O.L.I.D五大原则之单一职责SRP 深入理解JavaScript系列(7):S.O.L.I.D五大原则之开闭原则OCP 深入理解JavaScript系列(8):...

    javascript闭包详解中文word版

    本文将以例子入手来介绍Javascript闭包的语言特性,并结合一点 ECMAscript语言规范来使读者可以更深入的理解闭包。闭包是Closure, 资源太大,传百度网盘了,链接在附件中,有需要的同学自取。

    几句话带你理解JS中的this、闭包、原型链

    原型链 所有对象都是基于Object.prototype,Object.prototype...要理解原型链机制的话,首先得知道根本原因:JavaScript中的对象都有一个内置属性[[Prototype]],这个属性和非标准的__proto__属性一样,__proto__在E

    深入理解JavaScript系列(.chm)

    深入理解JavaScript系列(5):强大的原型和原型链 深入理解JavaScript系列(6):S O L I D五大原则之单一职责SRP 深入理解JavaScript系列(7):S O L I D五大原则之开闭原则OCP 深入理解JavaScript系列(8):...

    JavaScript面试揭秘:掌握这些高频题,轻松征服面试官!.zip

    理解JavaScript的作用域链、闭包和原型链等核心概念 掌握JavaScript事件冒泡与捕获的原理和区别 学会使用ES6新特性,提升代码质量和开发效率 理解JavaScript异步编程的原理,掌握Promise和async/a

    深入理解JavaScript

    对 JavaScript 的介绍都是说他是基于对象的编程语⾔...⼗余年后的现在,使⽤JavaScript 的原型链和闭包来模拟经典的⾯向对象程序设计已经是 为流传的⽅案,所以,说 JavaScript 是⼀门⾯向对象的编程语⾔也丝毫不为过。

    深入理解JavaScript系列.chm

    5.强大的原型和原型链 6.S.O.L.I.D五大原则之单一职责SRP 7.S.O.L.I.D五大原则之开闭原则OCP 8.S.O.L.I.D五大原则之里氏替换原则LSP 9.根本没有“JSON对象”这回事! 10.JavaScript核心(晋级高手必读篇) 11.执行上...

    javascript全套教学资料(附全套知识点讲解)

    2. **高级特性深入解析**:覆盖了JavaScript语言的高级特性,如闭包、原型链、异步编程、模块化等,通过详细的讲解和实例演示帮助学习者理解和掌握这些复杂的概念和技术。 3. **DOM操作与事件处理**:介绍了DOM操作...

    JavaScript详解(第2版)

     8.5.2 原型查找链   8.5.3 使用原型为对象添加方法   8.5.4 所有对象都有的属性和方法   8.5.5 创建子类及继承   8.6 应知应会   练习   第9章 JavaScript核心对象   9.1 什么是核心对象  ...

    前端开发常见问题汇总概要总结.docx

    编程思维和基本算法的理解:新手开发者可能会因为对基础算法、数据结构理解不足,在面对复杂的前端编程思维如原型链、闭包、作用域链等问题时感到困扰。 计算机科学基础:对计算机体系结构、操作系统原理、网络通信...

    web前端面试指南和高频考题解析,大厂员工整理,pdf和md版本都

    - 原型与原型链(继承) - 原型和原型链定义 - 继承写法 - 作用域和闭包 - 执行上下文 - this - 闭包是什么 - 异步 - 同步 vs 异步 - 异步和单线程 - 前端异步的场景 - ES6/7 新标准的考查 - 箭头函数 - ...

    2022前端企业高频问答题

    JavaScript: 数据类型、面向对象、继承、闭包、插件、作用域、跨域、原型链、模块化、自定义事件、内存泄漏、事件机制、异步装载回调、模板引擎、Nodejs、JSON、ajax等。 其他: HTTP、安全、正则、优化、重构、...

    05-大事件和node阶段某马机构前端内部面试题.md

    什么是原型和原型链。es6-es10新增常用方法?怎么理解函数的防抖和节流?异步函数有哪些?怎么理解面向对象?真数组和伪数组的区别?数组如何进行降维(扁平化)?怎么理解mvvm这种设计模式?v-if和v-show的区别,...

    移动端web某马机构前端内部面试题,es,js

    什么是原型和原型链。es6-es10新增常用方法?怎么理解函数的防抖和节流?异步函数有哪些?怎么理解面向对象?真数组和伪数组的区别?数组如何进行降维(扁平化)?怎么理解mvvm这种设计模式?v-if和v-show的区别,...

    谈谈JavaScript的New关键字

    原型和闭包算是JavaScript中最常见,最难以理解,最容易被当做问题的两个部分,当然还有它们的延伸,如作用域链,继承等等吧,我最近也是各种看,各种翻,记录点自己的心得,写写总会让自己的理解更深一些。...

    前端最全汇总面试题及答案.docx

    JavaScript: 数据类型、面向对象、继承、闭包、插件、作用域、跨域、原型链、模块化、自定义事件、内存泄漏、事件机制、异步装载回调、模板引擎、Nodejs、JSON、ajax等。 其他: HTTP、安全、正则、优化、重构、...

Global site tag (gtag.js) - Google Analytics