javascript面向对象学习笔记(一)——继承
最近在学习html5,玩了下canvas,发现js中很多的东西都不太记得了。翻了下笔记后发现还是去图书馆逛逛把,到借阅区找了我一直想看的《javascript design patterns》好好研读了个下午,读罢,顿时有种醍醐顿开的感觉(夸张了..),发现之前对javascript OO方面的认识真的很浅,读了前几章关于OO的介绍后感觉思路清晰很多了,对于js一些基本概念的认识也加深了很多。同时也感概到程序员的想象力之丰富,可以将js模仿如此想传统的OO语言。当然这也更适合我们这些用惯了后台服务器语言开发的人来使用js。
废话了一段,算是这个笔记的开始把,接下来就开始了。首先还是笔记下js如何模拟继承的。
(一)js中的继承分为2种,一种是类式继承,另一种是原型式继承。
1.关于原型链接
关于继承,不得不先讲下js的原型链,因为这是js实现继承的基础。
借用下《High Performance JavaScript》的一段代码和UML图,个人觉得这个是理解原型链比较好的例子。
2 this.title = title;
3 this.publisher = publisher;
4 }
5 Book.prototype.sayTitle = function(){
6 alert(this.title);
7 };
8 var book1 = new Book("High Performance JavaScript", "Yahoo! Press");
9 var book2 = new Book("JavaScript: The Good Parts", "Yahoo! Press");
10 book1.sayTitle();
11 book2.sayTitle();
UML图如下:
代码很简单,从UML图我们可以看到,这正是理解原型链的关键,这里有2个名词要着重提到,一个是原型对象, 一个是prototype对象。在js中每个对象都有原型对象的,原型对象是其构造函数的prototype属性所指向的那个对象,这里又有个名词要注意,由于js中处处是对象(当然除了3种原始类型,不过在需要的情况下,他们也可以被包装成对象的),为了区别,我们把构造函数称为函数对象。并且只有函数对象才拥有prototype属性,这一点我们可以从UML图中看出。
从例子可以看到,每个实例化对象都有个_proto_这个内部属性,这个属性是指向其构造函数的prototype属性所指向的那个对象。这有什么用呢,我们看下这句代码:
2 alert(this.title);
3 };
但我们调用:
的时候,由于book1里面没有sayTitle()这个方法,那么怎么办呢?这个时候原型链就有用了,他会沿着book1的原型对象去找sayTitle()这个方法,找到了就调用。
理解了这一些,理解两种继承就很容易了。
2.先看下类式继承的例子:
2 //Person类
3 function Person(name){
4 this.name = name;
5
6 }
7 Person.prototype.getName = function(){
8 alert(this.name);
9 }
10
11 //BOY类,继承Person类
12 function Boy(name,age){
13 Person.call(this,name);
14 this.age = age;
15 }
16 //将Person加到Boy的原型链中
17 Boy.prototype = new Person();
18 Boy.prototype.constructor = Boy;
19
20 Boy.prototype.getAge = function(){
21 alert(this.age);
22 }
23
24 var boy = new Boy("james","23");
25 boy.getName();
26 boy.getAge();
用惯了java或C#等传统面向对象语言的人来看这些应该会有种亲切感把~,这种继承很符合我们关于传统继承的思想,先写个父类,再让子类来继承,可能16到18行的会有点不和谐对于不熟悉js的人来说,那么我们可以用一个extend方法把这个模拟继承的过程包装起来。
2 function extend(subClass,superClass){
3 function f(){};
4 f.prototype = superClass.prototype;
5 subClass.prototype = new f();
6 subClass.prototype.constrcuctor = subClass;
7
8 }
这样就可以用
代替掉16到18行,这样基本就和传统的很接近了。
还有一点要特别注意:就是prototype属性指向的是一个实例化了的对象
3.接下来介绍原型式继承
还是先看代码:
2 //clone方法,主要是将object对象加到f的原型链上
3 function clone(object){
4 function f(){};
5 f.prototype = object;
6 return new f();
7
8 }
9
10 //直接定义一个js对象
11 var Person ={
12 name : "james",
13 getName : function(){
14 alert(this.name);
15 }
16
17 }
18
19
20 var boy = clone(Person);
21 //还没改变前读取的是原来Person的默认值;
22 boy.getName(); //输出James,即原来默认那个值
23 boy.age = "23";
24 boy.getAge = function(){
25 alert(this.age);
26 }
27
28 boy.name = "kobe"; //改变了name的值
29 boy.getName(); //输出kobe,说明把原来的值覆盖了
30 boy.getAge();
31
32
33 var girl = clone(Person);
34 girl.getName(); //输出james,即默认值
35 girl.name = "tracy"; //改变了name
36 girl.getName(); //输出tracy,说明把原来值覆盖了
37
从第10行看起,首先我们定义了一个json对象Person,注意我们没用function,就是说这是一个对象了而不是函数对象,然后我们用一个clone方法将其赋给了boy变量,由开头可以知道clone方法其实就是把Person对象加到空对象f的原型链上,然后返回f给boy,原型链已经创建成功即继承已完成。
但是,这种原型式继承有个比较特别的地方:读写的差异性。即刚开始的时候所有实例化对象都是指向同一份拷贝的,直到他们改变原来的值,这个从21到36行的实验我们可以看出他的差别。很直观,就不多说了。
4.下面讨论下两种继承的优劣处:
各有各的优缺点,这里我主要从习惯和性能两点来讨论。
从习惯来说,类式继承对于用惯了C#等OO语言的人来说真是太舒服了,可以用原来的习惯来开发前台代码,好处自然是大大的。从这点来说,原型式继承就相对来说比较晦涩一点点了,后台人员还要转变思维来习惯,同时对他的读写差异性上理解也容易产生一些偏差。
从性能来说,原型继承就会好一点,因为实例化对象的时候,在没改变值之前他们都是共享同一份拷贝的,这样可以节约内存开销。
所以,选择哪一种还是要根据具体的项目需求来决定。
转载于:https://www.cnblogs.com/Quains/archive/2011/04/10/2011917.html
javascript面向对象学习笔记(一)——继承相关推荐
- 【python面向对象学习笔记】继承
继承 # 继承 class Animal:atype="哺乳动物"def __init__(self,name,age,sex) -> None:self.name=name ...
- 在JavaScript面向对象编程中使用继承(5)
明天就要回老家去过年了,关于这个"在JavaScript面向对象编程中使用继承"的话题居然还没有说完.如果不完成,留下来一拖就拖到明年去了.所以还是抽空把它写完,今年的事情今年做, ...
- Javascript入门学习笔记
JS入门学习笔记目录 1.JS简介 2.组成部分 3.特点 4.作用 5.JS三种添加方式 6.变量 7.数据类型 8.检测数据类型 9.逗号运算符 10.算术运算符 11.关系运算符 12.逻辑运算 ...
- JavaSE面向对象学习笔记
面向对象的介绍 写程序的套路 面向:拿.找 对象"能干活的东西 面向对象编程:拿东西过来做对应的事情 当我们想要在代码当中完成一件事情的时候,我们是拿对应的东西来做这件事情 面向对象编程的例 ...
- JavaScript闭包学习笔记
闭包(closure)是JavaScript语言的一个难点,也是它的特色,很多高级应用都要依靠闭包实现. 下面就是我的学习笔记,对于JavaScript初学者应该是很有用的. 一.变量的作用域 要理解 ...
- Java Web--HTML、CSS、JavaScript详细学习笔记(内含丰富示例代码)
** Java Web–HTML.CSS.JavaScript学习笔记 ** HTML(Hyper Text Markup Language超文本标记语言):控制的是页面的内容,是由标签组成的语言,能 ...
- javascript 面向对象编程(封装、继承)
在面向对象编程中,类(class)是对象(object)的模板,定义了同一组对象(又称"实例")共有的属性和方法. Javascript语言不支持"类",但是可 ...
- 黑马程序员学习笔记 关于继承
------- <a href="http://www.itheima.com" target="blank">android培训</a> ...
- 面向对象学习笔记——封装、继承、多态
文章目录 一.面向对象的编程 1.三大特征 2.五大原则(了解即可) 二.封装 三.继承 四.多态 1.先描述一下转型 2.接下来是抽象类 (abstract) 3.接口(interface) 一.面 ...
最新文章
- 牛客网 2018年全国多校算法寒假训练营练习比赛(第三场)D.小牛vs小客-博弈
- 电脑温度测试软件_网购电脑够便宜?坑连着坑真的不好躲
- Zuul:Pre和Post过滤器(上)
- SpringBoot 过滤器、拦截器、监听器对比及使用场景!
- Python中字符串的连接
- 模拟java_【最强Java面试题系列】消息队列面试场景 “模拟”
- GDAL创建图像提示Driver xxx does not support XXX creation option的原因
- 语言 泰克示波器程序_泰克Tektronix 任意波函数发生器AFG2000系列AFG2021
- 计算机网络蠕虫病毒及防范,蠕虫病毒检测与防范本科毕业论文.doc
- php怎么接入微支付宝支付,php 微信公众号接入支付宝支付
- python爬取网盘分享链接_Python实战三 | 蓝奏网盘抓取网盘链接信息
- Java面向对象知识点总结
- 透气清爽的高回弹跑鞋,跑步轻松畅快,咕咚逐日21K体验
- Win10系统不兼容驱动怎么办?
- 更好的 java 重试框架 sisyphus 背后的故事
- 存储过程实现报表数据源的利弊分析
- 惠普HP Deskjet Ink Advantage 3540 打印机驱动
- 卡通的平板卧推男孩动画特效
- beyond Compare 4免费破解方法
- 不用 Spring Security 可否?试试这个小而美的安全框架
热门文章
- 注重网站用户体验优化就要避开前方弯道
- 网络优化常见专业术语详解
- 以下linux进程内存空间中按低地址,Linux 内核开发 - 进程空间
- js 判断多个关键词_2020关键词优化,做好这三点效果立现!
- ie6多文件上传_一个好的“文件上传”功能必须要注意的这些点你都知道吗?
- No field mFactorySet in class问题解决(上)
- vim 双剑合璧,天下无敌(笔记)
- 开发日记-20190705 关键词 读书笔记 《Perl语言入门》Day 2
- HTTP metadata数据
- Oracle varchar2或char类型的byte和char的区别