一直以来,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指导同一个实例。
__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");
这里就可以实现面向对象的模式。