JavaScript看这个就够了-面向对象篇

//面向对象编程有4个概念
//封装、抽象、继承和多态
//Encapsulation Abstraction Inheritance Polymorphism

/*
使用封装重新组合相关的变量和函数
这样我们可以减少复杂性、我们可以在程序的不同部分重用这些对象
或者在不同的程序中

通过抽象，我们隐藏细节和复杂性
只显示必要的部分
这种技术降低了复杂性、也隔离了代码的更改的影响

继承让我们可以消除多余的代码

用多态性我们可以避免写出复杂丑陋的选择性代码
*/

//Object 
/*
JavaScript一切皆是对象
*/

//对象创建语法
//是一种简单的定义对象的方法
if(1){
    let circle={
        center:{
            x:1,
            y:3
        },
        radius:10,
    };
    console.log(circle);
    //{ center: { x: 1, y: 3 }, radius: 10 }
    //添加新属性或者方法
    circle.show=function(){
        console.log(this.center);
    }
    circle.show();
    //{ x: 1, y: 3 }
}


//工厂函数
if(1){
    let factory=function(){
        let obj={};
        obj.show=function(){
            console.log("hello world");
        }
        return obj;
    }
    let new_obj=factory();
    new_obj.show();
    //hello world
}


//构造函数
if(1){
    let constructor=function(){
        this.show=function(){
            console.log("hello world");
        }
    }
    let new_obj=new constructor();
    new_obj.show();
    //hello world
}

//构造函数属性(Constructor Property)
/*
每个javascript中的对象都有一个叫构造函数的属性
它是一个用于创建这个对象的构造方法的引用
*/
if(1){
    let circle=function(){
        return {
            show:function(){
                console.log("hello world");
            }
        }
    };
    let new_obj=circle();
    console.log(new_obj.constructor);
}

//添加删除属性(Adding/Removing Properties)
if(1){
    let circle=function(){
        return{
            show:function(){
                console.log("hello world");
            }
        }
    };
    let new_obj=circle();
    console.log(new_obj);
    //{ show: [Function: show] }
    new_obj.data="gaowanlu";
    console.log(new_obj);
    //{ show: [Function: show], data: 'gaowanlu' }
    new_obj["id"]=1234;
    console.log(new_obj);
    //{ show: [Function: show], data: 'gaowanlu', id: 1234 }
    delete new_obj["show"];
    console.log(new_obj);
    //{ data: 'gaowanlu', id: 1234 }
}



//遍历或枚举对象
if(1){
    let obj={
        id:"gaowanlu",phone:"1234"
    };
    for(let i in obj){
        console.log(obj[i]);
    }
    //1234
}

//Hide the details Show the essentials
/*
抽象意味着我们应该隐藏细节和复杂的部分，只显示或暴露必要的部分
*/


//私有属性与方法
if(1){
    let Circle=function(){
        //@private
        let data=0;
        //@public
        this.show=function(){
            data+=1;
            console.log(data);
        }
    };
    let new_obj=new Circle();
    new_obj.show();
    new_obj.show();
    new_obj.show();
    /*1 2 3*/
}


//Getters/Setters defineProperties
if(1){
    let Circle=function(){
        let new_obj={};
        Object.defineProperty(new_obj,"data",{
            get:function(){
                return "hello";
            },
            set:function(el){
                console.log(el);
            }
        });
        return new_obj;
    };
    let new_obj=Circle();
    new_obj.data="qw";
    //qw
    console.log(new_obj.data);
    //hello
}


//继承(inheritance)
//不同的类需要相同的属性或方法，使用继承解决
if(1){
    let Circle=function(radius){
        this.radius=radius;
        this.draw=function(){
            console.log('draw');
        };
    }
    let circle= new Circle(2);
    console.log(circle.__proto__.__proto__);
    //{}
}


//Object.defineProperty()
if(1){
    let person={name:"gaowanlu"};
    Object.defineProperty(person,"name",{
        writable:false,//不可写
        enumerable:true,//可枚举
        configurable:false,//不可配置(可不可删去)
    });
    person.name="opp";
    delete person.name;
    console.log(person);
}

//原型继承
if(1){
    let Circle=function(){
        this.draw=function(){
            console.log('draw');
        }
    };
    let circle_1=new Circle();
    let circle_2=new Circle();
    //circle_1 circle_2内都有一个实体的方法draw
    //占用两个内存空间，如果Circle对象多了起来怎么办
    let Car=function(){
        this.money=1000000;
    };
    //给Car的父类添加方法
    Car.prototype.draw=function(){
        console.log("draw");
    }
    let car_1=new Car();
    let car_2=new Car();
    car_1.draw();
    car_2.draw();
    //draw draw
}


//子类父类方法可以互相调用
if(1){
    let Cir=function(){
        this.draw=function(){
            console.log("draw");
            //this.move();
        }
    }
    Cir.prototype.move=function(){
        console.log("move");
        this.draw();
    }
    let new_obj=new Cir();
    new_obj.move();
    //move draw
}

//继承不等于拥有
//继承的是父级的引用，自然父级改变，子级继承的也会改变

//Object.keys()返回对象实体成员
//for in 所有成员、包括继承的东西
if(1){
    let Cir=function(){
        this.data=123;
    };
    Cir.prototype.name="gaowanlu";
    let new_obj=new Cir();
    console.log(Object.keys(new_obj));
    //[ 'data' ]
    for(let key in new_obj){
        console.log(key);
    }
    //data
    //name
    //判断是不是对象内的实体
    console.log(new_obj.hasOwnProperty("data"));//true
    console.log(new_obj.hasOwnProperty("name"));//false
}


