`
blue2048
  • 浏览: 183112 次
  • 性别: 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 原型链与原型链污染 .pdf

    本文将深入探讨JavaScript原型链的工作原理及其可能导致的安全问题——原型链污染。 首先,JavaScript 中的对象继承并不像传统面向对象语言那样基于类,而是通过原型链机制。每个对象都有一个内部属性`[[Prototype]...

    原型链全套图解.rar

    在本压缩包"原型链全套图解.rar"中,包含了全面的图解资料,帮助你深入理解和掌握这一核心概念。 首先,原型链的基础是每个JavaScript对象都有一个内部隐藏的`__proto__`属性,这个属性指向它的原型对象。当我们...

    分析javascript原型及原型链

    在JavaScript中,原型(Prototype)和原型链(Prototype Chain)是核心概念之一,它们是实现继承的关键,对于理解JavaScript的面向对象编程至关重要。 一、原型对象的理解 当我们用JavaScript创建一个函数时,这个...

    浅析Javascript原型继承 推荐第1/2页

    上述原型继承的图示中,我们可以看到原型链的概念:每个对象都有一个原型,这个原型本身也是一个对象,可能还有它自己的原型,一直向上直到达到Object.prototype为止,Object.prototype是所有对象的原型链的终点,而...

    javascript中类和继承(代码示例+prototype.js)

    `prototype.js`文件可能包含了对JavaScript原型链和继承的进一步封装和扩展。通常,这样的库可能会提供更方便的方式来创建类和实现继承,比如使用类语法糖,以及提供一些额外的功能,如方法重载、私有属性等。 例如...

    基于原型链劫持的前端代码插桩

    总之,基于原型链劫持的前端代码插桩是JavaScript开发中的一种高级技巧,它为开发者提供了深入洞察代码执行、提升代码质量的可能性。理解和掌握这一技术,能极大地提升我们的开发效率和代码管理水平。

    JavaScript_原型UI元素的集合.zip

    如果在实例对象上找不到某个属性,JavaScript会查找其原型,如果原型上也没有,会继续查找原型的原型,这一过程称为原型链。 UI元素的集合通常包括一系列用于创建网页交互功能的代码示例。例如,`ui-element-...

    理解Javascript原型继承原理

    本文主要关注原型链继承,它是基于对象的`[[Prototype]]`属性和函数的`prototype`属性实现的。 1. **`prototype`**: - 每个函数对象都有一个`prototype`属性,该属性通常是一个对象,用于表示由该函数构造的对象...

    浅析javascript原型继承机制

    因此,当我们尝试访问实例上不存在的属性或方法时,JavaScript引擎会沿着原型链向上查找,直到找到相应的属性或方法为止。 ```javascript function MyObj(id) { this.id = id; } MyObj.prototype.getName = ...

    js代码-JavaScript 原型链与继承

    JavaScript,作为一种广泛应用于Web开发的动态脚本语言,其原型链和继承机制是理解JavaScript对象模型和类式继承的关键概念。在深入探讨之前,我们先简单回顾一下这两个核心概念。 **原型链(Prototype Chain)** ...

    JavaScript进阶(四)原型与原型链用法实例分析

    JavaScript中的原型和原型链是理解面向对象编程的关键概念。原型是一种机制,允许对象间共享属性和方法,从而节省内存并实现继承。在JavaScript中,每个对象都有一个内部属性`[[Prototype]]`,它链接到另一个对象,...

    深入浅出javascript源代码

    2. **原型与原型链**:JavaScript的对象继承是基于原型的,理解原型对象(__proto__)和原型链(prototype chain)是深入理解JavaScript继承机制的关键。源代码中可能包含各种实例来解释如何通过原型实现对象间的...

    prototype学习笔记

    在JavaScript中,`prototype`是一个核心...总的来说,这篇"prototype学习笔记"深入讲解了JavaScript中的原型和继承机制,结合源码分析和实用工具,帮助开发者更全面地掌握这一核心概念,并能够在实际项目中灵活运用。

    JavaScript中的几个关键概念的理解-原型链的构建

    在深入理解JavaScript中的原型链构建之前,我们首先需要了解几个关键的基础概念:对象、原型(prototype)、原型链(prototype chain)、构造函数(constructor function)以及函数(function)。JavaScript中的对象...

    prototype1.7.2

    Prototype 引入了类的概念,通过模拟类继承来扩展 JavaScript 的原型链。`Class.create()` 方法允许开发者创建新的类,而 `Object.extend()` 方法则用于对象属性的继承。 3. **DOM 操作** Prototype 提供了一套...

    编写javascript插件,来扩展已有的JavaScript功能.zip

    在压缩包的文件名中,"1.JavaScript String.prototype 原型 - 何鸿涛 - 博客园.url"可能指向一篇关于String.prototype的详细教程,这部分内容会涵盖JavaScript中如何使用和扩展原型链。了解和熟练掌握原型链对于编写...

    Javascript忍者的秘密

    原型链是JavaScript实现继承的关键机制,每个对象都有一个proto属性,指向其构造函数的prototype。通过原型链,我们可以访问和继承对象的属性和方法。 其次,闭包是JavaScript中的另一个重要概念。闭包允许函数访问...

    prototype 源码 注释

    本文将深入探讨Prototype的原理、用途及其在JavaScript中的实现方式,同时结合提供的`prototype.js`源码进行详细注释和解析。 ### 1. Prototype的概念 在JavaScript中,每个函数都有一个名为`prototype`的属性,这...

    JavaScript原型对象原理与应用分析

    它基于JavaScript的原型链,使得一个对象可以访问并继承另一个对象的属性和方法。下面将详细解释原型对象的原理、应用及其相关操作。 ### 1. 原型对象概念 在JavaScript中,每个对象都有一个特殊的内部属性`[...

    prototype自己做的一个例子

    `__proto__`和`Object.getPrototypeOf()`是访问对象原型的两种方式,它们可以用来查看或操作对象的原型链: ```javascript console.log(person1.__proto__ === Person.prototype); // 输出 true console.log(Object...

Global site tag (gtag.js) - Google Analytics