走火入魔-javascript prototype 原型继承

在前几篇博客中谈到了用javascript中利用函数的函数模拟类,既然有类,那就应该存在面向对象的三大基本属性,或者说可以模拟出面向对象的三大基本属性.

今天我们要学习的就是面向对象的继承  –  javascript原型继承.

为什么叫原型继承,因为我们知道javascript本没有类,它完全是基于原型对象的一门弱类型语言.所以javascript依靠原生对象创建出来的新对象就继承了原生对象的一些属性和方法.

上面模拟了一个person类,person构造函数里初始化了姓名,然后我们创建一个学生的对象,并起名为 ‘小小’ 最后程序运行结果显示 小小.其实student 对象并没有定义姓名属性,为什么会弹出’小小’  ,因为我们用person对象来初始化,相当于 student 继承了对象person,所以同时拥有了person的属性.再看下面的例子,人应该需要吃饭,睡觉,所以我们定义一个更加全面的person类

我们重新定义了student 学生对象,这时尝试调用person 对象的一个属性及两个方法,运行结果会是什么样的呢?

因为在浏览器 Console 下输出,每行都会打印出 undefined ,大家可以忽略,仔细观察不难发现 student 对象调用的 person 对象上的属性和方法都运行成功了,可见 student 继承了 person 对象的所有属性.

回忆上上次的走火入魔关于javascript模拟类的博文中提到了构造函数的作用,这里直接复制过来再次学习理解

(1) 首先创建一个新对象,同时在内存开辟了一段存储空间,用来保存 fun 变量的引用地址.

(2)将该对象( fun )的内置原型对象 ( Function ) 设置为 fun 对象 prototype 属性引用的原型对象.

(3)将this 参数调用构造函数,完成成员设置等初始化工作,这是新建对象上的任何操作都和对象自身及其原型链上的那串对象有关,构造函数的使命已经结束,与它再没有任何关系了.

搭配原型继承你可以了解到 person 构造函数在初始化 student 对象时,将 student 的 prototype 属性的引用指向了person ,换句话说,就是对象的 prototype 属性指向的是他的父类(构造他的原生对象,当然系统内置的顶级原生对象可能不适用) 既然这样,我们在原型继承中还有一种方法就是创建对象的时候,将其prototype 属性指向一个渴望继承的原生对象上即可.还是上面的例子我们修改一下.

persong 类不变

上面运行的结果

可以看出student 完全继承了 person 对象的所有属性方法, 这里的 initstudent 对象的prototype 属性都指向了原型对象 person 

从上面的输出结果可以看出 person 继承与系统原型对象 object , initstudent 继承与 preson

javascript中的继承还有其他两种方式 apply  和 call  方式,我们下一篇博文一起探讨!