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的finkyUI插件与Ajax实现页面数据加载功能
Dec 03 Javascript
JavaScript伸缩的菜单简单示例
Dec 03 Javascript
Javascript小技巧之生成html元素
May 15 Javascript
gridview生成时如何去掉style属性中的border-collapse
Sep 30 Javascript
AngularJS + Node.js + MongoDB开发的基于高德地图位置的通讯录
Jan 02 Javascript
分享9点个人认为比较重要的javascript 编程技巧
Apr 27 Javascript
vue自定义指令实现v-tap插件
Nov 03 Javascript
微信小程序 安全包括(框架、功能模块、账户使用)详解
Jan 16 Javascript
Bootstrap警告框(Alert)插件使用方法
Mar 21 Javascript
vue如何自动化打包测试环境和正式环境的dist/test文件
Jun 06 Javascript
Vue 技巧之控制父类的 slot
Feb 24 Javascript
js中forEach,for in,for of循环的用法示例小结
Mar 14 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
不支持fsockopen但支持culr环境下下ucenter与modoer通讯问题
2011/08/12 PHP
php数组函数序列之array_push() 数组尾部添加一个或多个元素(入栈),返回新长度。
2011/11/07 PHP
php制作unicode解码工具(unicode编码转换器)代码分享
2013/12/24 PHP
php实现encode64编码类实例
2015/03/24 PHP
php使用Session和文件统计在线人数
2015/07/04 PHP
以实例全面讲解PHP中多进程编程的相关函数的使用
2015/08/18 PHP
Centos6.5和Centos7 php环境搭建方法
2016/05/27 PHP
浅谈Jquery中Ajax异步请求中的async参数的作用
2016/06/06 Javascript
js实现楼层导航功能
2017/02/23 Javascript
JavaScript实现星星等级评价功能
2017/03/22 Javascript
vue登录路由验证的实现
2017/12/13 Javascript
JavaScript实现数值自动增加动画
2017/12/28 Javascript
vue通过点击事件读取音频文件的方法
2018/05/30 Javascript
webpack4之SplitChunksPlugin使用指南
2018/06/12 Javascript
Layer弹出层动态获取数据的方法
2018/08/20 Javascript
微信小程序webview实现长按点击识别二维码功能示例
2019/01/24 Javascript
vue中axios防止多次触发终止多次请求的示例代码(防抖)
2020/02/16 Javascript
[01:06]DOTA2隆重推出2016冬季勇士令状 内含上海特级锦标赛互动指南
2016/02/17 DOTA
[15:20]DOTA2-DPC中国联赛 正赛 Elephant vs Aster 选手采访
2021/03/11 DOTA
跟老齐学Python之一个免费的实验室
2014/09/14 Python
学习python之编写简单简单连接数据库并执行查询操作
2016/02/27 Python
python实现杨辉三角思路
2017/07/14 Python
python安装requests库的实例代码
2019/06/25 Python
美国一家运动专业鞋类零售商:Warehouse Shoe Sale(WSS)
2018/03/28 全球购物
中兴通讯全球官方网站:ZTE
2020/12/26 全球购物
预备党员思想汇报范文
2014/01/11 职场文书
11月升旗仪式讲话稿
2014/02/15 职场文书
伦敦奥运会的口号
2014/06/21 职场文书
团队拓展活动方案
2014/08/28 职场文书
学前班语言教学计划
2015/01/20 职场文书
Mysql Show Profile
2021/04/05 MySQL
Python爬虫实战之爬取京东商品数据并实实现数据可视化
2021/06/07 Python
Springboot集成阿里云OSS上传文件系统教程
2021/06/28 Java/Android
使用 Apache Dubbo 实现远程通信(微服务架构)
2022/02/12 Servers
Redis 中使用 list,streams,pub/sub 几种方式实现消息队列的问题
2022/03/16 Redis
Python3使用Qt5来实现简易的五子棋小游戏
2022/05/02 Python