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 播放器 控制
Jan 22 Javascript
IE和Firefox下event事件杂谈
Dec 18 Javascript
Prototype源码浅析 Enumerable部分(二)
Jan 18 Javascript
用jquery存取照片的具体实现方法
Jun 30 Javascript
JS复制到剪贴板示例代码
Oct 30 Javascript
jQuery级联操作绑定事件实例
Sep 02 Javascript
学习javascript的闭包,原型,和匿名函数之旅
Oct 18 Javascript
Bootstrap常用组件学习(整理)
Mar 24 Javascript
使用vue的transition完成滑动过渡的示例代码
Jun 25 Javascript
Angular5中提取公共组件之radio list的实例代码
Jul 10 Javascript
微信小程序仿朋友圈发布动态功能
Jul 15 Javascript
详解vue中localStorage的使用方法
Nov 22 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
打造计数器DIY三步曲(中)
2006/10/09 PHP
使用cookie实现统计访问者登陆次数
2013/06/08 PHP
php用正则表达式匹配中文实例详解
2013/11/06 PHP
浅谈PHP拦截器之__set()与__get()的理解与使用方法
2016/10/18 PHP
PHP函数rtrim()使用中的怪异现象分析
2017/02/24 PHP
JQuery 遮罩层实现(mask)实现代码
2010/01/09 Javascript
jquery获取input的value问题说明
2010/08/19 Javascript
如何使用Javascript获取距今n天前的日期
2013/07/08 Javascript
JS版的date函数(和PHP的date函数一样)
2014/05/12 Javascript
js实现交换运动效果的方法
2015/04/10 Javascript
JQuery判断radio(单选框)是否选中和获取选中值方法总结
2015/04/15 Javascript
jquery 追加元素append、prepend、before、after用法与区别分析
2016/12/02 Javascript
layui弹出层效果实现代码
2017/05/19 Javascript
JS给按钮添加跳转功能类似a标签
2017/05/30 Javascript
react项目实践之webpack-dev-serve
2018/09/14 Javascript
react高阶组件添加和删除props
2019/04/26 Javascript
[05:46]2018完美盛典-《同梦共竞》
2018/12/17 DOTA
matplotlib在python上绘制3D散点图实例详解
2017/12/09 Python
Python排序算法之选择排序定义与用法示例
2018/04/29 Python
实例讲解Python中浮点型的基本内容
2019/02/11 Python
Python小进度条显示代码
2019/03/05 Python
python 列表输出重复值以及对应的角标方法
2019/06/11 Python
python读出当前时间精度到秒的代码
2019/07/05 Python
python SVM 线性分类模型的实现
2019/07/19 Python
在pycharm中为项目导入anacodna环境的操作方法
2020/02/12 Python
python多项式拟合之np.polyfit 和 np.polyld详解
2020/02/18 Python
python 常见的反爬虫策略
2020/09/27 Python
使用CSS3制作一个简单的进度条(demo)
2017/05/23 HTML / CSS
Original Penguin英国官方网站:美国著名休闲时装品牌
2016/10/30 全球购物
AE美国鹰日本官方网站: American Eagle Outfitters
2016/12/10 全球购物
写演讲稿要注意的六件事
2014/01/14 职场文书
善意的谎言事例
2014/02/15 职场文书
法定授权委托证明书
2014/09/27 职场文书
体育活动总结
2015/02/04 职场文书
有关西游记的读书笔记
2015/06/25 职场文书
欧元符号 €
2022/02/17 杂记