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中需要注意的细节问题小结
Dec 06 Javascript
js验证电话号码与手机支持+86的正则表达式
Jan 23 Javascript
用js通过url传参把数据从一个页面传到另一个页面
Sep 01 Javascript
举例简介AngularJS的内部语言环境
Jun 17 Javascript
Bootstrap基本插件学习笔记之模态对话框(16)
Dec 08 Javascript
javascript中replace使用方法总结
Mar 01 Javascript
Vue自定义图片懒加载指令v-lazyload详解
Dec 31 Javascript
vue-cli项目优化方法- 缩短首屏加载时间
Apr 01 Javascript
Vue v-for循环之@click点击事件获取元素示例
Nov 09 Javascript
JavaScript内置对象之Array的使用小结
May 12 Javascript
详解用js代码触发dom事件的实现方案
Jun 10 Javascript
JavaScript实现拖动对话框效果的实现代码
Oct 12 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下网站防IP攻击代码,超级实用
2010/10/24 PHP
PHP学习之字符串比较和查找
2011/04/17 PHP
谈谈PHP中substr和substring的正确用法及相关参数的介绍
2015/12/16 PHP
Laravel给生产环境添加监听事件(SQL日志监听)
2017/06/19 PHP
Laravel配置全局公共函数的方法步骤
2019/05/09 PHP
php/JS实现的生成随机密码(验证码)功能示例
2019/06/06 PHP
Js+XML 操作
2006/09/20 Javascript
超链接的禁用属性Disabled使用示例
2014/07/31 Javascript
超棒的响应式布局jQuery插件Freetile.js
2014/11/17 Javascript
jquery实现带渐变淡入淡出并向右依次展开的多级菜单效果实例
2015/08/22 Javascript
JavaScript基本语法学习教程
2016/01/14 Javascript
详解javascript实现自定义事件
2016/01/19 Javascript
JavaScript+html5 canvas制作的圆中圆效果实例
2016/01/27 Javascript
老生常谈遮罩层 滚动条的问题
2016/04/29 Javascript
整理关于Bootstrap表单的慕课笔记
2017/03/29 Javascript
Vue中的验证登录状态的实现方法
2019/03/09 Javascript
解决vue更新路由router-view复用组件内容不刷新的问题
2019/11/04 Javascript
在vue中使用防抖函数组件操作
2020/07/26 Javascript
python同时给两个收件人发送邮件的方法
2015/04/30 Python
matplotlib作图添加表格实例代码
2018/01/23 Python
Python实现合并同一个文件夹下所有txt文件的方法示例
2018/04/26 Python
Python中psutil的介绍与用法
2019/05/02 Python
django之对FileField字段的upload_to的设定方法
2019/07/28 Python
numpy实现RNN原理实现
2021/03/02 Python
css3截图_动力节点Java学院整理
2017/07/11 HTML / CSS
OnePlus加拿大官网:中国国际化手机品牌
2020/10/13 全球购物
介绍一下SQL注入攻击的种类和防范手段
2012/02/18 面试题
股份合作协议书
2014/04/12 职场文书
单位工作证明格式模板
2014/10/04 职场文书
机修车间主任岗位职责
2015/04/08 职场文书
2016公司年会通知范文
2015/04/25 职场文书
员工年度工作总结2015
2015/05/18 职场文书
学生会工作感言
2015/08/07 职场文书
2016年助残日旅游活动总结
2016/04/01 职场文书
python利用pandas分析学生期末成绩实例代码
2021/07/09 Python
Oracle中日期的使用方法实例
2022/07/07 Oracle