(17.06.01)(49)ES6前面向对象周边的知识、原型链、单体模式/工厂模式、命名空间、类、模块化

回顾:

面向对象:
    对象:
    面向对象:
对象的组成:
    属性:有归属的变量
    方法(事件):有归属的函数
类和实例:
    类:模板,不是一个具体的东西,没有具体的功能
    实例:根据模板造出来的一个具体的东西
    *实例化
面向对象的特性:
    1、封装:把东西包装起来,用户只管使用,不关心内部实现
    2、继承:子类可以使用父类的东西
        1)父类有的东西,子类自然拥有
        2)子类修改,不影响父类
        3)父类修改,子类自动修改
    3、多态(JS中没有)
    
写:
    人,工人

    //类的定义
    function Person(name,age){ //构造函数
        //工厂模式
        //1.原料
        //var obj = new Object();
        //2.加工
        this.name = name;
        this.age = age;
        //3.出厂
        //return obj;
    }
    //方法
    Person.prototype.showName = function(){
        return this.name;
    };

    //实例化
    var p1 = new Person('zhangsan',28);
        new:
            1. 创建一个新的空白对象
            2. 把这个对象赋值给 this
            3. 自动返回this
    //继承   工人 -> 人
    1)继承属性
        function Worker(name,age,job){
            //继承父类属性
            Person.apply(this,arguments);
            //增加自己的属性
            this.job = job;
        }
    2)继承方法
        Worker.prototype = new Person();
        Worker.prototype.constructor = Worker;

* 万物皆对象
* 能new的东西都是函数
* 构造函数约定首字母大写
* 实例化一个类的时候(new Person()),构造函数自动执行
* 类的原型 prototype 可以用来扩展系统方法
* 解决this:
    1) 在this正确的地方,存一下
    2) fn.call(this的指向,参数1...);
    3) fn.apply(this的指向,[参数1....]);
    4) bind
        var a = fn.bind(this的指向,参数1);
        a(参数2);

        //this 正确
        oBtn.onclick = function(){
            //this 指向按钮,希望指向外面
        }.bind(this);
* 类型检测
    1) typeof : 基本类型
        数字,字符串,布尔,undefined
    2)instanceof : 用于检测 当前对象是不是某个类的实例, 包含父级以及一直向上
        alert(p1 instanceof Person);   √

        alert(p1 instanceof  Object);  √
        
    3)constructor:用户判断当前对象的是不是由某个类构造出来的
        p1.constructor == Person
        

一、ES6前面向对象周边的知识

1、给一个类的原型上加方法时,要一个一个加,不能用一个JSON整体覆盖,否则,会把原来已经有的东西覆盖掉(prototype.constructor 被覆盖)

2、原型链
使用某个方法或属性时,先看自己有没有,如果自己有就用自己的,否则找父级...一直找到为止 —— Object

  • 如果一个对象属于子类,那么这个对象必然属于这个子类的父类。

  • 作用链:

    var c = 100;
    function aaa(){
        var c = 5;
        function bbb(){
            //var c = 12;
            alert(c);
        }
        bbb();
    }
    aaa();

show(1)(2)(3); —— 6     //返回函数 
aa(1).bb(2).cc(3); —— 6 //返回JSON

3、所有东西都是对象?
    基本类型不是对象。
    除了基本类型外,其它的东西都是对象。

包装类型:

    数字          Number
    字符串     String
    布尔          Boolean
    undefined       Undefined ×
  • 包装类型,在JS中,没用。

4、单体模式/单例模式 设计模式
    以前: 工厂模式
    * 只有一个实例,不能扩展 —— 利用 JSON

    let Person = {
        name:'张三',
        age:18,
        showName(){
            return this.name + '^_^';
        }
    };

5、命名空间
    利用JSON,把一些独立的模块、频道、子系统 ,中使用的变量的包起来。
    达到: 避免变量名冲突

    例:

        let top = {
            a:12
        }
        let body = {
            a:5
        }
        let footer = {
            a:20
        }

        top.a
        body.a
        footer.a

变量冲突的解决:
    1、封闭空间
    2、面向对象 : 把相同的变量放到不同的对象里
    3、命名空间(名称空间)
    4、模块化

6、this 的问题
    this: 发生事件的对象(元素),当前方法属于谁,this就是谁

    对this优先级进行排序:只供参考
        1) new > 定时器
        2) 定时器 > 事件
        3) 事件 > 方法
        4) 其它 (window)

    优先级: new > 定时器 > 事件 > 方法

7、js 中的 BUG (自相矛盾的地方)
    1、Object 和 Function 互为爹,自称爹
        * 一切都是对象
        * 能new 都是函数
    2、只认爹,不认爷
    3、花祖宗的钱,不认祖宗


二、 ES6面向对象
类、构造函数 —— 面向对象(java)

类:
定义——

    //类
    class Person{
        //构造函数
        constructor(name,age){
            this.name = name;
            this.age = age;
        }
        //方法
        showName(){
            return this.name;
        }
        showAge(){
            return this.age;
        }
    }
使用——
    let p1=new Person('zhang3',28);

继承:

    class Worker extends Person{
        constructor(name,age,job){
            super(name,age);  //相当于调用 父级 的构造函数
            this.job = job;
        }
        showJob(){
            return this.job;
        }
    }

*super —— 超类


用面向对象的方式写程序 , 没有统一的写法。

例1:点div变红

例2:选项卡


模块化:

一、什么,为什么
    模块化:把一个大的系统,一个较复杂的功能,切分为若干个小部分。
    有利于 系统的扩展、人员之间分工合作、可以提高效率...
二、JS中模块化:
    09年,美国,一哥们,写了一个程序 —— NodeJS
        标志着JS中模块化开发的开始。
三、JS中模块化遵循的标准:

    CommonJs: NodeJS —— 同步
        const express = require('express');
        let server = express();
    AMD: —— 异步
        Asynchronous  Module Definition  异步模块定义
        库:requirejs
    CMD:
        库:seajs
        官网: seajs.org

四、requirejs

    安装:
        1) 官网下载
            http://requirejs.org/
        2) npm i requirejs
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 215,012评论 6 497
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 91,628评论 3 389
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 160,653评论 0 350
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 57,485评论 1 288
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 66,574评论 6 386
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 50,590评论 1 293
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,596评论 3 414
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 38,340评论 0 270
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,794评论 1 307
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,102评论 2 330
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,276评论 1 344
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,940评论 5 339
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,583评论 3 322
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,201评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,441评论 1 268
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 47,173评论 2 366
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,136评论 2 352

推荐阅读更多精彩内容

  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 134,647评论 18 139
  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 172,009评论 25 707
  • 哈哈哈,继崂山可乐之后,又一发现
    蓬蓬蓬的毛毛熊阅读 186评论 1 0
  • 看了海边的曼彻斯特,好片子,有人说它是美国版的活着。 平凡的小人物在命运的泥淖中挣扎着前行。 中国有两句老话“时来...
    高小叨阅读 103评论 0 0
  • 郎骑竹马来,绕床弄青梅。 同居长干里,两小无猜嫌。 天竺此分别,天河涌波澜。 逝者如斯夫,愚妇怎可见。 惜我将近酒...
    婷婷李阅读 236评论 0 0