`
firefly_zp
  • 浏览: 19943 次
  • 性别: Icon_minigender_1
  • 来自: 成都
社区版块
存档分类
最新评论

javascript 原型函数 prototype 工作原理

阅读更多
Javascript 中的原型函数(prototype)的工作原理,在 javascript 中每次声明新函数的过程中,就会为其创建一个 prototype 的属性。在未加其他附带条件情况下,所有的 prototype 属性都会自动获取 constractor 属性,constructor 内包含一个指向 prototype 属性所属函数的指针(就是说 constructor 回指构造函数本身)。

举个例子来说,Fruit.prototype.constructor 指向 Fruit。并且可以通过这个构造函数,为其添加更多的属性和方法。

当调用构造函数创建一个新实例后,该实例内部包含一个指针指向构造函数的原型函数。此时我们不用去关心内部的这个指针到底是什么(这个指针还的确有个名字:__proto__ 估计是为了对应 prototype 而起的名字吧 ~\(≧▽≦)/~ ),只需记住它的指向即可(指向构造函数的原型函数)。需要注意的是,这个 __proto__ 只存在于函数实例与构造函数的原型函数之间,而非实例与构造函数之间。

下面画个图,来精心诠释一下。



如上图所示,Fruit_1, Fruit_2 与构造函数没有直接的联系,只是这两个实例的 __proto__ 属性指向了 Fruit.prototype。虽然这两个实例都不包含属性和方法,但却可以通过 fruit_1.showPrice() 来调用。其理论依据是通过查找对象属性的过程来实现的。

举个例子来说:

       function Fruit(){
       }
	
       Fruit.prototype.category = "apple";
       Fruit.prototype.price = 19.9;
       Fruit.prototype.showPrice = function(){
           alert(this.price); 
       }
	
       var fruit_1 = new Fruit();
       var fruit_2 = new Fruit();
       alert(fruit_1.constructor == fruit_2.constructor);  // 输出 true
       fruit_1.showPrice(); // 19.9


此时,Fruit()构造函数变成了一个空函数,但却可以通过调用 prototype 往构造函数内直接增加属性和方法。并且在此时,仍然可以调用构造函数来 new 新对象,并且新对象具有通过原型函数向构造函数直接增加的属性和方法(有点拗口啊,就是说,通过原型函数直接向构造函数增加属性和方法,增加的这些属性和方法,在通过构造函数 new 出来新实例中也具有)。

并且通过上面的例子可以看出,通过构造函数 new 出来的不同对象,具有与构造函数相同的属性和方法。并且这些都是共有的。

这一切的一切表明,在构造函数外部可以通过原型函数为其增加属性和方法,并且与在构造函数内部声明具有相同的效果。
  • 大小: 98.9 KB
分享到:
评论
1 楼 jingeying 2016-05-31  
[list]
[*]
引用
ASFDASDFADS

[/list]

相关推荐

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

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

    JavaScript中的prototype(原型)属性研究

    在JavaScript中,每个函数都有一个prototype属性,这个属性指向一个对象,这个对象就是所谓的原型对象。当我们创建一个函数实例时,实例会自动获取一个内部属性[[Prototype]],这个属性通常通过`__proto__`或者`...

    JavaScript原型链

    JavaScript原型链是JavaScript语言中的一个核心特性,它关乎对象之间的继承关系。在JavaScript中,一切皆为对象,而原型链则是实现对象间属性和方法共享的一种机制。理解原型链对于深入学习JavaScript至关重要。 ...

    javascript原型继承工作原理和实例详解_.docx

    ### JavaScript原型继承工作原理及实例详解 #### 一、引言 JavaScript作为一种广泛使用的脚本语言,在Web开发中扮演着重要角色。其独特的面向对象机制是通过原型继承来实现的,这种机制使得JavaScript能够灵活地...

    理解Javascript原型继承原理

    2. **`[[Prototype]]`的工作原理**: - 在创建`dog`对象时,`dog`的`[[Prototype]]`被设置为`Animal.prototype`。 - 当我们尝试访问`dog.id`时,JavaScript首先检查`dog`对象本身是否具有`id`属性。如果没有找到,...

    javascript指南和函数式编程

    2. **对象和原型**:深入理解原型链,掌握构造函数、原型对象以及对象字面量的用法,了解如何创建和继承对象。 3. **数组和集合**:学习JavaScript中的数组操作,如map、filter、reduce等高阶函数的运用,以及Set和...

    javascript 原型模式实现OOP的再研究

    JavaScript中的原型模式是一种实现面向对象编程(OOP)的关键机制,它基于原型继承,使得对象可以从其他对象那里获得属性和方法。...同时,理解原型链的工作原理对于编写健壮的JavaScript代码至关重要。

    JavaScript中的原型prototype完全解析

    JavaScript中的原型和prototype是理解该语言面向对象机制的核心概念之一,它支撑着JavaScript的“一切皆对象”的编程范式。接下来,我们将详细解析JavaScript中的原型和prototype,以及与之密切相关的__proto__属性...

    JavaScript_Prototype(源代码+中文手册).rar

    通过这个压缩包中的源代码和中文手册,你可以深入理解JavaScript原型的工作原理,学习如何有效地利用原型进行对象的扩展和继承,提升Web开发能力。同时,手册也将帮助你解决实践中遇到的问题,加深对JavaScript语言...

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

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

    JavaScript的prototype

    JavaScript中的`prototype`是一个核心概念,它涉及到对象继承和函数原型。在JavaScript中,每创建一个函数,该函数就会自动获得一个名为`prototype`的属性,这个属性是一个对象,用于实现对象间的继承。同时,每个...

    javascript prototype原型操作笔记.docx

    ### JavaScript Prototype原型操作知识点 #### 一、Prototype基础概念 **Prototype** 在 JavaScript 中是一个非常重要的概念,它支持面向对象编程中的继承特性。每个 JavaScript 对象都有一个内部属性 `[...

    JavaScript中的prototype原型学习指南

    Function 类型有一个属性 prototype,直接翻译过来就是原型。这个属性就是一个指针,指向一个对象,这个对象包含一些属性和方法,这些属性和方法会被当前函数生成的所有实例(对象)所共享。 这句话根据前面所说的,...

    了解JavaScript中的prototype (实例)

    在JavaScript中,每个函数(包括构造函数)都有一个内置的`prototype`属性,这个属性指向一个对象,该对象包含了可以被该函数的所有实例共享的属性和方法。 当我们创建一个新对象时,它会继承其构造函数的`...

    深入学习JavaScript中的原型prototype

    javascript 是一种 prototype based programming 的语言, 而与我们通常的 class based programming 有很大 的区别,我列举重要的几点如下: 1.函数是first class object, 也就是说函数与对象具有相同的语言地位 2.没有...

    详解JavaScript中基于原型prototype的继承特性_.docx

    JavaScript中的原型(prototype)机制是实现继承的一种核心方式。由于JavaScript是一种基于原型的面向对象语言,它不支持传统的类(class)概念,因此其继承机制显得与众不同。在JavaScript中,对象可以直接从另一个...

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

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

    Advanced JavaScript (closures,prototype,inheritance)

    JavaScript,作为一种广泛应用于Web开发的脚本语言,其高级特性如闭包(closures)、原型(prototype)和继承(inheritance)是理解其精髓的关键。本文将深入探讨这些概念,帮助开发者更好地掌握JavaScript的核心。 ...

    基于prototype扩展的JavaScript常用函数库

    JavaScript是一种基于原型的编程语言,它允许开发者通过原型(prototype)的方式来扩展原生对象的功能。在JavaScript中,Array和Date对象是两个常用的内置对象,分别用于处理数组和日期相关操作。本知识点将详细解释...

Global site tag (gtag.js) - Google Analytics