zoukankan      html  css  js  c++  java
  • 前端学习(三十三)面向对象(笔记)

    面向对象:
        思想。
        什么是对象:男朋友,女朋友,狗,猫,电视,冰箱 ......
            什么都是对象 —— 万物皆对象 (everything is object)。
        什么是面向对象: 看着你的对象。和对象打交道。
            —— 使用对象,创建对象

    使用 —— 方便,好用 —— 以前
    写对象 —— $$$ ——现在

    ==========================
    对象组成:
        属性:某个物体(对象)具有的特性(人的身高,体重...)。
            变量——有归属的变量。
        方法:某个对象会做什么事情(人会吃饭、睡觉...)。
            函数 —— 有归属的函数。
        事件:触发这个对象的一些行为,这个对象给出的反应。
            在JS的面向对象里,方法和事件不做严格区分(统一叫方法)

    类和实例:
        类:        模板。 没有什么具体的功能。
            Date —— 类(本身也有一些功能)
            var oDate = new Date(); // Date -> 类
        实例:根据模板造出来的具体的东西。
            var oDate = new Date(); // oDate -> 实例
            
    面向对象的特征:
        封装:把细节包起来,用户只管使用,不用关心是怎么实现的。
        继承:子类可以直接使用父类的功能(东西)
        多态:在JS中没有。
    ==========================
    一、写一个对象
        组成:属性、方法
        
        一)属性
            弄一个对象,通过函数:
                function Person(){
                    1、弄一个空对象
                        let obj = new Object();
                    2、把属性放到对象身上
                        obj.name = name;
                        obj.age = age;
                    3、返回对象
                        return obj;
                }
            使用:
                //根据Person类实例化一个对象
                var p1 = Person('zhangsan',20);
                //访问属性
                p1.name
                pa.age

    * 工厂模式:
        现实:
            原料准备    ———>    加工    ———>    出厂
        JS:
            obj        ———>    obj.xxx = x ——> return obj;

    系统中的类、对象: new
        var oDate = new Date();
        var reg = new RegExp();
        
    咱们现在:函数调用
        var p1 = Person();

    想通过 new 来得到一个对象:
        目标:   var p1 = new Person();

    *    如果使用new,得到对象,new 做了一些事情,对Person的影响:
            1. 自动创建一个新的空白对象
            2. 把这个对象赋值给  this
            3. 自动返回 this

    * Person 实质上就是一个函数 —— 构造函数 (约定:首字母大写)
    * 能 new 出来的东西,都是函数 (Date, RegExp...  Array,new Map()...)
    * new 一个类的实例时,构造函数自动执行。
    ==========================
    函数:
        new Function()

        以前:
            function show(){}
        本质:
            var show = new Function('');

    Array:
        1、 var arr = [1,2,3];
        2、 var arr = new Array(1,2,3);

        如果只有一个参数(值):   
            arr=[3];  //  表示 一个元素,值是3
            arr=new Array(3); //表示 三个元素,值是空 —— 长度



    二)方法:
        每个一函数身上(每个类身上),有一个东西叫 原型, prototype, 类的方法就是放在原型身上。

        function Person(name,age){
            this.name = name;
            this.age = age;
        }
        //给Person类加一个显示自己名字的方法
        Person.prototype.showName = function(){
            alert(this.name);
        };

    * 原型上的方法,属于类,而不属于实例。

    * 原型prototype 可以用于扩展系统方法
        数组:
            arr.indexOf(); //用法、作用  和 str.indexOf 一样
                —— 只支持高级浏览器(ie7,8.. 不支持)
            
    * 扩展系统方法时,原则:  能用系统的尽量用系统的


    * 关于浏览器判断 —— 尽量少用  navigator.userAgent    
                        (msie  firefox  chrome...)
                —— 建议使用支持的特性进行判断


    一、概念
        对象: 任何东西都是对象
        面向对象: 和对象打交道
    1、对象的组成:
        属性:有归属的变量
        方法:有归属的函数
        事件:在JS的面向对象里,视同为方法
    2、类、实例
        类:    模板,没有实际的功能
        实例:根据模板(类)造出来的一个具体的东西

        function Person(){} —— Person 类
        let p1 = new Person(); —— p1 实例

        类 —— 实例化 ——实例
    3、面向对象的三个特性:
        封装:包起来。用户只管用,不关心内部的具体实现。
        继承:子类可以使用父类的东西
        多态:JS中没有

    * 能new出来的,肯定是函数
    * 任何东西都是对象
    * new 一个类的实例时,这个类的构造函数自动执行
    * 函数的本质:  new Function();
    * Array
        arr = [3]; //3 表示的 数组中有一个3
        arr = new Array(3);  //3 表示的是数组的长度

    二、写一个对象

        1、写法
        //Person —— 构造函数(约定:首字母大写)
        //属性 : 放到构造函数里
        function Person(name,age){
            //给属性赋值
            this.name = name;
            this.age = age;
        }
        //方法:放到原型身上
        Person.prototype.showName=function(){
            //return this.name;
            return '张先生';
        };
        Person.prototype.showAge = function(){};

        2、实例化
        
        let p1 = new Person('zhangsan',20);
            //p1.name = 'zhangsan'
            p1.showName() ——> 'zhangsan'
        let p2 = new Person('lisi',18);
            
    * prototype: 原型
        可以扩展系统方法:
            1、arr.indexOf
            //arr.indexOf =
            Array.prototype.indexOf=
            2、str.trim —— 去除首尾空格
                String.prototype.trim = String.prototype.trim || function(){}

    三、继承
        子类可以使用父类的东西,父类有什么子类就有什么。

    现在有一个类:  Person —— 人
    想有一个新类:  Worker —— 工人
        1、直接写        ×
            function Worker(name,age,job){}...    
        2、把Person改成 Worker , 不行, 原来对  Person 的调用都会报错  ×
        3、把Person复制一份,改个名  ×
        4、继承    √

    父类到底有什么,或说 ,子类需要继承什么:
        1. 属性
        2. 方法

    一) 属性的继承
        在子类的构造函数里,调用了父级的构造函数:
            function Worker(name,age,job){
                Person(name,age);
                this.job = job;
            }
        以上写法,Person中this 出问题了 ——>  指向了  Window


    this的问题:
        有问题的地方:
            1. 定时器
            2. 箭头函数里this 指向 父级作用域。
        解决:
            1. 在this正确的地方,存一下,   var _this = this;
            2. call
                函数名.call(this的指向,参数1,参数2...);
            3. apply
                函数名.apply(this的指向,[参数1,参数2...]);
            4. bind:本身并不执行函数,只是完成this的绑定
                1)  let a = fn.bind(this的指向,参数1,参数2);
                    a();
                2)  let a = fn.bind(this的指向,参数1);
                    a(参数2);
                

    属性继承:
        子类的构造函数里,调用父类的构造函数, 注意this, call/apply
        
        function Person(){}
        function Worder(){
            Person.call(this,name.....);
            Person.apply(this,arguments);
        }

    继承:
        1、父类所具有的东西,子类天然具有
        2、子类修改了,不能影响父类
        3、父类修改了,子类自动修改

    二) 方法的继承

        1、子类的原型 = 父类的原型    ×
            Worker.prototype = Person.prototype
        2、子类的原型  =  new Person();      //父类的实例 √


    类型的检测:

    * JS ,是一种弱类型的语言。

        1、typeof
            基本类型    √
            对象类型 ——  object
        2、instanceof
            检测 某个对象是不是某个类的实例,一直向上检查
            oDate instanceof Date   //true
        3、constructor
            obj.constructor == Date
            某个对象的亲爹是谁,到底是由谁构造出来的。
        

    总结: 写一个类,带继承
        1、写父类
            属性:构造函数里
            方法:原型上
        2、继承
            属性:
                在子类的构造函数里,调用父类的构造函数(注意this)
                    function Worker(){
                        Person.apply(this,arguments);
                    }
            方法:
                1.子类的原型 = 父级的一个实例
                    Worker.prototype = new Person();
                2.纠正构造函数
                    Worker.prototype.constructor = Worker;


        
    ES6:面象对向

  • 相关阅读:
    c学习第3天
    [BZOJ2124] 等差子序列
    CF710F String Set Queries
    Cow Hopscotch (dp+树状数组优化)
    CF528D Fuzzy Search (bitset)
    Gym 101667L Vacation Plans (dp)
    Codeforces 432D Prefixes and Suffixes (kmp+dp)
    [题解]BZOJ2115 XOR
    洛谷 P2921 [USACO08DEC]在农场万圣节Trick or Treat on the Farm
    从中国矢量图筛选出江苏省行政区划图
  • 原文地址:https://www.cnblogs.com/wxiaoyu/p/9579473.html
Copyright © 2011-2022 走看看