//创建自己的原型继承
if(1){
    let Tesla=function(){
        this.type="Tesla";
    };
    Tesla.prototype.show=function(){
        console.log(this.type);
    }
    let Audi=function(){
        this.type="Audi";
    };
    Audi.prototype.show=function(){//show属于类
        console.log(this.type);
    }
    let car_1=new Tesla();
    let car_2=new Audi();
    car_1.show();//Tesla
    car_2.show();//Audi
    //我们会发现又出现问题了，这两个方法不是一样吗，能不能用一个来表示
    console.log(car_1);
    console.log(car_2);

    //使用继承
    Tesla=function(){
        this.type="tesla"
    };
    Tesla.prototype.show=function(){
        console.log(this.type);
    }
    Audi=function(){
        this.type="audi";
    };
    //让Audi使用和Tesla一样的prototype
    //Object.create()会返回一个和Tesla.prototype一样的对象
    Audi.prototype=Object.create(Tesla.prototype);
    //此时Audi.prototype内的constructor是Tesla的构造函数，我们要更改过来
    Audi.prototype.constructor=Audi;
    //现在可以使用
    let nice_car=new Audi();
    nice_car.show();//输出audi
}

//要记住继承的是prototype对象内的内容而不是自己定义的对象属性与方法
//上面show方法属于prototype type属性属于对象，type不可以继承


//每个对象的构造函数为class.prototype.constructor()
//let cir=new Circle(1);
//等价于 let cir=new class.prototype.constructor(1);
//prototype就是__prototype__



//使用父对象构造函数
if(1){
    let CarColor=function(color){
        this.color=color;
    }
    let Tesla=function(color){
        CarColor.call(this,color);//调用父对象构造函数
        this.type="Tesla";
    };
    let car=new Tesla("red");
    console.log(car);
    //输出 Tesla { color: 'red', type: 'Tesla' }
}


//方法重写(Method Overriding)
//在子类中重写一个基类定义的方法
if(1){
    let extend=function(child,parent){
        child.prototype=Object.create(parent.prototype);
        child.prototype.constructor=child;
    }
    let CarColor=function(color){
        this.color=color;
    };
    CarColor.prototype.ShowColor=function(){
        console.log("red");
    }
    let Tesla=function(color){
        CarColor.call(this,color);
        this.type="tesla";
    };
    extend(Tesla,CarColor);
    let my_car=new Tesla("blue");
    my_car.ShowColor();
    //输出"red"
    //这不是我们想要的方法怎么办，方法重写
    //重写需要在继承之后
    Tesla.prototype.ShowColor=function(){
        console.log(this.color);
    };
    my_car=new Tesla("yellow");
    my_car.ShowColor();
    //yes！！输出了 yellow
}



//多态
//一个多个子类继承一个父类的同一个方法
//但在，两个子类中使用有不同的效果
if(1){
    let extend=function(child,parent){
        child.prototype=Object.create(parent.prototype);
        child.prototype.constructor=child;
    };
    let CarColor=function(){
        this.color="red";
    };
    CarColor.prototype.ShowColor=function(){
        console.log("red");
    };
    let Tesla=function(color){
        this.type="tesla",
        CarColor.call(this,color);
    };
    extend(Tesla,CarColor);
    Tesla.prototype.ShowColor=function(){
        console.log("blue tesla");
    };
    let Audi=function(color){
        CarColor.call(this,color);
        this.type="audi";
    };
    extend(Audi,CarColor);
    Audi.prototype.ShowColor=function(){
        console.log("black audi");
    };
    let array=[new Tesla(),new Audi()];
    for(let car of array){//多态的好处
        car.ShowColor();
    }
    /*输出
    blue tesla
    black audi*/
}


//谨慎使用继承，不会用就避免使用


//ES6 Classes相关语法
if(1){
    //之前Tesla构造函数
    let Tesla=function(color){
        this.color=color;
        this.speed="299km/s";
        this.type="tesla";
        this.showUser=function(){
            console.log("gaowanlu");
        };
    };
    //采用ES6语法写
    class Tesla_class{
        constructor(color){//构造函数
            this.color=color;
            this.speed="299km/s";
            this.type="tesla";
        }
        //在构造函数constructor外写的东西属于prototype的内容
        showUser(){
            console.log("gaowanlu");
        }
    }
    let car = new Tesla_class("red");
    console.log(car);
    //输出 Tesla_class { color: 'red', speed: '299km/s', type: 'tesla' }
    console.log(typeof(Tesla_class));
    //输出 function
    //class只是皮，肉是function

    //Hoisting
    //两种声明class方式
    if(1){
        class via{
        }
        const yiu=class{
        }
    }

    //static Methods(静态方法:只在类中有效)
    let ff=class{
        constructor(){
        }
        draw(){
        }
        static parse(){
        }
    };
    ff.parse();//ff中有parse()
    let obj=new ff();
    //obj.parse(); obj中没有parse()



    //对象私有成员
    const _draw=Symbol();
    let lua=class{
        constructor(){
        }
        [_draw](){
            console.log("私有");
        }
    };
    //外部无法使用[_draw]()


    //弱映射
    const _name=new WeakMap();
    const _showname=new WeakMap();
    let didi=class{
        constructor(){
            _name.set(this,123456);
            _showname.set(this,function(){
                console.log("_showname");
            });
        }
        get radius(){
            return 1;
        }
        set radius(el){
            console.log(el);
        }
    }
}

//ES6 继承
if(1){
    class TeslaColor{
        constructor(color){
            this.color=color;
        }
        ShowColor(){
            console.log(this.color);
        }
    };
    class TTCar extends TeslaColor{
        constructor(color){
            super(color);//调用TeslaColor构造函数
        }
    }
}


//ES6 方法重写
if(1){
    class GaoF{
        move(){
            console.log("GaoF");
        }
    }
    class Fu extends GaoF{
        move(){//直接重写

        }
    }
}