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
JS预览图像将本地图片显示到浏览器上
Aug 25 Javascript
js去除空格的12种实用方法
Nov 08 Javascript
包含中国城市的javascript对象实例
Aug 03 Javascript
jQuery实现的瀑布流加载效果示例
Sep 13 Javascript
浅谈EasyUI常用控件的禁用方法
Nov 09 Javascript
JS倒计时实例_天时分秒
Aug 22 Javascript
two.js之实现动画效果示例
Nov 06 Javascript
编写React组件项目实践分析
Mar 04 Javascript
Angular 封装并发布组件的方法示例
Apr 19 Javascript
vue实现计算器功能
Feb 22 Javascript
微信小程序实现搜索功能
Mar 10 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
javascript some()函数用法详解
2014/11/13 PHP
一键生成各种尺寸Icon的php脚本(实例)
2017/02/08 PHP
php实现的mongoDB单例模式操作类
2018/01/20 PHP
用javascript将数据库中的TEXT类型数据动态赋值到TEXTAREA中
2007/04/20 Javascript
JavaScript中的prototype使用说明
2010/04/13 Javascript
使用jQuery内容过滤选择器选择元素实例讲解
2013/04/18 Javascript
使用js操作cookie的一点小收获分享
2013/09/03 Javascript
javascript实现点击提交按钮后显示loading的方法
2015/07/03 Javascript
jquery获取easyui日期控件的值实现方法
2016/11/09 Javascript
nodejs body-parser 解析post数据实例
2017/07/26 NodeJs
详解从零搭建 vue2 vue-router2 webpack3 工程
2017/11/22 Javascript
代码详解JS操作剪贴板
2018/02/11 Javascript
jQuery.extend 与 jQuery.fn.extend的用法及区别实例分析
2018/07/25 jQuery
vue-for循环嵌套操作示例
2019/01/28 Javascript
基于Vue实现电商SKU组合算法问题
2019/05/29 Javascript
vuex实现数据状态持久化
2019/11/11 Javascript
JavaScript实现好看的跟随彩色气泡效果
2020/02/06 Javascript
vue+element 实现商城主题开发的示例代码
2020/03/26 Javascript
基于 Vue 的 Electron 项目搭建过程图文详解
2020/07/22 Javascript
js实现贪吃蛇小游戏(加墙)
2020/07/31 Javascript
js实现盒子移动动画效果
2020/08/09 Javascript
Scrapy-redis爬虫分布式爬取的分析和实现
2017/02/07 Python
Python的多维空数组赋值方法
2018/04/13 Python
Python实现的简单排列组合算法示例
2018/07/04 Python
在Python中给Nan值更改为0的方法
2018/10/30 Python
Python实现手绘图效果实例分享
2020/07/22 Python
Python中常用的os操作汇总
2020/11/05 Python
巴西男士胡须和头发护理产品商店:Beard
2017/11/13 全球购物
测试驱动开发的主要步骤是什么
2014/12/10 面试题
Java中有几种类型的流?JDK为每种类型的流提供了一些抽象类以供继承,请说出他们分别是哪些类?
2012/05/30 面试题
实习鉴定范文
2013/12/19 职场文书
询价采购方案
2014/06/09 职场文书
人事主管岗位职责说明书
2014/07/30 职场文书
大学生迟到检讨书500字
2014/10/17 职场文书
运动与健康自我评价
2015/03/09 职场文书
阿里云k8s服务升级时502错误 springboot项目应用
2022/04/09 Servers