zoukankan      html  css  js  c++  java
  • javascript类的类比详解-大白话版

    转载请注明出处:水车

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

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

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

    // 这就是这台造收音机的机器;他可以显示时间,有形状等等(即属性)
    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()他可以给一个空盒装上你想让他装的东西,它便宜,还小,能直接揣兜里,扩展性还非常好。他的功能就是可以花很小的代价就复制一个造收音机的机器。

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

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


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

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


      再拿方法:

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



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

    photoRadio.prototype.photo= function(){}


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

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


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

     1 function radio(){ //创建第一个对象radio
     2 this.time = '12:00'; //对象的属性
     3 this.form = '长方形';//对象的属性
     4 }
     5 radio.prototype.fm = function(){ //给对象添加fm方法
     6 console.log('这是fm功能');
     7 console.log(this.time);
     8 };
     9 radio.prototype.am = function(){//给对象添加am方法
    10 console.log('这是am功能');
    11 };
    12 var me_radio = new radio(); //实例化radio对象
    13 
    14 var photoRadio = function () {创建第二个对象photoRadio
    15 this.name = 'aaa' // photoRadio对象的属性
    16 radio.call(this); // 把radio对象的属性继承过来
    17 };
    18 
    19 photoRadio.prototype = Object.create(radio.prototype); // 把radio对象的方法继承过来
    20 
    21 var father_radio = new photoRadio(); // 实例化photoRadio
    22 
    23 father_radio.fm(); //使用实例化后的对象;
  • 相关阅读:
    nodejs学习(一) ---- nodejs + express应用生成器 快速创建应用
    canvas学习--准备
    react初探索--react + react-router + ant-design 后台管理系统配置
    css3新特性学习系列 -- border
    微信小程序 video组件 不随页面滚动
    将日志搬家到自己的站点 http://nowhereman.cn/
    【转】- 使用T4模板批量生成代码
    [WinForm]- 设置DataGridView单元格内根据不同值显示图片
    [转]- Winform 用子窗体刷新父窗体,子窗体改变父窗体控件的值
    [MVC]
  • 原文地址:https://www.cnblogs.com/shuiche/p/5222874.html
Copyright © 2011-2022 走看看