js中的class

 面向对象 与 面向过程

        面向对象 => 将大象放进冰箱

        1.打开冰箱

        2.把大象放入冰箱

        3.关上冰箱

        按照分析好的步骤一步步执行，解决问题

        面向对象 => 将大象放进冰箱

            面向对象将事物分成一个一个的对象，然后分工合作

        1. 大象对象

            设置一个将大象放入冰箱的功能（我的理解是封装一个函数）

        2.冰箱对象

            设置打开冰箱功能

            设置关闭冰箱功能

       

        面向对象是以对象功能来划分；不是按步骤来划分（字面意思，结合例子）

        面对对象程序开发思想；每一个对象都有自己的明确的功能；

        编码灵活，代码可复用，容易维护，继承性，适合大型项目（这里是和我们的框架打包好，封装好的组件的原理）

        把数据以及对数据的操作放在一起(有点像vue里的一些同步组件)；作为一个相互依赖的整体---对象；

        对象同类对象抽离进行复用；形成类

   <script>
        //工厂模式
        // let obj ={
        //         name:"夏栀",
        //         food:"奶茶",
        //         add(value){
        //             this.age=10
        //             console.log(this.name+value+this.food);
        //         }
        // }
        // obj.add("站着")
        // obj.add("坐着")

        //说实话人家自己造的，一开始都不值得去理解，不好理解
        function add(val){
            let aa =100;
            console.log("打开冰箱");
            add1(val,aa)
        }
        
        add("大象")
        function add1(val,aa){
            let s=10;
            console.log("把"+val+"放入冰箱");
            add2(s,aa)
        }
        function add2(s){
            console.log(s);
            console.log("关上冰箱");
        }
        add("大象")
    </script>

2,.ES6 面向对象class

  面向对象由

            属性和方法组成

                属性

                    描述信息,

                方法

                    行为,操作

             

        把数据及对数据的操作放在一起;作为一个相互依赖的整体 ---- 对象;  

            对象同类对象抽离进行复用;形成类

       

        es6 class 类面向对象写法;

        1.  class 声明类{ }, 没有声明提升

        2.  使用class 必须通过new 构造

        3.  返回一个类实例对象

        4.  class命名与 变量起名规范一致

        5.  class命名首字母大写

        6.  constructor类的默认方法,类默认会调用constructor函数; 在这里写对应的属性

        7.  通过this设置的属性,在对应的this类里面任何位置都可以访问到

        8.  class类里面基本上然后函数里面的this代表自身class类

        9.  constructor默认return this;自己修改时return 设置返回引用类型将会修改返回的数据

<script>
        // class类    
        class Person {
            constructor() {
                // 通用属性  this 是Person类对象{} 
                this.name = "夏栀";
                this.food = "奶茶";
                
                // 默认返回this对象 自己修改时return 返回了引用类型将会修改返回的数据
                // return {}
            }
            // 不要写,
            add() {
                // console.log(this);
            }
        }
        // result 实例
        let result = new Person()
        console.log(result,"实例");



    </script>

3.原型链

首先说明这块我并不是很懂，翻了下“红宝书”，发现原型链·只是其中--面向对象程序设计--的继承中的--一小个章节，属于中高级js

原型链

            原型放置对应方法

        1.new class类执行，返回实例化类对象（this），实例会继承原型的内容

        2.class 上面的方法，全部会放在到原型上

        3.实例连接到原型上去 实例._prptp_ 到达原型上

        4.类怎么到原型上去 class类.prototype  到达原型上

        5.原型上有个constructor属性指向class类

        原型最终位置是object

毕竟是骨子里的东西，没点对强制类型语言的理解，并不好理解

<script>
        // class Person{
        //     constructor(name,food){
        //         this.name=name;
        //         this.food=food;
        //         return this //类对象
        //     }
        //     // 原型
        //     add(val){
        //         console.log(this.name+val+this.food);
        //     }

        // }
        // // result 实例
        // let result =new Person("夏栀","奶茶");
        // console.log(result);
        //es5原型
        function Person1(name,food){
            this.name=name;
            this.food=food;
        }
        Person1.prototype.add=function(){
            console.log("原型");
        }

        let resutl1 =new Person1("夏栀","奶茶")
        console.log("resutl1");

        Array.prototype.add=function(){
            let len =this.length;
            let result=0;
            for(let index =0;index<len;index++){
                result +=this[index]
            }
            return result
        }

        let arr=[11,12,33]
        let arr1=[1,2,3]

    </script>