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的15款幻灯片插件
Apr 10 Javascript
js工具方法弹出蒙版
May 08 Javascript
在页面上用action传递参数到后台出现乱码的解决方法
Dec 31 Javascript
一个简单的Node.js异步操作管理器分享
Apr 29 Javascript
详解jQuery移动页面开发中的ui-grid网格布局使用
Dec 03 Javascript
animate 实现滑动切换效果【实例代码】
May 05 Javascript
Bootstrap响应式侧边栏改进版
Sep 17 Javascript
浅谈vue中改elementUI默认样式引发的static与assets的区别
Feb 03 Javascript
Jquery和CSS实现选择框重置按钮功能
Nov 08 jQuery
Vue递归组件+Vuex开发树形组件Tree--递归组件的简单实现
Apr 01 Javascript
vue 限制input只能输入正数的操作
Aug 05 Javascript
详解JavaScript中的this指向问题
Feb 05 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下关于Cannot use a scalar value as an array的解决办法
2010/08/08 PHP
PHP中文分词的简单实现代码分享
2011/07/17 PHP
PHP中Array相关函数简介
2016/07/03 PHP
ThinkPHP 3使用OSS的方法
2018/07/19 PHP
PHP程序员简单的开展服务治理架构操作详解(三)
2020/05/14 PHP
javascript 装载iframe子页面,自适应高度
2009/03/20 Javascript
jQuery.position()方法获取不到值的安全替换方法
2015/03/13 Javascript
12306验证码破解思路分享
2015/03/25 Javascript
JavaScript中constructor()方法的使用简介
2015/06/05 Javascript
JS正则RegExp.test()使用注意事项(不具有重复性)
2016/12/28 Javascript
Vue.js常用指令的使用小结
2017/06/23 Javascript
BootstrapValidator实现表单验证功能
2019/11/08 Javascript
Vue实现 点击显示再点击隐藏效果(点击页面空白区域也隐藏效果)
2020/01/16 Javascript
详解vue beforeEach 死循环问题解决方法
2020/02/25 Javascript
基于JS+HTML实现弹窗提示是否确认提交功能
2020/06/17 Javascript
如何检测JavaScript中的死循环示例详解
2020/08/30 Javascript
Python入门篇之字符串
2014/10/17 Python
利用 Monkey 命令操作屏幕快速滑动
2016/12/07 Python
Python3.X 线程中信号量的使用方法示例
2017/07/24 Python
Pandas之drop_duplicates:去除重复项方法
2018/04/18 Python
python实现顺时针打印矩阵
2019/03/02 Python
python隐藏终端执行cmd命令的方法
2019/06/24 Python
Django框架 querySet功能解析
2019/09/04 Python
Python hashlib常见摘要算法详解
2020/01/13 Python
Selenium常见异常解析及解决方案示范
2020/04/10 Python
keras导入weights方式
2020/06/12 Python
Python定时任务框架APScheduler原理及常用代码
2020/10/05 Python
python爬虫scrapy基本使用超详细教程
2021/02/20 Python
Spanx塑身衣官网:美国知名内衣品牌
2017/01/11 全球购物
素食餐饮项目创业计划书
2014/02/02 职场文书
生产部岗位职责范文
2014/02/07 职场文书
趣味活动策划方案
2014/02/08 职场文书
管理失职检讨书
2014/02/12 职场文书
2015年业务工作总结范文
2015/04/10 职场文书
2016大学生入党积极分子心得体会
2016/01/06 职场文书
如何用PHP实现多线程编程
2021/05/26 PHP