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

JavaScript中的prototype使用说明

 
阅读更多
在JavaScript中并没有类的概念,但JavaScript中的确可以实现重载,多态,继承。这些实现其实方法都可以用JavaScript中的引用和变量作用域结合prototype来解释。
2、简单的例子
var Blog = function( name, url ){ 
this.name = name; 
this.url = url; 
}; 
Blog.prototype.jumpurl = ''; 
Blog.prototype.jump = function(){ 
window.location = this.jumpurl; 
}; 
/* 
*等同于 
Blog.prototype = { 
jumpurl : '', 
jump : function(){ 
window.location = this.jumpurl; 
} 
}; 
*/ 
var rainman = new Blog('jb51', 'http://www.jb51.net'); 
var test = new Blog('server', 'http://s.jb51.net'); 

这是一个非常简单的例子,但却可以很好的解释prototype内在的一些东西,先看下图的内存分配:

通过上图可以看到下面这些内容:

prototype只是函数的一个属性,该属性的类型是一个对象。
内存分配状况:
函数Blog拥有一个prototype属性,而prototype属性拥有一个变量和一个函数;
test和rainman两个变量都分别有name和url两个变量;
test和rainman两个变量都有一个jumpUrl变量和一个jump函数,但是并没有分配内存,它们是对Blog.protype中的引用
3、扩展1:Website.prototype = Blog.prototype
var Blog = function( name, url ){ 
this.name = name; 
this.url = blogurl; 
}; 
Blog.prototype.jumpurl = ''; 
Blog.prototype.jump = function(){ 
window.location = this.jumpurl; 
}; 
var rainman = new Blog('jb51', 'http://www.jb51.net'); 
var test = new Blog('server', 'http://s.jb51.net'); 

var Website = function(){}; 
Website.prototype = Blog.prototype; 
var mysite = new Website(); 


通过上图可以看到下面这些内容:

"Website.prototype = Blog.prototype;":Website的prototype并没有分配内存,只是引用了Blog的prototype属性。
mysite的两个属性也没有分配内存,也只是分别引用了Blog.prototype.jumpurl和Blog.prototype.jump
4、扩展2:
Website.prototype = new Blog()
var Blog = function(){}; 
Blog.prototype.jumpurl = ''; 
Blog.prototype.jump = function(){ 
window.location = this.jumpurl; 
}; 

var Website = function(){}; 
Website.prototype = new Blog(); 
var mysite = new Website(); 


通过上图可以看到下面这些内容:

Website的prototype属性,只是Blog的一个实例( 同rainman=new Blog(); );因此Website的prototype属性就具有了jumpurl变量和jump方法了。
mysite是Website的一个实例,它的jumpurl和jump方法是继承自Website的prototype,而Web.prototype继承自Blog.prototype(这里与其说是继承,不如说是引用)
整段程序在运行的过程中,内存中只分配了一个jumpurl变量和一个jump方法
分享到:
评论

