javascript之function的prototype对象

JS中的phototype是JS中比较难理解的一个部分

一、知识点

本文基于下面几个知识点:

1. 原型法设计模式
      原型法的主要思想是：
      现在有一个类A，我想要创建一个类B，这个类是以A为原型的，并且能进行扩展。
      我们称B的原型为A。

2. javascript的方法可以分为三类：
    1) 类方法
    2) 对象方法
    3) 原型方法

例子：

function People(name){
    this.name=name;
    //对象方法
    this.Introduce=function(){
        console.log("My name is "+this.name);
    }
}
//类方法
People.Run=function(){
    console.log("I can run");
}
//原型方法
People.prototype.IntroduceChinese=function(){
    console.log("我的名字是"+this.name);
} 

//测试
var p1=new People("Windking");
p1.Introduce();
People.Run();
p1.IntroduceChinese();

二、正式开始

1、prototype是什么含义？

Javascript中的每个对象都有prototype属性。
Javascript中对象的prototype属性的解释是：返回 “对象原型” 的引用。


2、什么是函数的“对象原型”（prototype）？

Function.prototype 属性可以被使用 new 关键字创建的 Function 的实例所继承。
Function.prototype 属性不能被删除。


prototype 不应与继承混淆：

A.prototype = new B();

A 的 prototype 为 B 的一个实例，可以理解A将B中的方法和属性全部克隆了一遍。
A 能使用 B 的方法和属性，这里强调的是克隆而不是继承。

可以出现这种情况：
A 的prototype是 B 的实例，同时 B 的prototype也是 A 的实例。

例子：

function Base(){
    this.showMsg = function(){.
         console.log("Base::showMsg");
    }
}

function Extended(){}

Extended.prototype = new Base();
var instance = new Extended();
instance.showMsg(); // 显示 Base::showMsg

首先定义 Base 类。
然后定义 Extended，以 Base 的一个实例作为 Extended 的函数原型。


那么就会有一个问题，如果extendClass中本身包含有一个与baseClass的方法同名的方法会怎么样？

下面是扩展实验2：

function Base(){
    this.showMsg = function(){
        console.log("Base::showMsg");
    }
}

function Extended(){
    this.showMsg =function (){
        console.log("Extended::showMsg");
    }
}

Extended.prototype = new Base();
var instance = new Extended();
instance.showMsg();  //显示：Extended::showMsg

实验证明：函数运行时会先去本体的函数中去找，如果找到则运行。找不到则去prototype中寻找函数。


那么又会有一个新的问题：
如果我想使用 Extended 的一个实例 instance 调用 Base 的方法showMsg怎么办？

答案是可以使用 call:

Extended.prototype = new Base();
var extend = new Extended();

var base = new Base();
base.showMsg.call(extend); //显示：Base::showMsg

下面这个代码如果理解清晰，那么对“类方法、原型方法、对象方法”就已经理解了：

//
//Base
function Base(name){  
    this.name = name || "BASE";

    this.showMsg = function(){  
        console.log(this.name, "::showMsg");
    }     
    this.baseShowMsg = function(){  
        console.log(this.name, "::baseShowMsg");
    }  
}  

Base.showMsg = function(){
    console.log(this.name, "::showMsg static");
}
Base.prototype.protoShowMsg = function(){
    console.log(this.name, "::protoShowMsg");
}

//
//Extended  
function Extended(name){
    this.name = name || "Extended";
    
    this.showMsg =function (){  
        console.log(this.name, "::showMsg");
    }  
}  

Extended.showMsg = function(){
    console.log(this.name, "::showMsg static");
}  

Extended.prototype = new Base();


//Test
var base= new Base(); 
var extended = new Extended();

extended.showMsg();          //显示： Extended ::showMsg
extended.baseShowMsg();      //显示： Extended ::baseShowMsg
extended.protoShowMsg();     //显示： Extended ::protoShowMsg

Base.showMsg.call(extended); //显示： Extended ::showMsg static 
base.showMsg.call(extended); //显示： Extended ::showMsg

//

函数的 prototype 对象，是一个普通的对象。
函数的 prototype 对象，不是函数对象，不具有函数对象的 prototype 属性。


三、面向对象编程：prototype 中的 function 与 this

prototype 既然是用来共享于函数的实例之间，
那么在 prototype 的 function 类型中使用 this 是面向对象编程不可缺少的实现。
因为 this 总是指向 function 的不同实例。但是可以只写一次 this。

//

var Person = function(name) {
  this.name = name;
};

Person.prototype.getName = function() {
  // use "this" in prototype.
  return this.name;
};



//test

var john = new Person("John");
console.log(john.getName());     // John

var Tomi = new Person("Tomi");
console.log(Tomi.getName());     // Tomi

—————————————

javascript 函数基础系列文章

1、JavaScript之变量的作用域
2、javascript之变量类型与变量声明及函数变量的运行机制
3、javaScript之function定义
4、javascript之function的prototype对象
5、javascript之function的(closure)闭包特性
6、javascript之function的this   
7、javascript之function的apply(), call()



___________


javascript 面向对象编程系列文章：

    1、javaScript之面向对象编程
    2、javascript之面向对象编程之属性继承
    3、javascript之面向对象编程之原型继承 
   

-



转载请注明，
原文出处：http://lixh1986.iteye.com/blog/1896682










--
引用地址：
http://www.cnblogs.com/yjf512/archive/2011/06/03/2071914.html




-