深入javascript-实现“继承”
2015-09-29 17:02
435 查看
我在前面介绍了,javascript的继承机制,还有如何“封装”数据和方法,今天再来说一说,如何来实现对象之间的“继承”。
先创建一个“动物”对象的构造函数。
function Animal(){
this.species = "动物";
}
再来创建一个“猫”对象的构造函数。
看我是如何是实现对象之间的继承,让Cat继承Animal的。
1.通过函数绑定
这种方法是比较简单的方法,使用call或apply方法,将父对象的构造函数绑定在子对象上,即在子对象构造函数中加一行:
2.利用 prototype 模式
这种方法是比较常见的方法,主要利用了对象的prototype属性。
如果“Cat”的prototype对象,指向一个|Animal的实例,那么所有“猫”的实例,就能继承Animal了。
ps:
第一行代码:我们将Cat的prototype对象指向了一个Animal的实例。它相当于完全删除了prototype对象原先的值,然后赋了新值。
第二行代码:因为每个对象的prototype对象都有一个constructor属性,指向自己的构造函数,执行完第一行代码后,该属性指向的是Animal。执行该代码后,可使得该属性重新指向Cat的构造函数,保证Cat构造函数的完整性。
接下来的代码就很容易理解了,就不再做详细解释了。
3.直接继承prototype
这种方式是第二种方式的改进。针对这样的情景
然后,将Cat的prototype对象,指向Animal的prototype对象,这样就完美的继承了。
Ps
该方法的优缺点也是比较明显的:
优点:
这样做的优点是效率比较高(不用执行和建立Animal的实例了),比较省内存
缺点:
缺点是Cat.prototype和Animal.prototype现在指向了同一个对象,那么任何对Cat.prototype的修改,都会反映到Animal.prototype。
上面第二行代码,虽然保证了Cat的prototype的constructor指向了Cat,但是此时Animal的prototype的constructor也指向了Animal。破坏了Animal的对象的完整性。
总结:通过这三种方式,完全可以满足我们“继承”的需要了,这里主要依靠于prototype的功劳,要想熟悉这几种方式,还是要下功夫了解一下prototype对象了。
先创建一个“动物”对象的构造函数。
function Animal(){
this.species = "动物";
}
再来创建一个“猫”对象的构造函数。
function Cat(name,color){ this.name = name; this.color = color; }
看我是如何是实现对象之间的继承,让Cat继承Animal的。
1.通过函数绑定
这种方法是比较简单的方法,使用call或apply方法,将父对象的构造函数绑定在子对象上,即在子对象构造函数中加一行:
functionCat(name,color){ Animal.apply(this,arguments); this.name= name; this.color= color; } varcat1 = new Cat("大毛","黄色"); alert(cat1.species);// 动物
2.利用 prototype 模式
这种方法是比较常见的方法,主要利用了对象的prototype属性。
如果“Cat”的prototype对象,指向一个|Animal的实例,那么所有“猫”的实例,就能继承Animal了。
Cat.prototype= new Animal(); Cat.prototype.constructor= Cat; varcat1 = new Cat("大毛","黄色"); alert(cat1.species);// 动物
ps:
第一行代码:我们将Cat的prototype对象指向了一个Animal的实例。它相当于完全删除了prototype对象原先的值,然后赋了新值。
第二行代码:因为每个对象的prototype对象都有一个constructor属性,指向自己的构造函数,执行完第一行代码后,该属性指向的是Animal。执行该代码后,可使得该属性重新指向Cat的构造函数,保证Cat构造函数的完整性。
接下来的代码就很容易理解了,就不再做详细解释了。
3.直接继承prototype
这种方式是第二种方式的改进。针对这样的情景
functionAnimal(){ } Animal.prototype.species= "动物";
然后,将Cat的prototype对象,指向Animal的prototype对象,这样就完美的继承了。
Cat.prototype= Animal.prototype; Cat.prototype.constructor= Cat; varcat1 = new Cat("大毛","黄色"); alert(cat1.species);// 动物
Ps
该方法的优缺点也是比较明显的:
优点:
这样做的优点是效率比较高(不用执行和建立Animal的实例了),比较省内存
缺点:
缺点是Cat.prototype和Animal.prototype现在指向了同一个对象,那么任何对Cat.prototype的修改,都会反映到Animal.prototype。
上面第二行代码,虽然保证了Cat的prototype的constructor指向了Cat,但是此时Animal的prototype的constructor也指向了Animal。破坏了Animal的对象的完整性。
总结:通过这三种方式,完全可以满足我们“继承”的需要了,这里主要依靠于prototype的功劳,要想熟悉这几种方式,还是要下功夫了解一下prototype对象了。
相关文章推荐
- JQuery1——基础($对象,选择器,对象转换)
- Android学习笔记(二九):嵌入浏览器
- Android java 与 javascript互访(相互调用)的方法例子
- JavaScript演示排序算法
- javascript实现10进制转为N进制数
- 2019年开发人员应该学习的8个JavaScript框架
- HTML中的script标签研究
- 对一个分号引发的错误研究
- 异步流程控制:7 行代码学会 co 模块
- ES6 走马观花(ECMAScript2015 新特性)
- JavaScript拆分字符串时产生空字符的原因
- Canvas 在高清屏下绘制图片变模糊的解决方法
- IE8开发人员工具教程(二)
- 在flex中执行一个javascript方法的简单方式
- Flex结合JavaScript读取本地路径的方法
- PostgreSQL教程(三):表的继承和分区表详解
- PowerShell中执行Javascript的方法示例
- javascript asp教程第六课-- response方法
- javascript asp教程More About Recordsets