JavaScript的面向对象编程

1.1面向对象特点

封装：将对象属性行为封装起来
继承：可以继承父亲的
多态：可以有多种状态多种行为
更容易维护，复用，低耦合

2 .1对象和类

1.一个具体的事物，看得见摸得着的。
在js中是一组相关属性方法的集合。有属性方法组成。
2.类是指泛指的，抽取了对象的公共部分。

2 .2创建类

声明：class Name{}
创建：new Name()
构造函数：constructor，实例化对象用的

    <script>
        // 语法
        class People{
            constructor(user){
                this.user = user;
            }
            eat(food){
                console.log(this.user + "吃饭" + food);
            }
        }
        // 声明对象
        var mingda = new People("handsome");
        console.log(mingda.user);
        var dada = new People("ugly");
        dada.eat("粑粑");
    </script>

2 .3类的继承

    <script>
        class Father{
            constructor() {

            }
            money() {
                console.log(100);
            }
        }
        class Son extends Father{
            constructor() {

            }
        }
        var son = new Son();
        son.money();
        
    </script>

2 .4super关键字

    <script>
        class Father{
            constructor(x, y) {
                this.x = x;
                this.y = y
            }
            sum() {
                console.log(this.x + this.y);
            }
        }
        class Son extends Father{
            constructor(x, y) {
                // this.x = x;
                // this.y = y
                // 继承父亲的构造函数
                super(x, y);
            }
        }
        var son = new Son(11, 22);
        // 这个时候不会输出儿子的算术和，因为sum调用的是父亲自己的x，y
        // 所以报错，这时候我们需要加super关键字
        // 如果父子同名函数，儿子会优先找自己的函数，加入super也是会继承父亲的函数
        son.sum();
    </script>

3.1注意点

1.定义类后才能实例化
2.类里的属性和方法要加this

4.1构造函数和原型

1.构造函数
用来声明对象类。

<script>
	function People(name) {
		this.name = name;
	}
	var ldh = new People("刘德华");
</script>

实例成员：构造函数内部通过this添加的。通过对象访问。
静态成员：在构造函数本身添加的。通过构造函数访问。

<script>
	function People(name) {
		this.name = name;
	}
	var ldh = new People("刘德华");
	// 实例成员
	console.log(ldh.name);
	// 静态成员，只能通过构造函数访问
	People.age = 18;
	console.log(People.age);
	
</script>

2.原型
js里规定了，每一个构造函数都有个原型prototype对象
可以把不变的方法，放在原型对象上，不同的对象实例就不需要开辟新的空间。

    <script>
        function People(name, age) {
            this.name = name;
            this.age = age;
            // this.sing = function() {
            //    console.log('我会唱歌');
            //}
        }
        People.prototype.sing = function() {
            console.log('hello');
        }
        var ldh = new People('ldh', 17);
        var zxy = new People('zxy', 18);
        // 如果两个实例对象调用sing方法，内存会开辟两个空间存放不同对象的sing()
        // 这样我们会浪费空间，就把他放入原型对象里,共享方法
        ldh.sing();
        zxy.sing();
        // 找到原型的构造函数
        console.log(People.prototype.constructor);    </script>

三者之间的关系

call函数

    <script>
        function fn() {
            console.log("hello");
            console.log(this.name);
        }
        var o = {
            name: "d"
        };
        // 使用call调用函数
        // fn.call();
        // 改变this指向，所以在函数里的this就是o
        fn.call(o);
    </script>

5.1继承

当我们以前的时候，没有类这个概念，那我们如何借用父构造函数来继承属性呢？

    <script>
        function Father(user, age) {
            this.user = user;
            this.age = age;
        }
        Father.prototype.moeny = function() {
            console.log(11000);
        }
        // 把父亲的this改为子的this
        function Son (user, age) {
            Father.call(this, user, age)
        }
        // 如果继承父亲原型的方法，需要做以下操作
        Son.prototype = new Father();
        // 上部操作会改变son的构造函数，需要改回来
        Son.prototype.constructor = Son;
        var son = new Son("ldh", 19);
        console.log(son);
        son.moeny();
    </script>