转载请注明出处:水车

如果有误,还望指出,谢谢

-----------------正文分割线----------------------

类:类太抽象,要想弄明白就该用现实的东西来类比
在我看来类就是造一个有许多(当然一个也可以)功能的东西的机器(这里这个东西可以称之为对象),比如一台收音机
要想有一台收音机,我们得先有一台造收音机的机器,这个机器就是我们所说的类

// 这就是这台造收音机的机器;他可以显示时间,有形状等等(即属性)
function radio (){
this.time = '12:00';
this.form = '长方形';
}
//再给他加一个收听长波信号的功能;(即方法)
radio.prototype.fm = function(){};
//再给他加一个收听短波信号的功能;(即方法)
radio.prototype.am = function(){};
//加一个其他什么功能;(即方法)
radio.prototype.another = function(){};

这里你想让造出来的收音机有哪些功能,都是可以随时添加更改的 (用prototype方法添加方法)
这台机器已经放到厂房里了,而它什么时候开始运作呢?它随时准备着;
当我想要一台收音机的时候(类的实例化,也叫对象)

var me-radio = new radio();

  

这时我就有了一台收音机了。我想使用这个收音机,听听短波频道,我就用

me-radio.am()

  

想听长波我就用

me-radio.fm()

  

我想用其他的什么功能用

me-radio.another();

  

过了一天,我姐也想要一台一样的收音机,那好办啊,我厂子里有一台专门造收音机的机器了,我怕啥,给她一台。

var sister-radio = new radio();

好了,我姐也有一台收音机了,而且和我的收音机的功能是一模一样的。它也可以听长波,听短波。
那我妹妹妹也想要一台,给她也new一台(new radio()),我七大舅八大姨的都要,好,都给。

  

  这时我爸来了,说也给我一台收音机吧,可是你现在这个收音机的功能不能满足我,我要的这个收音机必须可以打电话,你给我造一个吧,怎么办呢?
父命难违啊,硬着头皮上吧

先分析1:再造一台造收音机的机器吧(再创建一个radio2的类)把该有的功能(属性和方法)都加上也行,可是之前的机器造的收音机,普通的功能都有了,再造就感觉重复了,而且厂房里放那么多造收音机的机器会不会有点挤啊(耗内存),所以这个方法不是最好的

后分析2:我就把原来这台机器给改了,让这台机器以后造出来的收音机都可以打电话;也行,可是这里有一个问题,就是以前的收音机每天都得拿回来维护,你这一修改,姐们,舅们,七大姑八大姨的收音机再维护的时候都有了打电话的功能,哈哈,吓人不? 所以这个也不行;

再分析3:在radio机器造出来(new)的收音机上直接改装增加一个打电话的功能不就好了,好,说干就干,我爸还等着收音机打电话呢;
(类的继承)
/** javascript的继承有六七种方法了,我就不细说了。这里用一个比较新的方法:Object.create(); 语法:Object.create(prototype, descriptors),第一个参数是要继承的原形,第二个是可选参数,包含一个或多个属性描述符的 JavaScript 对象**/

Object.create()他可以给一个空盒装上你想让他装的东西,它便宜,还小,能直接揣兜里,扩展性还非常好。他的功能就是可以花很小的代价就复制一个造收音机的机器。

首先,我们先创建一个这样的空盒子(函数对象),当然,你也可以给这个空盒子里装你想装的东西;

 var photoRadio = function (){
  //可以装东西,也可以不装;
  this.name = '可以打电话的收音机';
}

既然是在原来一模一样的收音机上改造,那就的把原来那些方法和属性都拿过来;
  先拿属性:

 var photoRadio = function (){
this.name = '可以打电话的收音机';
radio.call(this); //先拿属性:
}

  再拿方法:

photoRadio.prototype = Object.create(radio.prototype);

到这里,我们就复制了一个可以造和原来收音机一模一样的机器了;这个机器叫 photoRadio;
现在我们就给添加打电话的功能吧。
到这里会有不懂的同学要问了,这么麻烦,还不如我直接再写一个类呢,是的,现在看来再写一个类是快,可是,如果radio有成千上万个方法,而不是三个,那你还会重新写一个吗?
好了,解决了那个同学的疑问,我们继续给新机器添加功能吧

photoRadio.prototype.photo= function(){}

这里我们就有了一个可以造打电话的收音机了的机器了;
赶快给我爸造收音机吧:

var father-radio = new photoRadio();
//记得造出来的收音机是要打开用的。就是在打电话是这样
father-radio.photo();

好了,我们家里人都有收音机了,你会造了吗?
完整代码:

 function radio(){ //创建第一个对象radio
this.time = '12:00'; //对象的属性
this.form = '长方形';//对象的属性
}
radio.prototype.fm = function(){ //给对象添加fm方法
console.log('这是fm功能');
console.log(this.time);
};
radio.prototype.am = function(){//给对象添加am方法
console.log('这是am功能');
};
var me_radio = new radio(); //实例化radio对象 var photoRadio = function () {创建第二个对象photoRadio
this.name = 'aaa' // photoRadio对象的属性
radio.call(this); // 把radio对象的属性继承过来
}; photoRadio.prototype = Object.create(radio.prototype); // 把radio对象的方法继承过来 var father_radio = new photoRadio(); // 实例化photoRadio father_radio.fm(); //使用实例化后的对象;

