JavaScript中prototype属性与new运算符详解

prototype属性与内存分配机制

尽管JavaScript语言本身不直接提供传统意义上的类概念，但它依然能够支持重载、多态以及继承等面向对象编程特性。这些功能的实现，主要依赖于JavaScript中的引用机制、变量作用域以及prototype属性的协同工作。

 
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属性内部包含一个变量和一个函数定义；

变量rainman和test作为Blog的实例，各自拥有name和url两个独立变量；

对于rainman和test这两个实例而言，它们虽然拥有jumpurl变量和jump函数，但这些成员并未在实例本身的内存中分配空间，而是指向了Blog.prototype中的对应引用。

 
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的两个属性（jumpurl和jump）同样未分配独立内存，它们分别引用了Blog.prototype.jumpurl和Blog.prototype.jump。

 
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；而Website.prototype又继承自Blog.prototype（这种关系更准确地说是引用而非传统意义上的继承）。

在整个程序运行过程中，内存中仅分配了一个jumpurl变量和一个jump方法，实现了资源共享。

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

在绝大多数JavaScript引擎实现中，每个函数都会自动拥有一个空的原型对象，即存在prototype属性。