现在的位置: 网页制作教程网站制作教程 >正文
JavaScript脚本

JavaScript中的prototype的介绍

发表于2017/3/17 网站制作教程 0条评论 ⁄ 热度 1,158℃

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('rainman', 'http://rainman.cnblogs.com');
var test = new Blog('test', 'http://test.cnblogs.com');

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

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、其它

在绝大多数JavaScript版本中,JS引擎都会给每个函数一个空的原型对象,即prototype属性。

  • 暂无评论