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压缩混淆工具
May 16 Javascript
关于innerHTML后丢失动态绑定的EVENT问题解决方法
May 19 Javascript
javascript判断是否按回车键并解决浏览器之间的差异
May 13 Javascript
JS 事件绑定、事件监听、事件委托详细介绍
Sep 28 Javascript
微信小程序开发之入门实例教程篇
Mar 07 Javascript
JavaScript+CSS相册特效实例代码
Sep 07 Javascript
浅析java线程中断的办法
Jul 29 Javascript
vue组件之间数据传递的方法实例分析
Feb 12 Javascript
详解vuex持久化插件解决浏览器刷新数据消失问题
Apr 15 Javascript
解决layer弹出层的内容页点击按钮跳转到新的页面问题
Sep 14 Javascript
微信小程序实现轨迹回放的示例代码
Dec 13 Javascript
JavaScript实时更新当前的时间的示例代码
Jul 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 输出双引号"与单引号'的方法
2010/05/09 PHP
PHP中is_file不能替代file_exists的理由
2014/03/04 PHP
thinkphp制作404跳转页的简单实现方法
2016/09/22 PHP
PHP+Mysql+Ajax实现淘宝客服或阿里旺旺聊天功能(前台页面)
2017/06/16 PHP
PHP实现类似于C语言的文件读取及解析功能
2017/09/01 PHP
PHP自动载入类文件函数__autoload的使用方法
2019/03/25 PHP
HTML-CSS群中单选引发的“事件”
2007/03/05 Javascript
超简单的jquery的AJAX用法
2010/05/10 Javascript
javascript闭包传参和事件的循环绑定示例探讨
2014/04/17 Javascript
Node.js中使用Buffer编码、解码二进制数据详解
2014/08/16 Javascript
使用mini-define实现前端代码的模块化管理
2014/12/25 Javascript
深入分析原生JavaScript事件
2014/12/29 Javascript
javascript中alert()与console.log()的区别
2015/08/26 Javascript
jQuery实现的浮动层div浏览器居中显示效果
2017/02/03 Javascript
Angular 4依赖注入学习教程之简介(一)
2017/06/04 Javascript
vue.js项目中实用的小技巧汇总
2017/11/29 Javascript
JavaScript实现简单的文本逐字打印效果示例
2018/04/12 Javascript
python实现在pickling的时候压缩的方法
2014/09/25 Python
python破解zip加密文件的方法
2018/05/31 Python
python读取xlsx的方法
2018/12/25 Python
Python datetime和unix时间戳之间相互转换的讲解
2019/04/01 Python
Python笔试面试题小结
2019/09/07 Python
解决pycharm最左侧Tool Buttons显示不全的问题
2019/12/17 Python
Python模拟伯努利试验和二项分布代码实例
2020/05/27 Python
用CSS禁用输入法(CSS3 UI规范)实例解析
2012/12/04 HTML / CSS
巴西最大的体育用品商城:Netshoes巴西
2016/11/29 全球购物
双立人美国官方商店:ZWILLING集团餐具和炊具
2020/05/07 全球购物
偷看我的初中毕业鉴定
2014/01/29 职场文书
师德学习感言
2014/01/31 职场文书
股权收购意向书
2014/04/01 职场文书
市场部业务员岗位职责
2014/04/02 职场文书
《小动物过冬》教学反思
2014/04/17 职场文书
护士演讲稿优秀范文
2014/04/30 职场文书
品牌服务方案
2014/06/03 职场文书
超市创意活动方案
2014/08/15 职场文书
《静夜思》教学反思
2016/02/17 职场文书