New和Prototype的相关理解

一直以来,javascript中面向对象的模式学了又忘,忘了又去学,没有什么进步,可能是在对js面向对象模式相关知识的缺乏。近来打算向前端方面发力,把学习的总结一下!

首先从函数说起:

1.函数定义

function test(){this.a="111"}

函数创建之后,会默认维护一个prototype属性,也就是我们平常说的原型对象。

这里面原型对象维护了两个属性,constructor,和__proto__.

constructor这个是函数的构造函数,也就是函数的原始代码.

__proto__这个属性很特别,保存创建源函数的prototype的实例,这个不太好理解,看一下下面函数创建,可能会理解的更好一些。

test.prototype.sysHello=function(){alert(this.a)}

给函数原型扩展一个sysHello函数,看一下这个函数的原型,他的下面多了一个sysHello函数。

2.通过new创建对象

var b=new test();

可以看到函数test的实例b,有一个a属性,但还存在一个__proto__属性,其中和test.prototype属性的值看起来是一样,可以验证一下。

b.__proto__===test.prototype
true
在开发人员工具里面,录入上段代码时,可以看到他返回的是true,说明b.__proto__和test.prototype指导同一个实例。
这里引用了http://rockyuse.iteye.com/blog/1426522博客上说明解释了一下,看到这里应该知道他大概干了什么事了。
__proto__就是指向test.prototype,可以再添加一个函数验证一下
这里可以看到test.prototype属性添加showA后,可以看到b.__proto__也有了这个属性,
那么当我们使用new创建一个新对象的时候,根据__proto__的特性,showA这个方法也可以做新对象的方法被访问到。于是我们看到了:
构造子中,我们来设置‘类’的成员变量(例如:例子中的id),构造子对象prototype中我们来设置‘类’的公共方法。于是通过函数对象和Javascript特有的__proto__与prototype成员及new操作符,模拟出类和类实例化的效果。
3.通过prototype模拟继承
function testExtend(){this.c="ccc"}
testExtend.prototype=new test();
新建一个testExtend函数,给testExtend.prototype属性赋值new test()的实例
在这里我们可以调用
d.showA();//alert("111");
这里就可以实现面向对象的模式。
 
 
 
posted @ 2015-12-21 23:06  话里  阅读(703)  评论(0编辑  收藏  举报