========================================================================

在学习JS的面向对象过程中,一直对constructor与prototype感到很迷惑,看了一些博客与书籍,觉得自己弄明白了,现在记录如下:

我们都知道,在JS中有一个function的东西。一般人们叫它函数。比如下面的代码

function Person(name)
{
alert(name);
}
Person('js');//js

上面的代码中,Person的表现的确跟一般的函数没有什么区别,接着看下面的代码

function Person(name)
{
this.name=name;
this.showMe=function()
{
alert(this.name);
}
};
var one=new Person('JavaScript');
one.showMe();//JavaScript

很多人见到了久违的new操作符,于是就叫Person为“类”,可是又没有关键字class的出现,觉得叫“类”有点勉强。于是退而求其次叫Person为类的构造函数。这些概念好像都没有错,之所以出现这样的情况,可能是因为大家都学习了传统的面向对象语言(c++,c#,java等),还有一种思维定势吧。为了让javascript也面向对象,要在javascript中找到与传统面向对象语言的影子。可是按照javascript的说法,function定义的这个Person就是一个Object(对象),而且还是一个很特殊的对象,这个使用function定义的对象与使用new操作符生成的对象之间有一个重要的区别。这个区别就是function定义的对象有一个prototype属性,使用new生成的对象就没有这个prototype属性

prototype属性又指向了一个prototype对象,注意prototype属性prototype对象是两个不同的东西,要注意区别。在prototype对象中又有一个constructor属性,这个constructor属性同样指向一个constructor对象,而这个constructor对象恰恰就是这个function函数本身。

有点头晕,看下图吧:

不相信可以看下面的代码:

function Person(name)
{
this.name=name;
this.showMe=function()
{
alert(this.name);
}
}; var one=new Person('js'); alert(one.prototype)//undefined
alert(typeof Person.prototype);//object
alert(Person.prototype.constructor);//function Person(name) {...};

上面的代码证明了one这个对象没有prototype属性。

我们接着看代码:

function Person(name)
{
this.name=name;
this.showMe=function()
{
alert(this.name);
}
}; Person.prototype.from=function()
{
alert('I come from prototype.');
} var one=new Person('js'); one.showMe();//js,这个结果没有什么好奇怪的
one.from();//I come from prototype.,这个结果有一点奇怪吧

要解释这个结果就要仔细研究一下new这个操作符了.var one=new Person('js');这个语句执行的过程可以分成下面的语句:

var one={};
Person.call(one,'js');

按照《悟透javascript》书中说的,new形式创建对象的过程实际上可以分为三步:

第一步是建立一个新对象(叫A吧);

第二步将该对象(A)内置的原型对象设置为构造函数(就是Person)prototype 属性引用的那个原型对象;

第三步就是将该对象(A)作为this 参数调用构造函数(就是Person),完成成员设置等初始化工作。

其中第二步中出现了一个新名词就是内置的原型对象,注意这个新名词跟prototype对象不是一回事,为了区别我叫它inobj,inobj就指向了函数Person的prototype对象。在person的prototype对象中出现的任何属性或者函数都可以在one对象中直接使用,这个就是javascript中的原型继承了

又头晕了,上图吧!

这样one对象通过内置的原型对象inobj就可以直接访问Person的prototype对象中的任何属性与方法了。这也就解释了上面的代码中为什么one可以访问form函数了。因为prototype对象中有一个constructor属性,那么one也可以直接访问constructor属性。

function Person(name)
{
this.name=name;
this.showMe=function()
{
alert(this.name);
}
}; Person.prototype.from=function()
{
alert('I come from prototype.');
} var one=new Person('js'); one.showMe();//js,这个结果没有什么好奇怪的
one.from();//I come from prototype.,这个结果有一点奇怪吧
alert(one.constructor);//function Person(name) {...}
alert(Person.prototype.constructor);//function Person(name) {...}

接着看继承是如何实现的。

function Person(name)
{
this.name=name;
this.showMe=function()
{
alert(this.name);
}
}; Person.prototype.from=function()
{
alert('I come from prototype.');
} function SubPerson()
{
}
SubPerson.prototype=new Person(); var subOne=new SubPerson();
subOne.from();//I come from prototype.
alert(subOne.constructor);//function Person(name) {...};
alert(SubPerson.prototype.constructor);//function Person(name) {...};

继承的实现很简单,只需要把子类的prototype设置为父类的一个(实例化)对象即可。注意这里说的可是对象哦!那么通过prototype属性实现继承的原理是什么呢?还是先看图形说明,然后编写代码进行验证。

注意:红色的方框就是把子类与父类链接起来的地方。这个就应该是传说中的prototype链了吧。下面有代码进行验证。

function Person(name)
{
this.name=name;
this.showMe=function()
{
alert(this.name);
}
}; Person.prototype.from=function()
{
alert('I come from prototype.');
}
var father=new Person('js');//为了下面演示使用showMe方法,采用了js参数,实际多采用无参数
alert(father.constructor);//查看构造函数,结果是:function Person(name) {...};
function SubPer()
{
}
SubPer.prototype=father;//注意这里
SubPer.prototype.constructor=SubPer; var son=new SubPer();
son.showMe();//js
son.from();//I come from prototype.
alert(father.constructor);//function SubPer(){...}
alert(son.constructor);//function SubPer(){...}
alert(SubPer.prototype.constructor);//function SubPer(){...}

根据上图的prototype链,还有代码的结果,我想应该明白为什么使用prototype能够实现

JS中的继承了吧。

关于JS中的constructor与prototype的更多相关文章

  1. 分析js中的constructor 和prototype

    在javascript的使用过程中,constructor 和prototype这两个概念是相当重要的,深入的理解这两个概念对理解js的一些核心概念非常的重要. 我们在定义函数的时候,函数定义的时候函 ...

  2. 深入分析js中的constructor 和prototype

    在javascript的使用过程中,constructor 和prototype这两个概念是相当重要的,深入的理解这两个概念对理解js的一些核心概念非常的重要. 我们在定义函数的时候,函数定义的时候函 ...

  3. 【JavaScript】关于JS中的constructor与prototype

    最初对js中 object.constructor 的认识: 在学习JS的面向对象过程中,一直对constructor与prototype感到很迷惑,看了一些博客与书籍,觉得自己弄明白了,现在记录如下 ...

  4. 【推荐】关于JS中的constructor与prototype【转】

    最初对js中 object.constructor 的认识: 在学习JS的面向对象过程中,一直对constructor与prototype感到很迷惑,看了一些博客与书籍,觉得自己弄明白了,现在记录如下 ...

  5. JS中的constructor与prototype

    http://www.cnblogs.com/qiantuwuliang/archive/2011/01/08/1930548.html 在学习JS的面向对象过程中,一直对constructor与pr ...

  6. JS中的constructor 和 prototype

    object.constructor :对象的constructor 属性引用了该对象的构造函数. //例如,用Array()构造函数创建了一个数组,那么a.constructor 引用的就是Arra ...

  7. js中的constructor 和prototype

    参考 http://www.cnblogs.com/yupeng/archive/2012/04/06/2435386.html function a(c){ this.b = c; this.d = ...

  8. js中关于constructor与prototype的理解

    1.①__proto__和constructor属性是对象所独有的:② prototype属性是函数所独有的,因为函数也是一种对象,所以函数也拥有__proto__和constructor属性. 2. ...

  9. 关于JS中的constructor与prototype{转}

    http://www.cnblogs.com/qiantuwuliang/archive/2011/01/08/1930548.html http://www.cnblogs.com/yupeng/a ...

随机推荐

  1. SQL Server 基础:Cast和Convert的区别

    CAST 和 CONVERT 都可以将某种数据类型的表达式显式转换为另一种数据类型. 语法: CAST ( expression AS data_type ) CONVERT (data_type[( ...

  2. 史上最简单的个人移动APP开发入门--jQuery Mobile版跨平台APP开发

    书是人类进步的阶梯. ——高尔基 习大大要求新新人类要有中国梦,鼓励大学生们一毕业就创业.那最好的创业途径是什么呢?就是APP.<构建跨平台APP-jQuery Mobile移动应用实战> ...

  3. Activity(一)

    一个应用程序中至少包含一个Activity,Activity启动流程:当启动一个应用程序时,android操作系统会访问该应用程序的AndroidManifest.xml文件(该文件中说明了应用程序使 ...

  4. JSAPI_Ticket签名

    1.微信 JS 接口签名校验工具 2.具体开发 2.1 获取access_token,然后jsapi_ticket /** * 获取access_token,然后jsapi_ticket */ pri ...

  5. arcgis中求多点到一条曲线的最短欧几里得距离

    1.使用的工具:Arctoolbox----Analysis Tools----Proximity----Near工具. 2.注意:在求距离之前一定要先设置好坐标系统.

  6. greenDao生成的实体类无法存放JsonArray的解决方法

    今天在解析Json数据的时候,发现我们用greenDao生成的实体类只能是基本数据类型,而我请求回来的json数据里面还包含了jsonArray. 下面是json的数据格式 "content ...

  7. Android 解决图片大量下载:软引用必须懂4点

    1.对象的强.软.弱和虚引用为了能更加灵活控制对象的生命周期,需要知道对象引用的4中级别,由高到低依次为 :强引用.软引用.弱引用和虚引用 备注: 这四种的区别: ⑴强引用(StrongReferen ...

  8. 自学asp.net mvc(三)

    1.将前台框架的登录页面代码,复制到Login.cshtml. 2.将文本框替换. 3.缓存机制. 4.类图

  9. Linux android开发环境问题:Unexcepted exception:cannot run program "android-sdk-linux/platfor-tools/adb" :err=2,No such file or directory.

    出现这个问题的原因: 我的linux是64位 ,而adb目前只有32位的,所以要安装运行32的环境. 不同的linux系统需要安装的不同: 我的Centos  解决方案如下 其他linux操作系统(参 ...

  10. PB建数据窗口的时候会报内存错误

     同事碰到了这个问题,百度了一下,按照下边的方法解决了 ------解决方案--------------------我遇到过,是powerbuilder的注册表出问题了,找到注册表中HKEY_USER ...