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 01 Javascript
JavaScript中Function详解
Feb 27 Javascript
JQuery实现可直接编辑的表格
Apr 16 Javascript
浏览器复制插件zeroclipboard使用指南
Mar 26 Javascript
AngularJS控制器之间的通信方式详解
Nov 03 Javascript
JavaScript中的call和apply的用途以及区别
Jan 11 Javascript
jQuery实现复选框的全选和反选
Feb 02 Javascript
Vue内容分发slot(全面解析)
Aug 19 Javascript
js canvas实现5张图片合成一张图片
Jul 15 Javascript
详解ES6 Promise的生命周期和创建
Aug 18 Javascript
jQuery三组基本动画与自定义动画操作实例总结
May 09 jQuery
vue使用refs获取嵌套组件中的值过程
Mar 31 Vue.js
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
Windows下的PHP5.0安装配制详解
2006/09/05 PHP
Linux下PHP加速器APC的安装与配置笔记
2014/10/24 PHP
laravel 中如何使用ajax和vue总结
2017/08/16 PHP
PHP实现redis限制单ip、单用户的访问次数功能示例
2018/06/16 PHP
php使用gearman进行任务分发操作实例详解
2020/02/26 PHP
jQuery 表单验证扩展(三)
2010/10/20 Javascript
对xmlHttp对象的理解
2011/01/17 Javascript
javascript getElementsByTagName
2011/01/31 Javascript
jQuery 1.7.2中getAll方法的疑惑分析
2012/05/23 Javascript
JQuery DataTable删除行后的页面更新利用Ajax解决
2013/05/17 Javascript
Javascript控制页面链接在新窗口打开具体方法
2013/08/16 Javascript
js截取小数点后几位的写法
2013/11/14 Javascript
javascript相关事件的几个概念
2015/05/21 Javascript
JavaScript实现添加、查找、删除元素
2015/07/02 Javascript
JavaScript调用客户端Java程序的方法
2015/07/27 Javascript
超详细的javascript数组方法汇总
2015/11/21 Javascript
jQuery动态创建元素以及追加节点的实现方法
2016/10/20 Javascript
JS经典正则表达式笔试题汇总
2016/12/15 Javascript
详解Vue 多级组件透传新方法provide/inject
2018/05/09 Javascript
Bootstrap-table使用footerFormatter做统计列功能
2018/09/07 Javascript
vscode 开发Vue项目的方法步骤
2018/11/25 Javascript
浅谈JavaScript闭包
2019/04/09 Javascript
详解element-ui级联菜单(城市三级联动菜单)和回显问题
2019/10/02 Javascript
原生javascript运动函数的封装示例【匀速、抛物线、多属性的运动等】
2020/02/23 Javascript
vue项目里面引用svg文件并给svg里面的元素赋值
2020/08/17 Javascript
[02:29]大剑、皮鞭、女装,这届DOTA2勇士令状里都有
2020/07/17 DOTA
Golang与python线程详解及简单实例
2017/04/27 Python
Python3 实现串口两进程同时读写
2019/06/12 Python
Django实现发送邮件功能
2019/07/18 Python
在macOS上搭建python环境的实现方法
2019/08/13 Python
tensorflow/core/platform/cpu_feature_guard.cc:140] Your CPU supports instructions that this T
2020/06/22 Python
sklearn的predict_proba使用说明
2020/06/28 Python
仿酷狗html5手机音乐播放器主要部分代码
2013/05/15 HTML / CSS
绿色美容,有机护肤品和化妆品:Safe & Chic
2018/10/29 全球购物
Java 多线程并发FutureTask
2022/06/28 Java/Android
Django数据库(SQlite)基本入门使用教程
2022/07/07 Python