相关推荐

    JavaScript_prototype_pollution_attack_in_NodeJS.pdf

    2. **prototype**: 在JavaScript中,每个对象都有一个原型,它是一个包含了可以共享给其他对象的属性和方法的对象。原型机制是JavaScript的核心特性之一。 3. **pollution**: 在这里指代“污染”,即通过非法或恶意...

    prototype文件以及使用说明.rar

    本压缩包文件“prototype文件以及使用说明.rar”显然提供了关于如何利用和理解`prototype`的相关资料,下面我们将深入探讨`prototype`的相关知识点。 1. **对象原型与原型链** 每个JavaScript对象都有一个内部属性...

    Prototype

    5. **文档支持**:Prototype.chm 文件是官方提供的离线帮助文档,包含了详细的API说明和使用示例,便于开发者查阅和学习。 总的来说,Prototype 是JavaScript开发的一个强大工具,它通过简洁的语法和丰富的功能,...

    JavaScript prototype属性使用说明

    prototype属性的使用说明: 1. prototype属性的简单使用: 可以通过为某个构造函数的prototype属性赋予一个新的函数,来实现给所有该构造函数的实例添加新的方法。例如,Number.prototype.add 方法可以在任意Number...

    prototype-1.6.0.2Javascript以及英文说明文档

    Prototype JavaScript 框架是早期Web开发中广泛使用的库,它极大地扩展了JavaScript的基本功能,为开发者提供了更高效、更简洁的代码编写方式。在"prototype-1.6.0.2"版本中,我们看到的是这个框架的一个稳定版本,...

    prototype.js 说明文档.doc

    《prototype.js 说明文档》是关于JavaScript库prototype.js的详细指南,主要涵盖了其核心概念、通用方法以及Ajax对象的使用等内容。Prototype是一个由Sam Stephenson编写的JavaScript库,旨在简化和增强JavaScript...

    Prototype1.5.1使用手册

    《Prototype 1.5.1使用手册》是针对JavaScript库Prototype的一个详细指南,该库是Web开发中的一个强大工具,尤其在处理DOM操作、Ajax交互和函数增强方面表现卓越。本手册以.chm(Compiled Help Manual)格式提供,...

    javascript prototype文档.rar

    JavaScript中的原型(Prototype)是理解JavaScript继承机制的关键概念。它是一种对象属性,允许一个对象访问并继承另一个对象的属性和方法。在这个“javascript prototype文档”中,我们可以期待深入学习JavaScript...

    prototype1.5中文说明

    4. **模拟类和继承**:Prototype 通过`Class.create`和`Object.extend`等方法模拟了面向对象编程的概念,使得在JavaScript中实现类和继承成为可能。 5. **Ajax组件**:Prototype 包含了一些预定义的组件,如...

    Prototype&Prototype中文手册

    Prototype是JavaScript库中的一个关键工具,它为Web开发者提供了丰富的功能和便利,使得在JavaScript中进行AJAX(异步JavaScript和XML)编程变得更加简单高效。这个"Prototype&Prototype中文手册"压缩包包含了对...

    JavaScript prototype对象的属性说明

    对于对象的prototype属性的说明,JavaScript手册上如是说:所有 JavaScript内部对象都有只读的 prototype 属性。可以向其原型中动态添加功能(属性和方法),但该对象不能被赋予不同的原型。然而,用户定义的对象可以...

    Prototype-v1.6.0一个javascript库

    开发者可以在网页中引入这个文件,以便在浏览器环境中使用Prototype提供的功能。 3. **johnson.js** - 这可能是一个与Prototype库相关的辅助脚本或者另一个库。"Johnson"这个名字可能指的是一个特定的插件或工具,...

    javascript中的prototype属性使用说明(函数功能扩展)

    这是一个比较特殊的属性,Javascript中的继承一般都依赖这属性实现。 在Javascript中,一切都是对象,字符串是对象,数组是对象,变量是对象,函数也是对象,所以才会允许[‘a’,’b’,’c’].push(‘d’);这样的...

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

    描述中提到"Prototype的中文版说明",意味着这两个文件都是中文语言的,方便中文使用者理解。"特别是1.5.1的是chm格式的,绝对好用!"这表明1.5.1版本的文档不仅有详细的中文解释,而且由于其CHM格式,使得查询和...

    prototype.js 以及 找到的 相关使用详细说明

    Prototype.js是一个广泛使用的JavaScript库,它为JavaScript语言增加了许多实用功能,尤其在处理DOM操作、Ajax交互以及类(class)系统等方面提供了强大的支持。这个库的名字“Prototype”来源于JavaScript中的一个...

    prototype-1.6.0.3.js+prototype1.4 、1.5中文手册+prototype1.6英文手册

    在1.4中文手册中,你可以找到关于`Element`、`Selector`、`Ajax`等核心类的说明,以及如何利用Prototype进行Ajax通信的方法。1.5中文手册则可能包含了一些新特性,比如可能增加了对CSS选择器的支持或者改进了性能。...

Global site tag (gtag.js) - Google Analytics