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 相关文章推荐
神奇的代码 通杀各种网站-可随意修改复制页面内容
Jul 17 Javascript
使用SyntaxHighlighter实现HTML高亮显示代码的方法
Feb 04 Javascript
jquery如何实现在加载完iframe的内容后再进行操作
Sep 10 Javascript
Javascript的闭包详解
Dec 26 Javascript
用JavaScript实现页面重定向功能的教程
Jun 04 Javascript
jQuery拖动布局其结果保存到数据库
Oct 09 Javascript
JS使用JSON作为参数实例分析
Jun 23 Javascript
Vue组件中prop属性使用说明实例代码详解
May 31 Javascript
bootstrap 路径导航 分页 进度条的实例代码
Aug 06 Javascript
vue+vuex+json-seiver实现数据展示+分页功能
Apr 11 Javascript
ES6 proxy和reflect的使用方法与应用实例分析
Feb 15 Javascript
完美解决vue 中多个echarts图表自适应的问题
Jul 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
php将字符串转化成date存入数据库的两种方式
2014/04/28 PHP
详解PHP中instanceof关键字及instanceof关键字有什么作用
2015/11/05 PHP
Android App中DrawerLayout抽屉效果的菜单编写实例
2016/03/21 PHP
php while循环控制的简单实例
2016/05/30 PHP
北京奥运官方网站幻灯切换效果flash版打包下载
2008/01/30 Javascript
在次封装easyui-Dialog插件实现代码
2010/11/14 Javascript
基于jquery的弹出提示框始终处于窗口的居中位置(类似于alert弹出框的效果)
2011/09/28 Javascript
JavaScript中的面向对象介绍
2012/06/30 Javascript
js实现网页多级级联菜单代码
2015/08/20 Javascript
Bootstrap学习笔记之环境配置(1)
2016/12/07 Javascript
javascript实现简单的ajax封装示例
2016/12/28 Javascript
js实现倒计时效果(小于10补零)
2017/03/08 Javascript
jQuery实现一个简单的验证码功能
2017/06/26 jQuery
新手vue构建单页面应用实例代码
2017/09/18 Javascript
Vue.js自定义指令学习使用详解
2019/10/19 Javascript
JS通用方法触发点击事件代码实例
2020/02/17 Javascript
使用Vue 自定义文件选择器组件的实例代码
2020/03/04 Javascript
python中Flask框架简单入门实例
2015/03/21 Python
python、java等哪一门编程语言适合人工智能?
2017/11/13 Python
python实现将excel文件转化成CSV格式
2018/03/22 Python
python将秒数转化为时间格式的实例
2018/09/16 Python
python读写Excel表格的实例代码(简单实用)
2019/12/19 Python
Django REST Framework 分页(Pagination)详解
2020/11/30 Python
详解python的变量缓存机制
2021/01/24 Python
Joie官方网上商店:购买服装和女装配饰
2018/06/05 全球购物
Mankind美国/加拿大:英国领先的男士美容护发用品公司
2018/12/05 全球购物
如何找出EMP表里面SALARY第N高的employee
2013/12/05 面试题
应届大学生简历中的自我评价
2014/01/15 职场文书
三月法制宣传月活动总结
2014/07/03 职场文书
计算机实训报告总结
2014/11/05 职场文书
幼师中班个人总结
2015/02/12 职场文书
单位考核聘任报告
2015/03/02 职场文书
年底个人总结范文
2015/03/10 职场文书
利用Sharding-Jdbc进行分库分表的操作代码
2022/01/22 Java/Android
Mysql超详细讲解死锁问题的理解
2022/04/01 MySQL
默认网关不可用修复后过一会又不好使了解决方法
2022/04/08 数码科技