人,工人

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

前端学习(三十四)对象&模块化(笔记)的更多相关文章

  1. 前端学习(三十五)模块化es6(笔记)

    RequireJs:一.安装.下载    官网: requirejs.org    Npm:  npm i requirejs二.使用    以前的开发方式的问题:        1).js 是阻塞加 ...

  2. 前端学习(十四):CSS布局

    进击のpython ***** 前端学习--CSS布局 每个模块的相关央视就算是进本上都完成了,但是,这些模块想放在不同的位置 横着放,竖着放,斜着放... ... 想怎么放怎么放 那就用到了今天要说 ...

  3. 前端学习(三十六)promise(笔记)

    一个页面:  头部.用户信息.新闻列表 jquery ajax:  1.$.ajax({    url:'',    dataType:'json', }).then(res=>{    //r ...

  4. 前端学习(三十八)vue(笔记)

    Angular+Vue+React    Vue性能最好,Vue最轻=======================================================Angular     ...

  5. 前端学习(三十)es6的一些问题(笔记)

    赋值表达式    document.onclick = document.onmouseover = fn;    var a = b = c = d = 5;             不推荐 逗号表 ...

  6. 前端学习(三十九)移动端app(笔记)

    移动端App    开发App的三种方式    Native App         原生        底层语言        java         Android        oc      ...

  7. 前端学习(三十七)angular(笔记)

    MVC     后台    M         Module             数据层    V         View             视图层    C         Contro ...

  8. 前端学习(三)css选择器(笔记)

    字体样式:    color:red:    font-size:12px:    font-weight:bold/normal;    font-style:italic/normal;    f ...

  9. Salesforce LWC学习(三十四) 如何更改标准组件的相关属性信息

    本篇参考: https://www.cnblogs.com/zero-zyq/p/14548676.html https://www.lightningdesignsystem.com/platfor ...

随机推荐

  1. 【HDOJ6667】Roundgod and Milk Tea(模拟)

    题意:有n个班级,每个班级有a[i]个人,b[i]杯奶茶 每个人至多喝一杯奶茶,且不能喝自己班的 问能喝到奶茶的最多总人数 n<=1e6,a[i],b[i]<=1e9 思路: 做法一: # ...

  2. PHP操作Excel – PHPExcel 基本用法

    利用PHP实现对于Excel的写入和读取,主要借助于PHPExcel插件来完成. 准备工作: 1.下载PHPExcel的SDK,下载地址:https://github.com/PHPOffice/PH ...

  3. 史上最全USB HID开发资料

    史上最全USB HID开发资料 史上最全USB HID开发资料,悉心整理一个月,亲自测试. 涉及STM32 C51 8051F例子都有源码,VC上位机例子以及源码,USB协议,HID协议,USB抓包工 ...

  4. MATLAB 用 imresize() 函数缩小图象是 double 和 uint8 有差别

    今天发现一个奇怪的现象. 在用 imresize() 缩小图象时,如果图象时 double 格式的,缩小后会产生不连通的现象. 下面是原图: 对这张图象 img 做 simg = imresize(i ...

  5. docker 部署ftp

    1.搜索ftp镜像 docker search vsftpd 2.拉取ftp镜像 docker pull fauria/vsftpd 3.启动ftpdocker docker run -d -v /h ...

  6. 【ABAP系列】SAP 后台JOB如何DEBUG

    公众号:SAP Technical 本文作者:matinal 原文出处:http://www.cnblogs.com/SAPmatinal/ 原文链接:[ABAP系列]SAP 后台JOB如何DEBUG ...

  7. 剑指offer第二版面试题5:从尾到头打印链表(JAVA版)

    题目描述: 输入一个链表,从尾到头打印链表每个节点的值.返回新链表. import java.util.Stack; //定义链表结构 class ListNode { int value; List ...

  8. 2019牛客暑期多校训练营(第三场)H Magic Line

    原题链接:H  Magic Line 题意简述: 给定n个点,要求画一条直线将n个点分成均有n / 2个点的两部分,不能有点在线上: 解题思路: 首先,先将所有的点进行以x为第一关键字,y为第二关键字 ...

  9. 基于vux的Vue路由切换动画

    const history = window.sessionStorage history.clear() let historyCount = history.getItem('count') * ...

  10. Mysql 实现基于binlog的主从同步

    工作原理 1.主节点必须启用二进制日志,记录任何修改了数据库数据的事件.2.从节点开启一个线程(I/O Thread)把自己扮演成 mysql 的客户端,通过 mysql 协议,请求主节点的二进制日志 ...