JavaScript 面向对象编程

JavaScript 面向对象编程

面向对象几个常用的特性 ：

1.抽象（抽取核心的属性来做开发）
2.继承:父子关系
3.多态：组件开发，选项卡：公共代码(选项卡)，各自有独立的功能
·····四个款式：1.可以拖拽改变大小；2、点击添加新选项；3、拖拽改变位置；4.点击下面渐隐渐现
4.复用

抽象 继承 复用 多态

对象的属性和方法

对象 ： 属性+方法

不建议使用已有的对象使用已挂装的方法

    let num = 123;//变量
    let arr = [1, 2, 3, 12];
    arr.a = 456;//arr.a  属性：本质上就是变量，挂在对象下面,名花有主  挂载的属性 
    console.log(arr.a);

    function show() {//函数
        console.log('函数');
    }

    show();

    arr.sum = function () {//方法：本质上就是函数，挂在对象下面,名花有主
        console.log('方法');
    }

js 提供一个空对象 给我们挂载东西 ，不会影响到其他的 object

面向的对象的方式

单体 -混合方式-ES6 class

单体 -----不能实现复用

 //对象：学生
    let student = {
        name: '小黄',
        adr: '东莞',
        showName: function () {
            console.log('名字是：' + this.name);
        },
        coding: function () {
            console.log(this.name + '代码666');
        },
        sing: function () {
            console.log(this.name + '水手是我的成名曲');
        }
    }

    console.log(student.name);//属性
    student.sing();//方法
    student.coding();

混合方式 ： 工厂方式 ->原料加工
缺点 ： 方法没有得到高度的复用

完美解决方案 ： 工厂方式 + new + prototype （完完美解决）

   //对象：属性和方法 ：工厂方式 原料-加工-出厂：缺点：方法没有实现高度复用，没有new；没法判别对象是谁创建出来的
    function Student(name, adr) {
        //原料
        let obj = new Object();//空对象
        //加工：添加属性和方法
        obj.name = name;
        obj.adr = adr;
        obj.coding = function () {
            console.log(this.name + '代码666');
        }
        obj.eating = function () {
            console.log(this.name + '是个吃货');
        }
        obj.dance = function () {
            console.log(this.name + '舞姿很妖娆');
        }
        //出厂
        return obj;
    }

    let s1 = Student('郑智文', '东莞');
    s1.dance();

    console.log(s1.dance == s2.dance);//false:说明只是代码复用，内存单元不是一份  
    // 只是只是代码复用 内存没有复用，存放再不同的内存单元里面   ->  
    // 公共的方法 属性 存放在原型对象下面 

原型对象

每一个构造函数下都有一个原型对象
原型对象下面有一个属性construcor ，该属性指向构造函数
每一个对象和他的原型有一条链接 ，就叫做原型链
原型对象外还有原型对象 ，一直指向外层 object 的原型

内存得到复用

把方法挂到原型对象下面 ，所以的其他的数组也是能够调用

// 对象：属性和方法 ，加了new ，省略原料和出场 

  function Student(name, adr) {//构造函数==类：该函数的目的是为了构造对象
        //原料：不用做了
        // let obj = new Object();//空对象
        // let this = new Object();//new帮你完成
        //加工：添加属性
        this.name = name;
        this.adr = adr;
        //出厂：不用你做
        // return obj;
    }


// 构造函数 ==类 ： 该函数的作用就是为了构造对象

// 构造函数下 .prototype.方法名=function(){}


// 可以把当前的函数的挂到原型对象下面 ，实现内存单元的复用

 Student.prototype.coding = function () { //方法
        console.log(this.name + '代码666');
    }

    Student.prototype.eating = function () {
        console.log(this.name + '是个吃货');
    }

    Student.prototype.dance = function () {
        console.log(this.name + '舞姿很妖娆');
    }

// new  实例化一个对象  调用原型对象里面的方法
 let s1 = new Student('郑智文', '东莞');//new一个对象(实例)的这个过程，就是实例化
    s1.dance();

    let s2 = new Student('胡海', '湖北');
    s2.dance();
    s2.coding();
 console.log(s1.dance == s2.dance); // 若打印的值为true 则证明共用的是一份内存单元

---

总结 ： 每一个构造函数下面都有一个原型对象 原型原型对象里面的又有一个constrctor 指向构造函数 ，构造函数里面可以new许多个实例 每一个实例跟原型对象都有一个链接 叫原型链