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 相关文章推荐
刷新时清空文本框内容的js代码
Apr 23 Javascript
JavaScript中为元素加上name属性的方法
May 09 Javascript
css值转换成数值请抛弃parseInt
Oct 24 Javascript
jquery的相对父元素和相对文档定位示例代码
Aug 02 Javascript
JavaScript子类用Object.getPrototypeOf去调用父类方法解析
Dec 05 Javascript
JavaScript实现同步于本地时间的动态时间显示方法
Feb 02 Javascript
jQuery使用append在html元素后同时添加多项内容的方法
Mar 26 Javascript
JQuery 传送中文乱码问题的简单解决办法
May 24 Javascript
jQuery简单注册和禁用全局事件的方法
Jul 25 Javascript
JavaScript设计模式之工厂模式和抽象工厂模式定义与用法分析
Jul 26 Javascript
浅谈webpack4 图片处理汇总
Sep 12 Javascript
Vue3.0的优化总结
Oct 16 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 stripslashes和addslashes的区别
2014/02/03 PHP
PHP实现通过Luhn算法校验信用卡卡号是否有效
2015/03/23 PHP
使用phpexcel类实现excel导入mysql数据库功能(实例代码)
2016/05/12 PHP
Yii2使用$this->context获取当前的Module、Controller(控制器)、Action等
2017/03/29 PHP
PHP实现动态删除XML数据的方法示例
2018/03/30 PHP
PHP程序员简单的开展服务治理架构操作详解(二)
2020/05/14 PHP
ExtJs纵坐标值重复问题的解决方法
2014/02/27 Javascript
Javascript中封装window.open解决不兼容问题
2014/09/28 Javascript
jquery移动点击的项目到列表最顶端的方法
2015/06/24 Javascript
js获取及判断键盘按键的方法
2015/12/01 Javascript
Jquery uploadify上传插件使用详解
2016/01/13 Javascript
利用CSS3在Angular中实现动画
2016/01/15 Javascript
EasyUI 结合JS导出Excel文件的实现方法
2016/11/10 Javascript
原生js实现无限循环轮播图效果
2017/01/20 Javascript
利用forever和pm2部署node.js项目过程
2017/05/10 Javascript
文本溢出插件jquery.dotdotdot.js使用方法详解
2017/06/22 jQuery
vue双花括号的使用方法 附练习题
2017/11/07 Javascript
详解Vue 事件修饰符capture 的使用
2017/12/29 Javascript
Vue实现按钮旋转和移动位置的实例代码
2018/08/09 Javascript
layui-laydate时间日历控件使用方法详解
2018/11/15 Javascript
vue+elementUI实现表单和图片上传及验证功能示例
2019/05/14 Javascript
JavaScript交换变量常用4种方法解析
2020/09/02 Javascript
[01:51]历届DOTA2国际邀请赛举办地回顾 TI9落地上海
2018/08/26 DOTA
PyCharm 创建指定版本的 Django(超详图解教程)
2019/06/18 Python
详解Python二维数组与三维数组切片的方法
2019/07/18 Python
Django中自定义admin Xadmin的实现代码
2019/08/09 Python
Python类的绑定方法和非绑定方法实例解析
2020/03/04 Python
div或img图片高度随宽度自适应的方法
2020/02/06 HTML / CSS
为世界各地的女性设计和生产时尚服装:ROMWE
2016/09/17 全球购物
高中三年学习生活的自我评价
2013/10/10 职场文书
普师专业个人自荐信范文
2013/11/26 职场文书
《美丽的小兴安岭》教学反思
2014/02/26 职场文书
春节联欢晚会主持词范文
2014/03/24 职场文书
学习《中小学教师职业道德规范》心得体会
2016/01/18 职场文书
nginx网站服务如何配置防盗链(推荐)
2021/03/31 Servers
MongoDB误操作后使用oplog恢复数据
2022/04/11 MongoDB