js中的prototype

      第一次看过这个知识点,一个个实例走过去,觉得理解的挺透彻的,可是回头一看,这东西到底是什么啊?感觉真的还挺绕的。现在如果要讲给别人听,理解肯定要更深,那么就谈谈我的理解,不到位的地方欢迎批评指正。

首先当然得看定义不是:

【Javascript中对象的prototype属性的解释是:返回对象类型原型的引用。】

        看懂没?反正我是一眼望去没多大懂。

那么就撇开这个定义,谈谈原型的思想:

【原型法的主要思想是,现在有1个类A,我想要创建一个类B,这个类是以A为原型的,并且能进行扩展。我们称B的原型为A。】

这个看过去该睡醒了吧,其实也就这层意思的样子。

好了,在彻底搞明白这个prototype之前,我们先补充下弹药

1、javascript的方法可以分为三类:

a 类方法;b 对象方法;c 原型方法

网上搜了个实例:

function People(name) {
  this.name=name;
  //对象方法
  this.Introduce=function(){
  alert("My name is "+this.name);
 }
}
//类方法
People.Run=function(){
  alert("I can run");
}
//原型方法
People.prototype.IntroduceChinese=function(){
  alert("我的名字是"+this.name);
} 
//测试
var p1=new People("Windking");
p1.Introduce();
People.Run();
p1.IntroduceChinese();

2、obj1.func.call(obj)中的call

call的诠释:意思是将obj看成obj1,调用func方法

那么现在就开始谈prototype的含义了吧

首先映入我眼帘的是这么句话:

JavaScript 不包含传统的类继承模型,而是使用 prototype 原型模型。虽然被当做JavaScript 的缺点所提及,其实基于原型的继承模型比传统的类继承还要强大。那么当然实现 JavaScript 中的原型继承要比类继承模型要困难的多。

不管怎样,可以理解两点:不是传统的类继承,是原型模。那么原型模型又长什么样子呢?

这时自然又搜咯,又来了这么段话:

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

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

第一句话我是看懂了,克隆不是,说白了就是复制嘛,第二句前半句我明白,后半句(同时B的prototype也是A的实例)就只能呵呵了,只好再花时间请教去了(后半句当然现在也不影响我们之后的理解)

这回直接给个完整的实例,各种理解我就直接写在注释中,请详看注释哈

//声明一个baseClass对象
function baseClass() {
//对象方法
    this.showMsg = function()     {        alert("baseClass::showMsg");        }
    this.baseShowMsg = function() {        alert("baseClass::baseShowMsg");    } 
    } 
 //类方法   
baseClass.showMsg = function() {    alert("baseClass::showMsg static"); }
//声明一个extendClass对象
function extendClass() { 
this.showMsg =function ()     {        alert("extendClass::showMsg");    } 
} 
extendClass.showMsg = function() {    alert("extendClass::showMsg static");}
//原型方法
//可以理解为extendClass是以baseClass的一个实例为原型克隆创建的
extendClass.prototype = new baseClass();

var instance = new extendClass();
instance.showMsg(); //显示extendClass::showMsg 【函数运行时会先去本体的函数中去找,如果找到则运行,找不到则去prototype中寻找函数。或者可以理解为prototype不会克隆同名函数】
instance.baseShowMsg(); //显示baseClass::baseShowMsg 【这个就执行克隆的对象方法,无异议】
instance.showMsg(); //显示extendClass::showMsg  【不解释】
baseClass.showMsg.call(instance);//显示baseClass::showMsg static 【将instance(extendClass)看成baseClass,调用baseClass的类方法showMsg,好像也可以叫做静态方法】
var baseinstance = new baseClass();
baseinstance.showMsg.call(instance);//显示baseClass::showMsg  【将instance当做baseinstance来调用,调用baseinstance的对象方法showMsg】

以上就是我现在的理解了,这时候应该大体明白些许了吧!


郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。