js基础 原型与继承

87 阅读1分钟

原型

<body>
    <!-- 每个函数都有一个prototype(原型)属性 -->
    <!-- 是一个指针,指向一个对象 -->
    <!-- 这个对象的用途是包含可以由特定类型的所有实例共享的属性和方法 -->
    <script>
        /* 
            构造函数+prototype
            构造函数:属性
            原型prototype:方法
        */
        /* 用混合方式构造对象 */
        function Person(name,age){
            this.name = name;
            this.age = age;
        }
        /* 函数重复、浪费资源--解决:原型 */   
        Person.prototype.eat = function (){
            document.write(`姓名:${this.name} 年龄:${this.age} 会吃饭`);
        }
        // Person.prototype.weight = '70kg'
        let p1 = new Person('zhangsan1',20);
        let p2 = new Person('zhangsan2',30);
        let p3 = new Person('zhangsan3',40);
        // p1.eat();
        // p2.eat();
        // p3.eat();
        console.log(p1);
        document.write(p1.weight + '<br>');
        document.write(p2.weight + '<br>');
        document.write(p3.weight + '<br>');
    </script>
</body>

原型的方法去除字符串的空格

<script>
        // function clearSpace(){
        // }
        /* 去除字符串前面的空格 */
        String.prototype.clearQSpace = function (){
           return this.replace(/^\s+/,'')
        }
        // let nStr = '   abc'.clearQSpace();
        // console.log(nStr);
        /* 去除字符串后面的空格 */
        String.prototype.clearHSpace = function (){
            return this.replace(/\s+$/,'')
        }
        // let nStr = 'abc    '.clearHSpace();
        // console.log(nStr);
        /* 去除字符串前后的空格 */
        String.prototype.clearQHSpace = function (){
            return this.replace(/^\s+|\s+$/g,'')
        }
        // let nStr = '    abc    '.clearQHSpace();
        // console.log(nStr);
        /* 去除字符串的所有空格 */
        String.prototype.clearAllSpace = function (){
            return this.replace(/\s/g,'')
        }
        // let nStr = '    ab  c    '.clearAllSpace();
        // console.log(nStr);
        let str = new String();
        console.log(str);
    </script>

面向对象之继承

<script>
        function Person(name,age){
            this.name = name;
            this.age = age;
        }
        let p1 = new Person('zhangsan',30);

        function Student(){

        }

        /* instanceof
        来判断这个实例(p1)是不是这个构造函数(Person)实例化出来的对象*/
        /*  console.log(p1 instanceof Person); */ /* =>true */
        //  console.log(p1 instanceof Student); /* =>false */
        /* 万物皆对象 */
        // console.log(p1);
        // console.log(p1 instanceof Object)
    </script>

原型链继承实例化对象

<script>
        /* 构造函数可以理解为一个类 */
        // function Person(){
        //     this.head = 1;
        //     this.foot = 2;
        // }
        // function Student(name,no){
        //     this.name = name;
        //     this.no = no;
        // }
        // /* 让学生类 继承 人类的两个脚和一个头的属性 */
        // /* Student的prototype指向一个Person的实例 */
        // Student.prototype = new Person();
        // /* 加上constructor属性,并将这个属性指回原来的构造函数 */
        // Student.prototype.constructor = Student;
        // let stu1 = new Student();
        // console.log(stu1);

        // console.log(stu1.head);
        // console.log(stu1.foot);

        /* 写一个类 Car color price 属性 */
        /* 类 Bmw 继承Car的所有属性 并实例化Bmw这个类 
        写个方法可以把 color 和 price 打印到页面上 */
        function Car(){
            this.color = '白色'
            this.price = '100w'
        }
        function Bmw(){}

        Bmw.prototype = new Car();
        Bmw.prototype.constructor = Bmw;

        let b1 = new Bmw();
        console.log(b1.color);
        console.log(b1.price);
        console.log(b1);

    </script>

原型链直接继承原型

<script>
        // function Person(){
        // }
        // Person.prototype.head = 1;
        // Person.prototype.foot = 2;
        // let p1 = new Person();
        
        // /* 不变的属性都可以直接写入Person.prototype */
        // function Student(){

        // }
        // /* Student想要继承Person的属性 */
        // /* 直接继承prototype */
        // Student.prototype = Person.prototype;
        // let stu1 = new Student();
        // console.log(stu1.head);
        // console.log(stu1.foot);
        // // console.log('stu1',stu1);

        // /* 缺点: */
        // /* 任何对Student.prototype的修改,都会反映到Person.prototype */
        /* Student的constructor不会指向自己 */
        // Student.prototype.name = 'zhangsan'
        // console.log('p1',p1);

        /* 写一个类 Car color price 属性 使用直接继承prototype的方式实现*/
        /* 类 Bmw 继承Car的所有属性 并实例化Bmw这个类 
        写个方法可以把 color 和 price 打印到页面上 */

        function Car(){
           
        }
        Car.prototype.color = '白色'
        Car.prototype.price = '100w'
        function Bmw(){
            this.print = function (){
                document.write(`${this.color}--${this.price}`);
            }
        }

        Bmw.prototype = Car.prototype;
        let b1 = new Bmw();
        b1.print();
        
    </script>

利用空对象作为中介

<script>

        /**
         * @param 子类
         * @param 父类
         * */
        function extend(child, parent) {
            function f() { }
            f.prototype = parent.prototype;
            child.prototype = new f();
            child.prototype.constructor = child;
        }
        // Object.prototype.foot = 2;
        /* 
            空对象,几乎不占内存
            修改Student的prototype对象,不会影响到Person的prototype对象
        */
        /* 父类 */
        function Person() { }
        Person.prototype.head = 1;
        Person.prototype.foot = 2;

        /* 子类想继承父类的属性 */
        function Student() { }

        /* 新建一个空对象 */
        //    function f(){}
        //    /* 把父类的原型直接赋值给空对象的原型上 */
        //    f.prototype = Person.prototype;
        //    /* 把空对象的实例化对象 给到子类的原型上  */
        //    Student.prototype = new f();
        //    /* ★constructor构造器都是指向自己的 */
        //    Student.prototype.constructor = Student;

        extend(Student, Person)

        let stu1 = new Student();
        console.log(stu1.foot);
        console.log(stu1);

        /* 不会影响到Person的prototype对象 */
        // Student.prototype.age = 30;
        //    let p = new Person();
        //    console.log(p);

        /* 原型链就是一层一层向上找的过程  */
        /* 原型链继承就是利用了上面这种特性 */

        /* 写一个类 Car color price 属性 */
        /* 类 Bmw 继承Car的所有属性 并实例化Bmw这个类 
        写个方法可以把 color 和 price 打印到页面上 */

        function Car() {

        }
        Car.prototype.color = '白色'
        Car.prototype.price = '100w'

        // function f(){}
        // f.prototype = Car.prototype;
        // Bmw.prototype = new f();
        // Bmw.prototype.constructor = Bmw;

        extend(Bmw, Car)

        function Bmw() {
            this.print = function () {
                document.write(`${this.color}--${this.price}`);
            }
        }
        let b1 = new Bmw();
        b1.print();
        



    </script>