javascript 函数属性prototype(转)-阿里云开发者社区

开发者社区> ke_ry> 正文

javascript 函数属性prototype(转)

简介: 在JavaScript中并没有类的概念,但javascript中的确可以实现重载,多态,继承。这些实现其实方法都可以用JavaScript中的引用和变量作用域结合prototype来解释。 1、prototype 在JavaScript中并没有类的概念,但JavaScript中的确可以实现重载,多态,继承。
+关注继续查看

JavaScript中并没有类的概念,但javascript中的确可以实现重载,多态,继承。这些实现其实方法都可以用JavaScript中的引用和变量作用域结合prototype来解释。

1、prototype 
在JavaScript中并没有类的概念,但JavaScript中的确可以实现重载,多态,继承。这些实现其实方法都可以用JavaScript中的引用和变量作用域结合prototype来解释。

2、简单的例子 

复制代码 代码如下:

[javascript] view plain copy
 
  1. var Blog = function( name, url ){  
  2. this.name = name;  
  3. this.url = url;  
  4. };  
  5. Blog.prototype.jumpurl = '';  
  6. Blog.prototype.jump = function(){  
  7. window.location = this.jumpurl;  
  8. };  
  9. /* 
  10. *等同于 
  11. Blog.prototype = { 
  12. jumpurl : '', 
  13. jump : function(){ 
  14. window.location = this.jumpurl; 
  15. }; 
  16. */  
  17. var rainman = new Blog('jb51', 'http://www.jb51.net');  
  18. 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: 

复制代码 代码如下:

[javascript] view plain copy
 
  1. Website.prototype = Blog.prototype  
  2. var Blog = function( name, url ){  
  3. this.name = name;  
  4. this.url = blogurl;  
  5. };  
  6. Blog.prototype.jumpurl = '';  
  7. Blog.prototype.jump = function(){  
  8. window.location = this.jumpurl;  
  9. };  
  10. var rainman = new Blog('jb51', 'http://www.jb51.net');  
  11. var test = new Blog('server', 'http://s.jb51.net');  
  12.   
  13. var Website = function(){};  
  14. Website.prototype = Blog.prototype;  
  15. var mysite = new Website();   




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

"Website.prototype = Blog.prototype;":Website的prototype并没有分配内存,只是引用了Blog的prototype属性。
mysite的两个属性也没有分配内存,也只是分别引用了Blog.prototype.jumpurl和Blog.prototype.jump 


4、扩展2: 

复制代码 代码如下:

[javascript] view plain copy
 
  1. Website.prototype = new Blog()  
  2. var Blog = function(){};  
  3. Blog.prototype.jumpurl = '';  
  4. Blog.prototype.jump = function(){  
  5. window.location = this.jumpurl;  
  6. };  
  7.   
  8. var Website = function(){};  
  9. Website.prototype = new Blog();  
  10. 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函数
0 全局对象 decodeURIComponent() 定义和用法 decodeURIComponent() 函数可对 encodeURIComponent() 函数编码的 URI 进行解码。
694 0
Flask入门flask-script 蓝本 钩子函数(3)
flask入门(三) 1 flask-script扩展库 概念: 是一个flask终端运行的解析器 ,因为项目完成以后,代码改动会有风险,所以借助终端完成不同启动项的配置 安装 pip3 install fl...
1128 0
jQuery EasyUI API 中文文档 - 属性表格(PropertyGrid)
PropertyGrid 属性表格 扩展自 $.fn.datagrid.defaults,用 $.fn.propertygrid.defaults 重写了 defaults。 依赖 datagrid 用法 1. 1. $('#pg').propertygrid({   2.     url:'propertygrid_data.json',   3.     showGroup:true 4. });  特性 其特性扩展自 datagrid,下列是为 propertygrid 增加的特性。
842 0
JavaScript之函数定义以及类型
今天在网上做到一道面试题,代码如下: var f = function g() { return 23; }; typeof g(); 问:以上代码的输出结果是() A “number” B “undefined” C “function” D Error 我第一反应选择的答案是A/C。
559 0
JavaScript轻应用:UI组件的属性配置
之前的文档已经介绍过,轻应用UI主要包含三部分:页面结构(xml文件)、页面样式(css文件)和页面逻辑(js文件),这里主要介绍一下页面结构的组成。
59 0
+关注
ke_ry
开源技术专家
443
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
文娱运维技术
立即下载
《SaaS模式云原生数据仓库应用场景实践》
立即下载
《看见新力量:二》电子书
立即下载