javascript类的类比详解-大白话版的更多相关文章

  1. Javascript中prototype属性详解 (存)

    Javascript中prototype属性详解   在典型的面向对象的语言中,如java,都存在类(class)的概念,类就是对象的模板,对象就是类的实例.但是在Javascript语言体系中,是不 ...

  2. Javascript常用的设计模式详解

    Javascript常用的设计模式详解 阅读目录 一:理解工厂模式 二:理解单体模式 三:理解模块模式 四:理解代理模式 五:理解职责链模式 六:命令模式的理解: 七:模板方法模式 八:理解javas ...

  3. JavaScript进阶内容——DOM详解

    JavaScript进阶内容--DOM详解 当我们已经熟练掌握JavaScript的语法之后,我们就该进入更深层次的学习了 首先我们思考一下:JavaScript是用来做什么的? JavaScript ...

  4. JavaScript正则表达式详解(二)JavaScript中正则表达式函数详解

    二.JavaScript中正则表达式函数详解(exec, test, match, replace, search, split) 1.使用正则表达式的方法去匹配查找字符串 1.1. exec方法详解 ...

  5. 【转】UML类图与类的关系详解

    UML类图与类的关系详解   2011-04-21 来源:网络   在画类图的时候,理清类和类之间的关系是重点.类的关系有泛化(Generalization).实现(Realization).依赖(D ...

  6. String类的构造方法详解

    package StringDemo; //String类的构造方法详解 //方法一:String(); //方法二:String(byte[] bytes) //方法三:String (byte[] ...

  7. [转]c++类的构造函数详解

    c++构造函数的知识在各种c++教材上已有介绍,不过初学者往往不太注意观察和总结其中各种构造函数的特点和用法,故在此我根据自己的c++编程经验总结了一下c++中各种构造函数的特点,并附上例子,希望对初 ...

  8. Scala 深入浅出实战经典 第63讲:Scala中隐式类代码实战详解

    王家林亲授<DT大数据梦工厂>大数据实战视频 Scala 深入浅出实战经典(1-87讲)完整视频.PPT.代码下载:百度云盘:http://pan.baidu.com/s/1c0noOt6 ...

  9. (转)javascript中event对象详解

    原文:http://jiajiale.iteye.com/blog/195906 javascript中event对象详解          博客分类: javaScript JavaScriptCS ...

随机推荐

  1. php环境搭建工具包推荐

    如题,无论是生产还是测试环境,推荐一下这个: http://www.phpstudy.net/ 同时,也是一个php学习的网站,和w3cschool差不错,但是这里只有php.

  2. EPROCESS 进程/线程优先级 句柄表 GDT LDT 页表 《寒江独钓》内核学习笔记(2)

    在学习笔记(1)中,我们学习了IRP的数据结构的相关知识,接下来我们继续来学习内核中很重要的另一批数据结构: EPROCESS/KPROCESS/PEB.把它们放到一起是因为这三个数据结构及其外延和w ...

  3. HBase概念学习(十)HBase与MongDB等NoSQL数据库对照

    转载请注明出处: jiq•钦's technical Blog - 季义钦 一.开篇 淘宝之前使用的存储层架构一直是MySQL数据库,配合以MongDB,Tair等存储. MySQL因为开源,而且生态 ...

  4. 深入理解 Javascript 面向对象编程

    一:理解构造函数原型(prototype)机制 prototype是javascript实现与管理继承的一种机制,也是面向对象的设计思想.构造函数的原型存储着引用对象的一个指针,该指针指向与一个原型对 ...

  5. mysql大表如何优化

    作者:哈哈链接:http://www.zhihu.com/question/19719997/answer/81930332来源:知乎著作权归作者所有.商业转载请联系作者获得授权,非商业转载请注明出处 ...

  6. 让VisualVM+BTrace进入unsafe mode

    让VisualVM+BTrace进入unsafe mode http://kenai.com/projects/btrace/pages/UserGuide BTrace很强大,但有很多安全限制,比如 ...

  7. Linux的一些基础

    想要知道你的 Linux 支持的文件系统有哪些,可以察看底下这个目录: [root@www ~]# ls -l /lib/modules/$(uname -r)/kernel/fs 系统目前已加载到内 ...

  8. jsp 变量和方法的声明 Java程序片 HTML注释 JSP注释

    <%!...%> 声明变量和方法 <%!...%>之中的变量为JSP页面的成员变量,当多个线程访问本页面时,多个线程共享此变量. <%@ page contentType ...

  9. 转:github使用教程(重装系统后遇到问题该文章帮我解决了)

    github简单使用教程 时间:2012 年 5 月 29 日 6 条评论 分类:学习笔记 , 网络 , 软件 目录 1.注册账户以及创建仓库 2.安装客户端msysgit 3.配置Git 4.提交. ...

  10. DICOM:DICOM标准学习路线图(初稿)

    题记: DICOM医学图像处理专栏撰写已有两个年头,积累了近百篇文章.起初只是用于记录自己科研.工作中遇到的疑难问题,专注于图像处理(主要是医学图像,这也正是专栏名称最初的由来):后来逐渐延伸到了DI ...