JavaScript中的prototype使用说明


Posted in Javascript onApril 13, 2010

1、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('3water', 'https://3water.com'); 
var test = new Blog('server', 'http://s.3water.com');

这是一个非常简单的例子,但却可以很好的解释prototype内在的一些东西,先看下图的内存分配:
JavaScript中的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('3water', 'https://3water.com'); 
var test = new Blog('server', 'http://s.3water.com'); var Website = function(){}; 
Website.prototype = Blog.prototype; 
var mysite = new Website();

JavaScript中的prototype使用说明
通过上图可以看到下面这些内容:

"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();

JavaScript中的prototype使用说明
通过上图可以看到下面这些内容:

Website的prototype属性,只是Blog的一个实例( 同rainman=new Blog(); );因此Website的prototype属性就具有了jumpurl变量和jump方法了。
mysite是Website的一个实例,它的jumpurl和jump方法是继承自Website的prototype,而Web.prototype继承自Blog.prototype(这里与其说是继承,不如说是引用)
整段程序在运行的过程中,内存中只分配了一个jumpurl变量和一个jump方法
5、new运算符
JavaScript中new运算符。
JavaScript中new运算符是创建一个新对象。使用方法:
new constructor[(arguments)]
其中constructor是必选项。对象的构造函数。如果构造函数没有参数,则可以省略圆括号。
arguments是可选项。任意传递给新对象构造函数的参数。

JavaScript中new运算符说明
new 运算符执行下面的任务:
创建一个没有成员的对象。
为那个对象调用构造函数,传递一个指针给新创建的对象作为 this 指针。
然后构造函数根据传递给它的参数初始化该对象。
示例
下面这些是有效的 new 运算符的用法例子。
my_object = new Object;
my_array = new Array();
my_date = new Date("Jan 5 1996");

6、其它
在绝大多数JavaScript版本中,JS引擎都会给每个函数一个空的原型对象,即prototype属性。

Javascript 相关文章推荐
jquery上传插件fineuploader上传文件使用方法(jquery图片上传插件)
Dec 05 Javascript
为指定的元素添加遮罩层的示例代码
Jan 15 Javascript
js实现顶部可折叠的菜单工具栏效果实例
May 09 Javascript
JavaScript数组对象实现增加一个返回随机元素的方法
Jul 27 Javascript
javascript图片滑动效果实现
Jan 28 Javascript
JavaScript Math.round() 方法
Dec 18 Javascript
jQuery实现图片加载完成后改变图片大小的方法
Mar 29 Javascript
基于vue2实现左滑删除功能
Nov 28 Javascript
React性能优化系列之减少props改变的实现方法
Jan 17 Javascript
用Vue.js方法创建模板并使用多个模板合成
Jun 28 Javascript
如何使用原生Js实现随机点名详解
Jan 06 Javascript
如何在JavaScript中使用localStorage详情
Feb 04 Javascript
Js 刷新框架页的代码
Apr 13 #Javascript
百度Popup.js弹出框进化版 拖拽小框架发布 兼容IE6/7/8,Firefox,Chrome
Apr 13 #Javascript
JavaScript在IE和Firefox(火狐)的不兼容问题解决方法小结
Apr 13 #Javascript
JavaScript 数组运用实现代码
Apr 13 #Javascript
关于Jqzoom的使用心得 jquery放大镜效果插件
Apr 12 #Javascript
Javascript 判断Flash是否加载完成的代码
Apr 12 #Javascript
使用dynatrace-ajax跟踪JavaScript的性能
Apr 12 #Javascript
You might like
php中字符串和正则表达式详解
2014/10/23 PHP
php实现encode64编码类实例
2015/03/24 PHP
php计划任务之验证是否有多个进程调用同一个job的方法
2015/12/07 PHP
详解HTTP Cookie状态管理机制
2016/01/14 PHP
ThinkPHP框架获取最后一次执行SQL语句及变量调试简单操作示例
2018/06/13 PHP
PHP与SQL语句写一句话木马总结
2019/10/11 PHP
如何实现iframe(嵌入式帧)的自适应高度
2006/07/26 Javascript
JavaScript库 开发规则
2009/01/31 Javascript
Extjs学习笔记之六 面版
2010/01/08 Javascript
jQuery针对各类元素操作基础教程
2014/08/29 Javascript
JS基于面向对象实现的拖拽库实例
2015/09/24 Javascript
总结JavaScript的正则与其他语言的不同之处
2016/08/25 Javascript
JS实现页面载入时随机显示图片效果
2016/09/07 Javascript
jquery+Jscex打造游戏力度条
2020/09/12 Javascript
JS中from 表单序列化提交的代码
2017/01/20 Javascript
通过fastclick源码分析彻底解决tap“点透”
2017/12/24 Javascript
Fundebug支持监控微信小程序HTTP请求错误的方法
2019/02/21 Javascript
Vue切换Tab动态渲染组件的操作
2020/09/21 Javascript
[39:00]Optic vs VP 2018国际邀请赛淘汰赛BO3 第三场 8.24
2018/08/25 DOTA
[01:20]PWL开团时刻DAY9——听说潮汐没用?
2020/11/10 DOTA
详细解读Python中解析XML数据的方法
2015/10/15 Python
Python原始字符串与Unicode字符串操作符用法实例分析
2017/07/22 Python
pyecharts绘制中国2020肺炎疫情地图的实例代码
2020/02/12 Python
Python3运算符常见用法分析
2020/02/14 Python
Django之腾讯云短信的实现
2020/06/12 Python
鞋子女王塔玛拉·梅隆同名奢侈品牌:Tamara Mellon
2017/11/22 全球购物
Python的两道面试题
2013/06/29 面试题
法学专业毕业生自荐信范文
2013/12/18 职场文书
新学期家长寄语
2014/01/19 职场文书
岗位职责的构建方法
2014/02/01 职场文书
小学社团活动总结
2014/06/27 职场文书
大学生找工作求职信
2014/07/09 职场文书
关于上班时间调整的通知
2015/04/23 职场文书
加薪通知
2015/04/25 职场文书
springboot用户数据修改的详细实现
2022/04/06 Java/Android
Windows Server 2008配置防火墙策略详解
2022/06/28 Servers