`
blue2048
  • 浏览: 178188 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

javascript prototype 原型链 深入分析

 
阅读更多
面向对象的javascript编程中,我们知道,访问一个对象实例的某个属性,首先会先在这个对象中寻找,如果不存在,就在对象的原型中寻找,如果还不存在,就沿着原型链向上寻找,这里的原型链具体是怎么个形式呢,下面我们就来看看

var Super = function(){
    this.superName = "super";
}

var Sub = function(){
    this.subName = "sub";
}

var superObj = new Super();

Sub.prototype= superObj;

var subObj = new Sub();

alert(subObj.superName);


可以看到,我们定义了两个类,其中sub继承了super的superObj实例,在javascript对象中,存在三个实体,一个是定义的类,例如Super、Sub等,浏览器在实现类的定时,会自动为类天上prototype属性,这个属性会指向它对应的另一个实体prototype

prorotype实体中有两个隐藏指针,一个是constructor,指向对应类中的构造函数,里一个是__proto__,它指向javascript中的顶级父对象Obj,继承了一些共有的方法,例如isPrototypeOf

第三类实体,是对象,例如superObj和subObj,其中隐藏了一个指针,__proto__,指向类对应的prototype

所谓原型链的产生,是因为 Sub.prototype= superObj;我们将一个类的原型修改成一个对象,那么这个对象中的__proto__又指向了里一个原型,或许这个原型也是一个对象,又指向了它对应的原型,那么这样一直到底层,一个没有认为修改原型的对象,它的__proto__默认指向了Obj,这就是一条完整的原型链


我们画出上面代码中的原型链
                                                            默认的prototype中的__proto__都指向Obj
                                                      Obj<-------------------------------------------------------------------------------------|                           
                                                                                                                                                                                |
                                               superObj对象中的__proto__指针                                                                     |
                          Super          |---------------------------------------->prototype(Super默认的原型)----------------|
  ---------------->superObj----
  |     | prototype改写
  |     |
  |     -----------Sub                                                                          prototype(Sub默认的原型,并没有使用)
  -----------------subObj

虚线部分就是原型链,有兴趣的同学可以在添加继承关系
分享到:
评论

相关推荐

    javascript prototype原型操作笔记.docx

    javascript prototype原型操作笔记.docx

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

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

    javascript prototype 原型链

    既然prototype是对象的“原型”,那么由该函数构造出来的对象应该都会具有这个“原型”的特性。事实上,在构造函数的prototype上定义的所有属性和方法,都是可以通过其构造的对象直接访问和调用的。也可以这么说,...

    JavaScript原型链简单图解

    JavaSciptDOM基本操作,JavaScipt函数基础,JavaScipt流程语句,JavaScript变量,JavaScript数据类型,JavaScript数组,JavaScript正则表达式,JavaScript字符串函数,Window对象等图解。JS高手进阶的工具图谱

    javascript-原型与原型链

    javascript-原型与原型链

    JavaScript你一定要搞懂的原型链

    在 JavaScript 中,每个对象都有一个原型 (prototype),它定义了对象的属性和方法。对象可以通过原型链访问到其原型的属性和方法。 原型链图将对象及其原型表示为节点,并使用箭头表示原型关系。每个节点表示一个...

    javascript prototype原型详解(比较基础)

    javascript的prototype原型简单介绍: prototype原型是javascript中特别重要的概念,属于必须要掌握,如果没有良好的掌握的话,进一步用好或者学好js基本是不可能的实现的事情,并且此概念稍有难度,可能对于初次接触...

    深入理解javascript原型和闭包

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

    跟我学习javascript的prototype原型和原型链

    跟我学习javascript的prototype原型和原型链,感兴趣的小伙伴们可以参考一下

    JavaScript原型链

    NULL 博文链接:https://ywxowen999.iteye.com/blog/1135884

    深入浅出理解javaScript原型链

    本文实例讲述了javaScript的原型链。分享给大家供大家参考。具体分析如下: 对于javascript原型链,以前都觉得是个很深的东西,一直没有理解很明白,今天看了一些介绍后,发现这张图,表示再没有什么语言能比这张...

    【技术分享】从浅入深 Javascript 原型链与原型链污染 .pdf

    【技术分享】从浅入深 Javascript 原型链与原型链污染 APT web安全 网络安全 安全 自动化

    Web前端面试题目JavaScript(作用域,原型。原型链,闭包,封装函数).txt

    前端面试题,包含JavaScript的闭包,作用域,原型,原型链,上下文环境以及DOM,BOM封装函数深度克隆,以及一些常见的·JS问题,试题简单但是容易混淆,作为前端工程师必考题

    Javascript原型链的原理详解

    本文实例分析了Javascript原型链的原理。分享给大家供大家参考,具体如下: 一、JavaScript原型链 ECMAScript中描述了原型链的概念,并将原型链作为实现继承的主要方法。其基本思想是利用原型让一个引用类型继承另一...

    一篇文章让你搞懂JavaScript 原型和原型链

    原型和原型链作为深入学习JavaScript最重要的概念之一,如果掌握它了后,弄清楚例如:JavaScript的继承,new关键字的原来、封装及优化等概念将变得不在话下,那么下面我们开始关于原型和原型链的介绍。 什么是原型?...

    强大的原型和原型链

    JavaScript 不包含传统的类继承模型,而是使用 prototypal 原型模型。...由于 JavaScript 是唯一一个被广泛使用的基于原型继承的语言,所以理解两种继承模式的差异是需要一定时间的,今天我们就来了解一下原型和原型链

    JavaScript使用原型和原型链实现对象继承的方法详解

    本文实例讲述了JavaScript使用原型和原型链实现对象继承的方法。...在Javascript中,每个函数都有一个原型属性prototype指向自身的原型,而由这个函数创建的对象也有一个proto属性指向这个原型,而函数的

Global site tag (gtag.js) - Google Analytics