最近在学习html5,玩了下canvas,发现js中很多的东西都不太记得了。翻了下笔记后发现还是去图书馆逛逛把,到借阅区找了我一直想看的《javascript design patterns》好好研读了个下午,读罢,顿时有种醍醐顿开的感觉(夸张了..),发现之前对javascript OO方面的认识真的很浅,读了前几章关于OO的介绍后感觉思路清晰很多了,对于js一些基本概念的认识也加深了很多。同时也感概到程序员的想象力之丰富,可以将js模仿如此想传统的OO语言。当然这也更适合我们这些用惯了后台服务器语言开发的人来使用js。

  废话了一段,算是这个笔记的开始把,接下来就开始了。首先还是笔记下js如何模拟继承的。

  (一)js中的继承分为2种,一种是类式继承,另一种是原型式继承。

  1.关于原型链接

  关于继承,不得不先讲下js的原型链,因为这是js实现继承的基础。

  借用下《High Performance JavaScript》的一段代码和UML图,个人觉得这个是理解原型链比较好的例子。

1   function Book(title, publisher){
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属性所指向的那个对象。这有什么用呢,我们看下这句代码:

1  Book.prototype.sayTitle = function(){
2 alert(this.title);
3 };

  但我们调用:

1  book1.sayTitle();

  的时候,由于book1里面没有sayTitle()这个方法,那么怎么办呢?这个时候原型链就有用了,他会沿着book1的原型对象去找sayTitle()这个方法,找到了就调用。

  理解了这一些,理解两种继承就很容易了。

  2.先看下类式继承的例子:

1 //类式继承
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方法把这个模拟继承的过程包装起来。

1   //extend函数,负责将superClass加到subClass的原型链上
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 }

这样就可以用

1   extend(Boy,Person);

  代替掉16到18行,这样基本就和传统的很接近了。

  还有一点要特别注意:就是prototype属性指向的是一个实例化了的对象

  3.接下来介绍原型式继承

  还是先看代码:

1   //原型式继承
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语言的人来说真是太舒服了,可以用原来的习惯来开发前台代码,好处自然是大大的。从这点来说,原型式继承就相对来说比较晦涩一点点了,后台人员还要转变思维来习惯,同时对他的读写差异性上理解也容易产生一些偏差。

  从性能来说,原型继承就会好一点,因为实例化对象的时候,在没改变值之前他们都是共享同一份拷贝的,这样可以节约内存开销。

  所以,选择哪一种还是要根据具体的项目需求来决定。

ps:第一篇笔记终于完成,写了好久,呵呵~,写的过程基本没怎么翻书,都是凭借自己的理解来写的。原来想把知道的东西表达清楚也是要花下心思的...当然难免有什么理解不当,希望各位指出~

转载于:https://www.cnblogs.com/Quains/archive/2011/04/10/2011917.html

javascript面向对象学习笔记(一)——继承相关推荐

  1. 【python面向对象学习笔记】继承

    继承 # 继承 class Animal:atype="哺乳动物"def __init__(self,name,age,sex) -> None:self.name=name ...

  2. 在JavaScript面向对象编程中使用继承(5)

    明天就要回老家去过年了,关于这个"在JavaScript面向对象编程中使用继承"的话题居然还没有说完.如果不完成,留下来一拖就拖到明年去了.所以还是抽空把它写完,今年的事情今年做, ...

  3. Javascript入门学习笔记

    JS入门学习笔记目录 1.JS简介 2.组成部分 3.特点 4.作用 5.JS三种添加方式 6.变量 7.数据类型 8.检测数据类型 9.逗号运算符 10.算术运算符 11.关系运算符 12.逻辑运算 ...

  4. JavaSE面向对象学习笔记

    面向对象的介绍 写程序的套路 面向:拿.找 对象"能干活的东西 面向对象编程:拿东西过来做对应的事情 当我们想要在代码当中完成一件事情的时候,我们是拿对应的东西来做这件事情 面向对象编程的例 ...

  5. JavaScript闭包学习笔记

    闭包(closure)是JavaScript语言的一个难点,也是它的特色,很多高级应用都要依靠闭包实现. 下面就是我的学习笔记,对于JavaScript初学者应该是很有用的. 一.变量的作用域 要理解 ...

  6. Java Web--HTML、CSS、JavaScript详细学习笔记(内含丰富示例代码)

    ** Java Web–HTML.CSS.JavaScript学习笔记 ** HTML(Hyper Text Markup Language超文本标记语言):控制的是页面的内容,是由标签组成的语言,能 ...

  7. javascript 面向对象编程(封装、继承)

    在面向对象编程中,类(class)是对象(object)的模板,定义了同一组对象(又称"实例")共有的属性和方法. Javascript语言不支持"类",但是可 ...

  8. 黑马程序员学习笔记 关于继承

    ------- <a href="http://www.itheima.com" target="blank">android培训</a> ...

  9. 面向对象学习笔记——封装、继承、多态

    文章目录 一.面向对象的编程 1.三大特征 2.五大原则(了解即可) 二.封装 三.继承 四.多态 1.先描述一下转型 2.接下来是抽象类 (abstract) 3.接口(interface) 一.面 ...

最新文章

  1. 牛客网 2018年全国多校算法寒假训练营练习比赛(第三场)D.小牛vs小客-博弈
  2. 电脑温度测试软件_网购电脑够便宜?坑连着坑真的不好躲
  3. Zuul:Pre和Post过滤器(上)
  4. SpringBoot 过滤器、拦截器、监听器对比及使用场景!
  5. Python中字符串的连接
  6. 模拟java_【最强Java面试题系列】消息队列面试场景 “模拟”
  7. GDAL创建图像提示Driver xxx does not support XXX creation option的原因
  8. 语言 泰克示波器程序_泰克Tektronix 任意波函数发生器AFG2000系列AFG2021
  9. 计算机网络蠕虫病毒及防范,蠕虫病毒检测与防范本科毕业论文.doc
  10. php怎么接入微支付宝支付,php 微信公众号接入支付宝支付
  11. python爬取网盘分享链接_Python实战三 | 蓝奏网盘抓取网盘链接信息
  12. Java面向对象知识点总结
  13. 透气清爽的高回弹跑鞋,跑步轻松畅快,咕咚逐日21K体验
  14. Win10系统不兼容驱动怎么办?
  15. 更好的 java 重试框架 sisyphus 背后的故事
  16. 存储过程实现报表数据源的利弊分析
  17. 惠普HP Deskjet Ink Advantage 3540 打印机驱动
  18. 卡通的平板卧推男孩动画特效
  19. beyond Compare 4免费破解方法
  20. 不用 Spring Security 可否?试试这个小而美的安全框架

热门文章

  1. 注重网站用户体验优化就要避开前方弯道
  2. 网络优化常见专业术语详解
  3. 以下linux进程内存空间中按低地址,Linux 内核开发 - 进程空间
  4. js 判断多个关键词_2020关键词优化,做好这三点效果立现!
  5. ie6多文件上传_一个好的“文件上传”功能必须要注意的这些点你都知道吗?
  6. No field mFactorySet in class问题解决(上)
  7. vim 双剑合璧,天下无敌(笔记)
  8. 开发日记-20190705 关键词 读书笔记 《Perl语言入门》Day 2
  9. HTTP metadata数据
  10. Oracle varchar2或char类型的byte和char的区别