`
zengshaotao
  • 浏览: 787536 次
  • 性别: Icon_minigender_1
  • 来自: 上海
社区版块
存档分类
最新评论

prototype详解

 
阅读更多

每个函数都有一个prototype属性,这个属性是指向一个对象的引用,这个对象称为原型对象,原型对象包含函数实例共享的方法和属性。

 

在函数内定义的变量和函数如果不对外提供接口,那么外部将无法访问到,也就是变为私有变量和私有函数。

function Obj(){
                var a=0; //私有变量
                var fn=function(){ //私有函数
                    
                }
            }

这样在函数对象Obj外部无法访问变量a和函数fn,它们就变成私有的,只能在Obj内部使用,即使是函数Obj的实例仍然无法访问这些变量和函数

var o=new Obj();
            alert(o.a); //undefined
            alert(o.fn); //undefined

 

当定义一个函数后通过 “.”为其添加的属性和函数,通过对象本身仍然可以访问得到,但是其实例却访问不到,这样的变量和函数分别被称为静态变量和静态函数

function Obj(){
               
            }
           
            Obj.a=0; //静态变量
           
            Obj.fn=function(){ //静态函数
                   
            }
            
            alert(Obj.a); //0
            alert(typeof Obj.fn); //function
           
            var o=new Obj();
            alert(o.a); //undefined
            alert(typeof o.fn); //undefined

在面向对象编程中除了一些库函数我们还是希望在对象定义的时候同时定义一些属性和方法,实例化后可以访问,JavaScript也能做到这样

function Obj(){
                this.a=[]; //实例变量
                this.fn=function(){ //实例方法
                   
                }
            }
           
            console.log(typeof Obj.a); //undefined
            console.log(typeof Obj.fn); //undefined
           
            var o=new Obj();
            console.log(typeof o.a); //object
            console.log(typeof o.fn); //function

达到目的后,又有另外的问题:

function Obj(){
                this.a=[]; //实例变量
                this.fn=function(){ //实例方法
                   
                }
            }
           
            var o1=new Obj();
            o1.a.push(1);
            o1.fn={};
            console.log(o1.a); //[1]
            console.log(typeof o1.fn); //object
            var o2=new Obj();
            console.log(o2.a); //[]
            console.log(typeof o2.fn); //function

在o1中修改了a和fn,而在o2中没有改变,由于数组和函数都是对象,是引用类型,这就说明o1中的属性和方法与o2中的属性与方法虽然同名但却不是一个引用,而是对Obj对象定义的属性和方法的一个复制。

这个对属性来说没有什么问题,但是对于方法来说问题就很大了,因为方法都是在做完全一样的功能,但是却又两份复制,如果一个函数对象有上千和实例方法,那么它的每个实例都要保持一份上千个方法的复制,这显然是不科学的,这可怎么办呢,prototype应运而生。

 

无论什么时候,只要创建了一个新函数,就会根据一组特定的规则为该函数创建一个prototype属性,默认情况下prototype属性会默认获得一个constructor(构造函数)属性,这个属性是一个指向prototype属性所在函数的指针

function Person(name){
                this.name=name;
            }
           
            Person.prototype.share=[];
           
            Person.prototype.printName=function(){
                alert(this.name);
            }
           
            var person1=new Person('Byron');
            var person2=new Person('Frank');
           
            person1.share.push(1);
            person2.share.push(2);
            console.log(person2.share); //[1,2]

 

如果在实例中定义如prototype同名的属性或函数,则会覆盖prototype的属性或函数

function Person(name){
                this.name=name;
            }
            
            Person.prototype.share=[];

            var person=new Person('Byron');
            person.share=0;
            
            console.log(person.share); //0而不是prototype中的[]
分享到:
评论

相关推荐

    Prototype详解

    ### Prototype详解:深入理解JavaScript库的核心功能与Ajax应用 #### 一、Prototype简介与核心功能解析 ##### 1. Prototype是什么? Prototype是一个由Sam Stephenson创建的JavaScript库,旨在简化和标准化...

    javascript 中__proto__和prototype详解

    __proto__是内部原型,prototype是构造器原型(构造器其实就是函数) 构造器的原型(prototype)是一个对象 那什么是构造器呢? 要想创建一个对象,首先要有一个对象构造器,就像php里面一样,要想创建一个对象,...

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

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

    prototype 源码 注释

    **JavaScript中的Prototype详解** 在JavaScript中,Prototype是一个非常重要的概念,它是面向对象编程的基础。本文将深入探讨Prototype的原理、用途及其在JavaScript中的实现方式,同时结合提供的`prototype.js`...

    Maven的Primeface Project Prototype

    ** Maven的Primeface Project Prototype详解 ** 在Java开发领域,Maven和Primefaces都是不可或缺的工具。Maven作为项目管理工具,它简化了构建、依赖管理和项目生命周期的管理。而Primefaces则是一个流行的Java...

    比较详细的javascript对象的property和prototype是什么一种关系.docx

    ### JavaScript对象的Property与Prototype详解 #### 一、引言 在JavaScript中,对象是程序设计的核心组成部分之一。本文将详细探讨JavaScript对象的属性(Property)与原型(Prototype)之间的关系,帮助读者深入...

    Prototype框架详解

    Prototype框架是一种广泛使用的JavaScript库,它为JavaScript编程提供了一系列实用的功能,增强了JavaScript的面向对象特性。这个框架的主要目标是简化DOM操作,提供更强大的函数工具,并优化JavaScript代码的可读性...

    prototype.chm+jquery详解

    描述中提到的"前一段找了有关prototype和jquery一些相关资料,包括prototype.chm文档,及prototype与jquery详解"表明压缩包中可能包含了一个名为"prototype.chm"的帮助文件,这通常是一个Windows平台下的HTML帮助文档...

    JavaScript prototype属性详解

    JavaScript中的`prototype`属性是面向对象编程的关键特性之一,它关联了函数(特别是构造函数)与实例之间的继承关系。每个函数都有一个`prototype`属性,这个属性是一个对象,包含了所有实例共享的方法和属性。当...

    PHP设计模式(四)原型模式Prototype实例详解【创建型】

    【PHP原型模式Prototype详解】 原型模式(Prototype)是一种创建型设计模式,它的核心思想是通过复制已有对象来创建新对象,以减少重复的构造过程,提高代码效率。在PHP中,原型模式通常通过对象的克隆(clone)...

    Prototype_1.4.doc,Prototype_1.5.1.chm 中文版

    **知识点详解** 1. **Prototype库基础**:Prototype库提供了一系列的JavaScript扩展,包括类、对象、数组、字符串和函数的增强,以及DOM操作、事件处理、Ajax请求等工具。 2. **类与对象**:Prototype通过模拟面向...

    解析设计模式中的Prototype原型模式及在C++中的使用

    原型模式(Prototype Pattern)是一种创建型设计模式,其主要思想是通过复制已有对象来创建新对象,而不是直接创建。在软件工程中,当需要频繁地创建具有相同或相似属性的对象时,使用原型模式可以提高效率,减少...

    Prototype

    **Prototype 框架详解** Prototype 是一个广泛使用的JavaScript库,设计目的是为了简化JavaScript的开发,尤其是处理DOM操作、AJAX交互以及事件处理等方面的工作。它通过提供一系列实用的工具函数和面向对象的特性...

    prototype的Ajax介绍

    ### Prototype的Ajax介绍 #### 一、Prototype框架与Ajax **Prototype** 是一款JavaScript库,其设计目的是为了简化客户端脚本编程。它提供了一系列高级功能,使得开发人员能够更加高效地构建动态网页应用。其中,*...

    prototype 1.3 源码解读

    ### 核心知识点详解 #### 1. Prototype 核心对象 ```javascript var Prototype = { Version: '1.3.1', emptyFunction: function () {} }; ``` - **`Version`**:定义当前版本号为 `1.3.1`,用于标识库的具体...

    prototype1.7.2

    《Prototype JavaScript 框架详解:以 prototype1.7.2 为例》 Prototype JavaScript 框架,简称 Prototype,是 JavaScript 语言中一个广泛使用的开源库,它为 Web 开发提供了一系列强大的工具,旨在简化 DOM 操作、...

    jquery + prototype框架

    **jQuery和Prototype框架详解** jQuery和Prototype是两个非常流行的JavaScript库,它们极大地简化了JavaScript的DOM操作、事件处理和动画效果。在这个资源包中,您将找到关于这两个框架的API帮助文档,这对于学习和...

Global site tag (gtag.js) - Google Analytics