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 09 Javascript
使用jQuery.fn自定义jQuery翻页插件
Jan 20 Javascript
在新窗口打开超链接的方法小结
Apr 14 Javascript
jQuery基于图层模仿五星星评价功能的方法
May 07 Javascript
AngualrJS中每次$http请求时的一个遮罩层Directive
Jan 26 Javascript
JavaScript中apply方法的应用技巧小结
Sep 29 Javascript
ES6学习之变量的解构赋值
Feb 12 Javascript
在javascript中,null>=0 为真,null==0却为假,null的值详解
Feb 22 Javascript
jQuery使用正则验证15/18身份证的方法示例
Apr 27 jQuery
javascript数组定义的几种方法
Oct 06 Javascript
JavaScript 对引擎、运行时、调用堆栈的概述理解
Oct 22 Javascript
微信小程序实现文件预览
Oct 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
php实现文件下载代码分享
2014/08/19 PHP
php实现Mysql简易操作类
2015/10/11 PHP
在chrome中window.onload事件的一些问题
2010/03/01 Javascript
js实现图片拖动改变顺序附图
2014/05/13 Javascript
jquery不常用方法汇总
2015/07/26 Javascript
js实现左侧网页tab滑动门效果代码
2015/09/06 Javascript
input点击后placeholder中的提示消息消失
2016/01/15 Javascript
第七章之菜单按钮图标组件
2016/04/25 Javascript
Immutable 在 JavaScript 中的应用
2016/05/02 Javascript
AngularJS基础 ng-value 指令简单示例
2016/08/03 Javascript
详解用vue-cli来搭建vue项目和webpack
2017/04/20 Javascript
小程序实现列表删除功能
2018/10/30 Javascript
微信小程序自定义弹窗wcPop插件
2018/11/19 Javascript
JS实现的图片选择顺序切换和循环切换功能示例【测试可用】
2018/12/28 Javascript
[28:48]《真视界》- 2017年国际邀请赛
2017/09/27 DOTA
[01:09:13]DOTA2-DPC中国联赛 正赛 CDEC vs XG BO3 第三场 1月19日
2021/03/11 DOTA
读取本地json文件,解析json(实例讲解)
2017/12/06 Python
Java实现的执行python脚本工具类示例【使用jython.jar】
2018/03/29 Python
python3获取url文件大小示例代码
2019/09/18 Python
PyTorch实现AlexNet示例
2020/01/14 Python
Python操作MySQL数据库实例详解【安装、连接、增删改查等】
2020/01/17 Python
python GUI库图形界面开发之PyQt5树形结构控件QTreeWidget详细使用方法与实例
2020/03/02 Python
python 连续不等式语法糖实例
2020/04/15 Python
python如何建立全零数组
2020/07/19 Python
Python下使用Trackbar实现绘图板
2020/10/27 Python
详解Python中的文件操作
2021/01/14 Python
通过CSS3的object-fit来调整图片适配尺寸的技巧简介
2016/02/27 HTML / CSS
KOHLER科勒美国官网:国际著名卫浴橱柜领先品牌
2020/06/27 全球购物
北京天润融通.net面试题笔试题
2012/02/20 面试题
护理毕业生自我鉴定
2014/02/11 职场文书
学校招生宣传广告词
2014/03/19 职场文书
厨师长岗位职责范本
2014/08/25 职场文书
2014政府领导班子对照检查材料思想汇报(3篇)
2014/09/26 职场文书
老员工辞职信范文
2015/05/12 职场文书
文明礼仪主题班会
2015/08/13 职场文书
python实现A*寻路算法
2021/06/13 Python