JavaScript中的prototype使用说明

 更新时间:2010年04月13日 22:00:58   作者:  
在JavaScript中并没有类的概念,但JavaScript中的确可以实现重载,多态,继承。这些实现其实方法都可以用JavaScript中的引用和变量作用域结合prototype来解释。
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('jb51', 'https://www.jb51.net');
var test = new Blog('server', 'http://s.jb51.net');

这是一个非常简单的例子,但却可以很好的解释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('jb51', 'https://www.jb51.net');
var test = new Blog('server', 'http://s.jb51.net');

var Website = function(){};
Website.prototype = Blog.prototype;
var mysite = new Website();


通过上图可以看到下面这些内容:

"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();


通过上图可以看到下面这些内容:

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的 3 种工厂模式的用法

    分享JavaScript的 3 种工厂模式的用法

    这篇文章主要分享JavaScript的 3 种工厂模式,工厂模式是设计模式中最常用的设计模式之一,这种类型的设计模式属于创建型模式,它提供了一种创建对象的最佳方式,下文关于工厂模式的更多相关资料需要的小伙伴可以参考一下
    2022-04-04
  • JS实现页面滚动到关闭时的位置与不滚动效果

    JS实现页面滚动到关闭时的位置与不滚动效果

    这篇文章主要介绍了JS实现页面滚动到关闭时的位置与不滚动效果,滚动有两种方案,其一,利用路由中的meta,在离开页面时缓存 top 信息,其二,利用keep-alive缓存整个页面。但是仅限于没有实时数据变动的页面,需要的朋友可以参考下本文
    2022-06-06
  • JS与CSS3实现图片响应鼠标移动放大效果示例

    JS与CSS3实现图片响应鼠标移动放大效果示例

    这篇文章主要介绍了JS与CSS3实现图片响应鼠标移动放大效果,结合实例形式分析了javascript与css3响应鼠标事件动态修改页面元素属性实现图片放大效果相关操作技巧,需要的朋友可以参考下
    2018-05-05
  • JS获取当前时间的两种方法小结

    JS获取当前时间的两种方法小结

    这篇文章主要给大家介绍了关于JS获取当前时间的两种方法,在web开发中,通过js获取时间非常的常用,我这里做个总结,需要的朋友可以参考下
    2023-09-09
  • 前端js使用xlsx-js-style导出Excel文件并修饰单元格样式

    前端js使用xlsx-js-style导出Excel文件并修饰单元格样式

    这篇文章主要给大家介绍了关于前端js使用xlsx-js-style导出Excel文件并修饰单元格样式的相关资料,前端开发过程中经常遇到导出excel的需求,需要的朋友可以参考下
    2023-08-08
  • 利用JS制作万年历的方法

    利用JS制作万年历的方法

    本篇文章主要介绍了利用JS制作万年历的方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-08-08
  • layui实现图片虚拟路径上传,预览和删除的例子

    layui实现图片虚拟路径上传,预览和删除的例子

    今天小编就为大家分享一篇layui实现图片虚拟路径上传,预览和删除的例子,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2019-09-09
  • Javascript验证Visa和MasterCard信用卡号的方法

    Javascript验证Visa和MasterCard信用卡号的方法

    这篇文章主要介绍了Javascript验证Visa和MasterCard信用卡号的方法,涉及javascript正则验证的相关技巧,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-07-07
  • JavaScript实现数字数组正序排列的方法

    JavaScript实现数字数组正序排列的方法

    这篇文章主要介绍了JavaScript实现数字数组正序排列的方法,涉及javascript中sort方法的使用技巧,非常具有实用价值,需要的朋友可以参考下
    2015-04-04
  • 低门槛开发iOS、Android、小程序应用的前端框架详解

    低门槛开发iOS、Android、小程序应用的前端框架详解

    结合AVM官网的介绍和我自己的一些实践经验,我总结了一系列AVM的特性,我想这些内容足以让你主动去学习AVM框架了
    2021-10-10

最新评论