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

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

2、简单的例子

复制代码 代码如下:

  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. */
  18. var rainman = new Blog('jb51', 'http://www.jb51.net');
  19. 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:

复制代码 代码如下:

  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. var Website = function(){};
  13. Website.prototype = Blog.prototype;
  14. var mysite = new Website();


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

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

4、扩展2: 

复制代码 代码如下:

  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. var Website = function(){};
  8. Website.prototype = new Blog();
  9. 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 函数属性prototype(转)的更多相关文章

  1. javascript——函数属性和方法

    <script type="text/javascript"> //每个函数都包含两个属性:length 和 prototype //length:当前函数希望接受的命 ...

  2. 深入理解javascript函数系列第三篇——属性和方法

    × 目录 [1]属性 [2]方法 前面的话 函数是javascript中的特殊的对象,可以拥有属性和方法,就像普通的对象拥有属性和方法一样.甚至可以用Function()构造函数来创建新的函数对象.本 ...

  3. javascript 重要属性之prototype(继承)

    转载猫猫小屋 http://www.maomao365.com/?p=831 在javascript中每一个函数都拥有 prototype属性,在javascript中使用prototype,可以向已 ...

  4. 函数有一个特殊的属性 prototype!

    JavaScript 中只有对象,没有类. 实际上,JavaScript 才是真正应该被称为「面向对象」的语言,因为它是少有的可以不通过类,直接创建对象的语言. 函数的 prototype 属性 在 ...

  5. JavaScript 全局属性/函数

    JavaScript 全局 JavaScript 全局属性和方法可用于创建Javascript对象. JavaScript 全局属性 属性 描述 Infinity 代表正的无穷大的数值. NaN 指示 ...

  6. JavaScript函数之实际参数对象(arguments) / callee属性 / caller属性 / 递归调用 / 获取函数名称的方法

    函数的作用域:调用对象 JavaScript中函数的主体是在局部作用域中执行的,该作用域不同于全局作用域.这个新的作用域是通过将调用对象添加到作用域链的头部而创建的(没怎么理解这句话,有理解的亲可以留 ...

  7. js 对象的_proto_属性 和函数的prototype属性分析

    bill是 Employee类型的实例,_proto_指向Employee.prototype Employee.prototype有一个constructor属性,指向Employee函数自身 fu ...

  8. JavaScript全局属性/函数

    JavaScript 全局属性和方法可用于创建Javascript对象. JavaScript 全局属性 属性 描述 Infinity 代表正的无穷大的数值. NaN 指示某个值是不是数字值. und ...

  9. JavaScript全局属性和全局函数

    JavaScript全局属性和全局函数可以与所有内置JavaScript对象一起使用. JavaScript全局属性 属性 描述 Infinity 表示正/负无穷大的数值 NaN "Not- ...

随机推荐

  1. ubuntu 安装codeblocks

    本文转载于:http://blog.csdn.net/i_fuqiang/article/details/9749225 1.安装gcc: sudo apt-get install build-ess ...

  2. 关于TransactionScope 使用

    在去年的项目中使用了TransactionScope,现在总结下TransactionScope的使用说明 一.TransactionScope是.Net Framework 2.0之后,新增了一个名 ...

  3. DockPanel的使用与技巧

    DockPanel的使用 1.建立一个WinForm工程,默认生成了一个WinForm窗体Form1. 2.引用—>添加引用—>浏览—>weiFenLuo.winFormsUI.Do ...

  4. NFT是什么,有什么前景?

    去年 11 月,Crypokitties 的发布给加密货币的世界带来了风暴,有些加密猫的价格甚至涨到了 30 万美元,以太坊网络拥堵不堪,平均贡献了当时以太坊网络30%的交易额.当 Cryptokit ...

  5. 关于JavaScript中prototype机制的理解

    最近几天一直在研究JavaScript中原型的机制,从开始的似懂非懂,到今天终于有所领悟.不敢说彻底理解,但是起码算知道怎么回事了. 为什么一开始似懂非懂 开始了解一遍原型机制后,感觉知其然但不知其所 ...

  6. Flask中的模板语法jinjia2

    Flask中默认的模板语言是Jinja2 I. Jinja2模板语言中的 for {% for foo in g %} {% endfor %} II. Jinja2模板语言中的 if {% if g ...

  7. PAT天梯赛 L2-020. 功夫传人 【DFS】

    题目链接 https://www.patest.cn/contests/gplt/L2-020 思路 从师父开始 一层一层往下搜 然后 搜到 得道者 就更新答案 AC代码 #include <c ...

  8. Android Weekly Notes Issue #316

    July 1st, 2018 Android Weekly Issue #316 本期内容包含教你使用Kotlin通过Annotation Processor生成代码文件, JetPack中的Andr ...

  9. 纯CSS3实现淡入淡出下拉菜单

    纯CSS3实现淡入淡出下拉菜单是一款比较简单清新的CSS3教程下拉菜单,这款下拉菜单是垂直方向的,点击主菜单项可以展开和折叠子菜单,在展开折叠的过程中伴随着淡入淡出的动画效果 源代码:http://w ...

  10. layer 插件 在子页面关闭自身的方法

    先取到该子页面在父级页面中的name 值 var  index= parent.layer.getFrameIndex(Window.name); 然后用该方法关闭 parent.layer.clos ...