javascript prototype

Javascript prototype:

基本的用法把ClassA的一个实例赋值给ClassB ClassB就继承了ClassA的所有属性

<script>
function ClassA()
{
    this.a='a';
}
function ClassB()
{
    this.b='b';
}
ClassB.prototype=new ClassA();
var objB=new ClassB();
for(var p in objB)document.write(p+"<br>");
</script>

从原型继承理论的角度去考虑 js的原型继承是引用原型不是复制原型
所以修改原型会导致所有B的实例的变化

<script>
function ClassA()
{
    this.a='a';
}
function ClassB()
{
    this.b='b';
}
ClassB.prototype=new ClassA();
var objB=new ClassB();
alert(objB.a);
ClassB.prototype.a='changed!!';
alert(objB.a);
</script>

然而子类对象的写操作只访问子类对象中成员它们之间不会互相影响
因此写是写子类读是读原型（如果子类中没有的话）

<script>
function ClassA()
{
    this.a='a';
}
function ClassB()
{
    this.b='b';
}
ClassB.prototype=new ClassA();
var objB1=new ClassB();
var objB2=new ClassB();
objB1.a='!!!';
alert(objB1.a);
alert(objB2.a);
</script>

每个子类对象都执有同一个原型的引用所以子类对象中的原型成员实际是同一个

<script>
function ClassA()
{
    this.a=function(){alert();};
}
function ClassB()
{
    this.b=function(){alert();};
}
ClassB.prototype=new ClassA();
var objB1=new ClassB();
var objB2=new ClassB();
alert(objB1.a==objB2.a);
alert(objB1.b==objB2.b);
</script>

构造子类时原型的构造函数不会被执行

<script>
function ClassA()
{
    alert("a");
    this.a=function(){alert();};
}
function ClassB()
{
    alert("b");
    this.b=function(){alert();};
}
ClassB.prototype=new ClassA();
var objB1=new ClassB();
var objB2=new ClassB();
</script>

接下来是致命的，在子类对象中访问原型的成员对象：

<script>
function ClassA()
{
    this.a=[];
}
function ClassB()
{
    this.b=function(){alert();};
}
ClassB.prototype=new ClassA();
var objB1=new ClassB();
var objB2=new ClassB();
objB1.a.push(1,2,3);
alert(objB2.a);
//所有b的实例中的a成员全都变了！！
</script>

所以在prototype继承中原型类中不能有成员对象！所有成员必须是值类型数据（string也可以）
用prototype继承有执行效率高，不会浪费内存，为父类动态添置方法后子类中马上可见等的优点。
我就非常喜欢用prototype继承。
prototype继承是通过把子类的原型对象（prototype）设置成父类的一个实例来进行继承的。
只简单的这样设置继承的确如楼主所说，有不少缺点。总的来说有四个缺点：
　　缺点一：父类的构造函数不是像JAVA中那样在给子类进行实例化时执行的，而是在设置继承的时候执行的，并且只执行一次。这往往不是我们希望的，特别是父类的构造函数中有一些特殊操作的情况下。

　　缺点二：由于父类的构造函数不是在子类进行实例化时执行，在父类的构造函数中设置的成员变量到了子类中就成了所有实例对象公有的公共变量。由于JavaScript中继承只发生在“获取”属性的值时，对于属性的值是String，Number和Boolean这些数据本身不能被修改的类型时没有什么影响。但是Array和Object类型就会有问题。
　　缺点三：如果父类的构造函数需要参数，我们就没有办法了。

　　缺点四：子类原本的原型对象被替换了，子类本身的constructor属性就没有了。在类的实例取它的constructor属性时，取得的是从父类中继承的constructor属性，从而constructor的值是父类而不是子类。

我也曾经为了这四个缺点头疼过，于是对prototype继承进行改造。
我试了几种方法，下面是我觉得最好的一种。我把它写成Function对象的一个方法，这样用的时候方便。方法如下：

//类的继承-海浪版
Function.prototype.Extends = function (parentClass)
{
  var Bs = new Function();
  Bs.prototype = parentClass.prototype;
  this.prototype = new Bs();
  this.prototype.Super = parentClass;
  this.prototype.constructor = this;
}

 

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','http://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', 'http://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属性。

详细出处参考：http://www.jb51.net/article/23052.htm

 

this成员在每次new对象时都要被JavaScript引擎解析，

原因很简单，根据不同的构造参数，使它们在运行期的行为可能有很大

的不同。而prototype的成员就不会每次都解析，第一次定义prototype

成员时才解析，以后可以直接引用prototype成员，并且更改了prototype

成员，所有已经建立的实例对象的相应成员都会被更改。

 

因此好的习惯是在继承之后把prototype的constructor成员设置一下，

否则会把父类的prototype成员改掉，那样程序的行为就不可预知了。

如：

 

1 function classA() {

2

3 }

4

5 classB.prototype = new classA();

6 classB.prototype.constructor = classB;

7