zoukankan      html  css  js  c++  java
  • 前端学习(三十四)对象&模块化(笔记)

    人,工人

        //类的定义
        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

  • 相关阅读:
    flume sink两种类型 file_rool 自定义sing com.mycomm.MySink even if there is only one event, the event has to be sent in an array
    为什么引入进程20年后,又引入线程?
    As of Flume 1.4.0, Avro is the default RPC protocol.
    Google Protocol Buffer 的使用和原理
    Log4j 2
    统一日志 统一订单
    网站行为跟踪 Website Activity Tracking Log Aggregation 日志聚合 In comparison to log-centric systems like Scribe or Flume
    Percolator
    友盟吴磊:移动大数据平台的架构、实践与数据增值
    Twitter的RPC框架Finagle简介
  • 原文地址:https://www.cnblogs.com/wxiaoyu/p/9579481.html
Copyright © 2011-2022 走看看