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

  • 相关阅读:
    组件基础
    css 手稿
    HTML手稿
    Vmstat命令监控Linux资源并将数据通过图形化方式显示
    JAVA---类和对象
    JAVA---Graphics2D类
    JAVA---数组
    JAVA---图形处理
    JAVA----日历源代码
    SQL常用语句大全
  • 原文地址:https://www.cnblogs.com/wxiaoyu/p/9579481.html
Copyright © 2011-2022 走看看