js面向对象进阶

Posted 2020-12-23 彼岸

js-进阶心得

01-面向对象

构造函数

    function Student(name, age) {
        //实例成员  通过new出来的成员
        // name,age叫对象的属性（成员）
        this.name = name;
        this.age = age;
        // study叫对象的方法 （成员）
        this.study = function () {
            console.log(‘day day up‘);
        }
    }
    var stu1 = new Student(‘张三‘, 18);

像这样需要通过new来使用的函数都可以称为构造函数

通过this写进去的,是它的实例方法,可以通过new来调用

Student.nation = "china";

向这样直接添加进去的是静态成员,只能通过构造函数名来调用

原型链

像上面添加有一个弊端,就是需要执行相同操作的时候,new出来占了不同的空间,也就是浪费内存,解决办法是通过js中的原型机制(可以理解为共享的),解决掉

先来了解下函数

普通方法添加到函数内部,占不同空间,通过this访问
共享方法添加到函数原型,通过prototype访问,
new出来的实例对象想访问函数原型,通过__proto__属性
想访问构造函数,通过constructor来访问

原型链就是一直向上访问,顶层是Object

如果在Object原型添加方法,那么所有对象都能访问

继承

    function Father(name, age) {
        this.name = name;
        this.age = age;
    }

    Father.prototype.getMoney = function () {
        console.log("给了" + this.name + "100万");
    }

    function Son(name, age) {
        // new Son的时候 this指向{}(谁new this指向谁)
        Father.call(this, name, age)
    }


    // 方法继承
    Son.prototype = new Father();
    Son.prototype.constructor = Son;

    // 儿子自己的方法
    Son.prototype.study = function () {
        console.log(‘好好学习   ‘);
    }
    /*
        1 call() 可以实现函数调用
        fun.call();
        2 可以改变函数中this指向
        fun.call(obj,10,20);
        */
    var zs = new Son(‘张三‘, 18);
    console.log(zs.name, zs.age);
    zs.getMoney();
    zs.study();

继承需要改变this指向,这样可以达到属性继承,方法继承通过改变原型,在添加子类方法,最终实现伪继承

es6

    class Fa {
        constructor(name, age) {
            this.name = name;
            this.age = age;
        }

        getMoney() {
            console.log(100000);
        }

    }

    class Son extends Fa {
        constructor(name, age) {
            // 调用父类构造函数
            super(name, age);
        }
    }

    var son1 = new Son("小明", 18);
    son1.getMoney();

es6通过语法糖形式,本质上还是通过上面的方法实现,只是写法更简便,需要注意子类必须调用一次super方法,才能让原型继承父类属性