javascript继承—继承的实现原理(1)
打算针对js的继承写一系列文章,详细的分析js里继承原理,实现方式,各种继承方式的优缺点,以及最优继承方案,还有多继承的问题等….
面向对象的编程的核心是封装、继承和多态,js可以看作是一种面向对象的语言,而面向对象的扩展性最核心的部分是多态,多态的必要条件有三个,首先就是继承,其次父类的引用指向子类,最后是方法重写。对于js来说,由于其创建对象的方式多种多样,因此,需要对父类的多种属性和方法实现很好的继承,就必须找到一个比较完善的方法。本篇文章首选介绍三种最基本的继承方式,并分析这几种继承方式的缺陷。
介绍js继承前,大家先需要js里类的各种属性以及js创建对象的几种模式有所了解。
js类的属性可以参考: javascript中类的属性研究 这篇文章。
js创建对象的方式可以参考:javascript创建对象的三种模式 这篇文章。
第一种方式:对象冒充
对象冒充,是指将父类的属性和方法一起传给子类作为特权属性和特权方法。
function Person(name,age){
this.name = name;
this.age = age;
this.sayHi = function(){
alert('hi');
}
} Person.prototype.walk = function(){
alert('walk.......');
} function Student(name,age,grade){
this.newMethod = Person;
this.newMethod(name,age);
delete this.newMethod;
this.grade = grade;
} var s1 = new Student('xiaoming',10,3);
console.log(s1.name,s1.age,s1.grade);//xiaoming 10 3
//s1.walk();//s1.walk is not a function
可见Student类只继承了Person类的特权属性和方法,并没有继承Person类的共有属性和方法。
第二种方式:call或apply
使用call或apply改变对象的作用域来实现继承,让父类的this等于新创建的子类的对象(因为call和apply继承实现机制是一样的,就是传参方式不同,call传多个参数用逗号隔开,apply用数组),本文主要介绍call来实现继承。
function Person(name,age){
this.name = name;
this.age = age;
this.sayHi = function(){
alert('hi');
}
} Person.prototype.walk = function(){
alert('walk.......');
} function Student(name,age,grade){
Person.call(this,name,age);
this.grade = grade;
} var s1 = new Student('xiaoming',10,3);
console.log(s1.name,s1.age,s1.grade);//xiaoming 10 3
//s1.walk();//s1.walk is not a function
同第一种问题一样,没有继承共有属性和方法。call改变了Person中this的作用域,使其指向了Student。对于call方法举例如下:
function Person(){
this.name ='xiaoming';
} Person.call(this);
alert(window.name);
此例将Person中this的作用域扩大到window上,使得Person中的name属性变为一个全局变量。
第三种方式:prototype
使用prototype属性实现继承,让父类的prototype赋给子类的prototype,也可以将父类的实例赋给子类的prototype,这里先介绍将父类的原型赋给子类的原型这种方式,并探讨这种方式的缺陷。在以后会着重介绍prototyp这种继承方式。
function Person(name,age){
this.name = name;
this.age = age;
this.sayHi = function(){
alert('hi');
}
} Person.prototype.walk = function(){
alert('walk.......');
} function Student(name,age,grade){
this.grade = grade;
} Student.prototype = Person.prototype; var s1 = new Student('xiaoming',6,3);
s1.walk();//walk.......
console.log(s1.name,s1.age,s1.grade);//xiaoming 6 3
console.log(s1.constructor); // Person(name,age)
Student.prototype.study = function(){
alert('I am study');
}
var p1 = new Person();
p1.study();//I am study
主要缺陷:不能继承父类的特权属性和特权方法,子类的构造函数变成了Person(name,age),直接导致修改子类的原型方法时,父类也跟着修改了,耦合度太高了。
如果将父类的实例指向子类的原型会出现什么情况呢?
function Person(name,age){
this.name = name;
this.age = age;
this.sayHi = function(){
alert('hi');
}
} Person.prototype.walk = function(){
alert('walk.......');
} function Student(name,age,grade){
this.grade = grade;
} Student.prototype = new Person(); var s1 = new Student('xiaoming',6,3);
s1.walk();//walk.......
console.log(s1.name,s1.age,s1.grade);//undefined undefined 3
console.log(s1.constructor); // Person(name,age)
Student.prototype.study = function(){
alert('I am study');
}
var p1 = new Person();
//p1.study();// p1.study is not a function
虽然s1仍然指向父类的构造函数,但修改子类的共有方法并不会对父类有所影响,但是存在一个更为严重的问题是,子类没法继承父类的特权属性和特权方法。
总结:几种继承方式各有各的缺陷,那么如何实现完美的继承呢。也许将其中的某两种继承方式结合起来才行。在以后会接着介绍call和prototype结合实现js的继承功能。
javascript继承—继承的实现原理(1)的更多相关文章
- JavaScript原型继承工作原理
原型继承的定义 当你阅读关于JS原型继承的解释时,你时常会看到以下这段文字: 当查找一个对象的属性时,JavaScript 会向上遍历原型链,直到找到给定名称的属性为止.——出自JavaScript秘 ...
- 前端知识体系:JavaScript基础-原型和原型链-理解 es6 中class构造以及继承的底层实现原理
理解 es6 中class构造以及继承的底层实现原理 原文链接:https://blog.csdn.net/qq_34149805/article/details/86105123 1.ES6 cla ...
- 再谈javascript原型继承
Javascript原型继承是一个被说烂掉了的话题,但是自己对于这个问题一直没有彻底理解,今天花了点时间又看了一遍<Javascript模式>中关于原型实现继承的几种方法,下面来一一说明下 ...
- TDD测试驱动的javascript开发(3) ------ javascript的继承
说起面向对象,人们就会想到继承,常见的继承分为2种:接口继承和实现继承.接口继承只继承方法签名,实现继承则继承实际的方法. 由于函数没有签名,在ECMAScript中无法实现接口继承,只支持实现继承. ...
- 彻底理解Javascript原型继承
彻底理解Javascript原型继承 之前写过一篇Javascript继承主题的文章,这篇文章作为一篇读书笔记,分析的不够深入. 本文试图进一步思考,争取彻底理解Javascript继承原理 实例成员 ...
- [转]Javascript原型继承
真正意义上来说Javascript并不是一门面向对象的语言,没有提供传统的继承方式,但是它提供了一种原型继承的方式,利用自身提供的原型属性来实现继承.Javascript原型继承是一个被说烂掉了的话题 ...
- [ JavaScript ] JavaScript 实现继承.
对于javascript中的继承,因为js中没有后端语言中的类式继承.所以js中的继承,一般都是原型继承(prototype). function P (name){ this.name = name ...
- 【编程题与分析题】Javascript 之继承的多种实现方式和优缺点总结
[!NOTE] 能熟练掌握每种继承方式的手写实现,并知道该继承实现方式的优缺点. 原型链继承 function Parent() { this.name = 'zhangsan'; this.chil ...
- JavaScript 的继承与多态
本文先对es6发布之前javascript各种继承实现方式进行深入的分析比较,然后再介绍es6中对类继承的支持以及优缺点讨论.最后介绍了javascript面向对象编程中很少被涉及的“多态”,并提供了 ...
随机推荐
- 了解ASP.NET5 Web应用程序结构
本文参考ASP.NET5 官方文档 Understanding ASP.NET 5 Web Apps,加入了一些个人理解,理解不对的地方希望大家能指出,互相学习. ASP.NET 5 针对WEB编程引 ...
- 探索Windows Azure 监控和自动伸缩系列1 - 连接中国区Azure
最近准备基于Microsoft Azure Management Libraries 实现虚拟机的监控.主要的需求就是获取虚拟机内置的性能计数器数据,基于性能计数器实现后续的监控和自动伸缩. 作为这一 ...
- pyspark简要原则
概要 这是一个看前一段时间spark的python支持的时,有点简单的后pyspark内python代码,我们把一个一般流程.虽然几乎没有python,但基本上能看懂pyspark它是如何使不同的虚拟 ...
- Hibernate一个简短的引论
我们从几个方面进行阐述Hibernate When? What ? How? When? Hibernate由来是因为当时EJBBean1.1在处理entittBean架构时,花费的时间要比业务逻辑很 ...
- UBuntu经常使用的操作(网络资源)
http://docs.google.com/Doc? id=dqsbw4c_46d89djccr 版权声明:本文博主原创文章.博客,未经同意不得转载.
- MVC 使用IBatis.net
IBatis.net在asp.net MVC下的使用 IBatis.net 是2001年发起的开源项目,它是一个轻量级的ORM框架,现在IBatisNET已经是属于Apache下的一个子项目了,最新版 ...
- C#中的动态特性
众所周知,C#和Java一样,都是一门静态语言.在C# 4.0之前,想要和动态语言(诸如Python.Javascript等)进行方便地互操作是一件不太容易的事情.而C# 4.0为我们带来的dynam ...
- P/Invoke与逆向P/Invoke
1.在在 C# 中通过 P/Invoke 调用Win32 DLL这篇文中,详细介绍了P/Invoke的基本知识以及使用. 2.InAttribute和OutAttribute特性与C#中ref和out ...
- Spring aop 小例子demo
由于最近的服务项目提供接口有一个需求,所有操作都必须检查操作的服务可用,所以感觉Aop特别适合实施.完成学习的小例子. 关于spring-Aop原理:http://m.oschina.net/blog ...
- 我的第一次windows规划
#include <windows.h> LRESULT CALLBACK WndProc (HWND, UINT, WPARAM, LPARAM) ; //WinMain功能被分配一 ...