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 相关文章推荐
JavaScript 设计模式学习 Singleton
Jul 27 Javascript
获取HTML DOM节点元素的方法的总结
Aug 21 Javascript
整理8个很棒的 jQuery 倒计时插件和教程
Dec 12 Javascript
HTML上传控件取消选择
Mar 06 Javascript
js键盘上下左右键怎么触发function(实例讲解)
Dec 14 Javascript
浮动的div自适应居中显示的js代码
Dec 23 Javascript
深入理解Javascript中this的作用域
Aug 12 Javascript
JS继承用法实例分析
Feb 05 Javascript
简介JavaScript中的unshift()方法的使用
Jun 09 Javascript
javascript实现添加附件功能的方法
Nov 18 Javascript
基于BootStrap Metronic开发框架经验小结【二】列表分页处理和插件JSTree的使用
May 12 Javascript
修改node.js默认的npm安装目录实例
May 15 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实现图片简单上传
2006/10/09 PHP
关于Appserv无法打开localhost问题的解决方法
2009/10/16 PHP
php中随机显示图片的函数代码
2011/06/23 PHP
php 获取今日、昨日、上周、本月的起始时间戳和结束时间戳的方法
2013/09/28 PHP
Windows2003下php5.4安装配置教程(Apache2.4)
2016/06/30 PHP
jquery中的sortable排序之后的保存状态的解决方法
2010/01/28 Javascript
JS的反射问题
2010/04/07 Javascript
node.js中的http.createServer方法使用说明
2014/12/14 Javascript
用headjs来管理和加载js 提高网站加载速度
2016/11/29 Javascript
bootstrap选项卡使用方法解析
2017/01/11 Javascript
移动端点击态处理的三种实现方式
2017/01/12 Javascript
js中作用域的实例解析
2017/03/16 Javascript
使用OPENLAYERS3实现点选的方法
2020/09/24 Javascript
vue-cli创建的项目,配置多页面的实现方法
2018/03/15 Javascript
Webpack path与publicPath的区别详解
2018/05/03 Javascript
vue删除html内容的标签样式实例
2018/09/13 Javascript
python远程登录代码
2008/04/29 Python
Pyramid添加Middleware的方法实例
2013/11/27 Python
python数据结构之二叉树的遍历实例
2014/04/29 Python
Python编写电话薄实现增删改查功能
2016/05/07 Python
Python提取Linux内核源代码的目录结构实现方法
2016/06/24 Python
TensorFlow数据输入的方法示例
2018/06/19 Python
Python爬虫防封ip的一些技巧
2020/08/06 Python
python 实现Harris角点检测算法
2020/12/11 Python
Python: glob匹配文件的操作
2020/12/11 Python
python 使用openpyxl读取excel数据
2021/02/18 Python
英国浴室洗脸盆购物网站:Click Basin
2018/06/08 全球购物
澳大利亚购买太阳镜和眼镜网站:Glamoureyes
2020/09/22 全球购物
高中毕业生个人自我鉴定
2013/11/24 职场文书
档案管理员岗位职责
2013/12/01 职场文书
总经理司机岗位职责
2014/02/06 职场文书
励志演讲稿300字
2014/08/21 职场文书
中学生旷课检讨书500字
2014/10/29 职场文书
郭明义观后感
2015/06/08 职场文书
2016年九九重阳节活动总结
2016/04/01 职场文书
mysql sum(if())和count(if())的用法说明
2022/01/18 MySQL