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对象的property和prototype是什么一种关系
Aug 06 Javascript
jquery插件之easing 动态菜单
Aug 21 Javascript
使用js的replace()方法查找字符示例代码
Oct 28 Javascript
使用时间戳解决ie缓存的问题
Aug 20 Javascript
jquery UI Datepicker时间控件的使用方法(基础版)
Nov 07 Javascript
有关Promises异步问题详解
Nov 13 Javascript
jquery实现手风琴效果
Nov 20 Javascript
JavaScript实现翻页功能(附效果图)
Feb 16 Javascript
JavaScript阻止表单提交方法(附代码)
Aug 15 Javascript
Vue指令之 v-cloak、v-text、v-html实例详解
Aug 08 Javascript
微信小程序自定义tabBar在uni-app的适配详解
Sep 30 Javascript
在Vue项目中使用Typescript的实现
Dec 19 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
全国FM电台频率大全 - 2 天津市
2020/03/11 无线电
如何使用PHP中的字符串函数
2006/10/09 PHP
hessian 在PHP中的使用介绍
2010/12/13 PHP
用PHP代码给图片加水印
2015/07/01 PHP
php 数据结构之链表队列
2017/10/17 PHP
Laravel数据库读写分离配置的方法
2019/10/13 PHP
JS分割字符串并放入数组的函数
2011/07/04 Javascript
不同Jquery版本引发的问题解决
2013/10/14 Javascript
Chrome下ifame父窗口调用子窗口的问题示例探讨
2014/03/17 Javascript
jQuery垂直多级导航菜单代码分享
2015/08/18 Javascript
javascript字符串函数汇总
2015/12/06 Javascript
基于jQuery制作小图标上下滑动特效
2017/01/18 Javascript
JavaScript实现水平进度条拖拽效果
2017/01/18 Javascript
分享一个精简的vue.js 图片lazyload插件实例
2017/03/13 Javascript
JavaScript异步上传图片文件的实例代码
2017/07/04 Javascript
JS实现自定义状态栏动画文字效果示例
2017/10/12 Javascript
Vue.js样式动态绑定实现小结
2019/01/24 Javascript
layui 实现二级弹窗弹出之后 关闭一级弹窗的方法
2019/09/18 Javascript
深入理解Python中的*重复运算符
2017/10/28 Python
Python中几种属性访问的区别与用法详解
2018/10/10 Python
python 去除二维数组/二维列表中的重复行方法
2019/01/23 Python
Python+OpenCV+pyQt5录制双目摄像头视频的实例
2019/06/28 Python
python爬虫 爬取超清壁纸代码实例
2019/08/16 Python
Python简单实现区域生长方式
2020/01/16 Python
python opencv如何实现图片绘制
2020/01/19 Python
Python @property原理解析和用法实例
2020/02/11 Python
python字典和json.dumps()的遇到的坑分析
2020/03/11 Python
Pytorch上下采样函数--interpolate用法
2020/07/07 Python
经济实惠的豪华背包和行李袋:Packs Project
2018/10/17 全球购物
什么是属性访问器
2015/10/26 面试题
大四自我鉴定范文
2013/10/06 职场文书
求职简历中自我评价
2014/01/28 职场文书
签约仪式策划方案
2014/06/02 职场文书
统计专业自荐书
2014/07/06 职场文书
2016年共产党员公开承诺书
2016/03/24 职场文书
简单介绍 http请求响应参数、无连接无状态、MIME、状态码、端口、telnet、curl
2021/03/31 HTML / CSS