原型链继承

115 阅读3分钟

一:原型含义:

每个函数都有一个prototype(原型)属性 --> 是一个指针,指向一个对象 --> 这个对象的用途是包含可以由特定类型的所有实例共享的属性和方法 -

二:语法

        构造函数+prototype
        构造函数:属性
        原型prototype:方法
        
 构造函数:
        function Person(name,age){
          this.name = name;
        this.age = age;
    }
     let p1 = new Person('zhangsan1',20);
    let p2 = new Person('zhangsan2',30);
    let p3 = new Person('zhangsan3',40);
    // p1.eat();在p1基础上如果添加直接添加
    // p2.eat();
    // p3.eat();
    console.log(p1);
    

三:原型链的方式对字符串的空格进行处理

1: 去除字符串前面的空格

    function clearSpace(){
   }
  
    String.prototype.clearQSpace = function (){
       return this.replace(/^\s+/,'')
    }
   let nStr = '   abc'.clearQSpace();
    console.log(nStr);
    

2:去除字符串后面的空格

     String.prototype.clearHSpace = function (){
        return this.replace(/\s+$/,'')
    }
   let nStr = 'abc    '.clearHSpace();
    console.log(nStr);

3: 去除字符串前后的空格

    String.prototype.clearQHSpace = function (){
        return this.replace(/^\s+|\s+$/g,'')
    }
    let nStr = '    abc    '.clearQHSpace();
     console.log(nStr);
    

4: 去除字符串的所有空格

    String.prototype.clearAllSpace = function (){
        return this.replace(/\s/g,'')
    }
     let nStr = '    ab  c    '.clearAllSpace();
     console.log(nStr);
    let str = new String();
    console.log(str);
    

四:继承

       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)

1:原型链继承直接继承

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

2:原型链继承实例化对象

       /* 构造函数可以理解为一个类 */
    // 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);
    

3:利用空对象作为中介

  /**
     * @param 子类
     * @param 父类
     * */
     
      /* 父类 */
    function Person() { }
    Person.prototype.head = 1;
    Person.prototype.foot = 2; 
    
   封装函数的方法: 将子原型和父原型 在空对象里面完成嫁接(跟冒泡排序si的 换位置 父原型的属性赋给空对象 然后空对象的属性赋给子对象  等同于父原型的属性给子原型 但此方式:子原型改变方法或是属性 父原型不会收到影响)

    function extend(child, parent) {
        function f() { }
        f.prototype = parent.prototype;
        child.prototype = new f();
        child.prototype.constructor = child;
    }
     extend(Student, Person)
    
    
    // Object.prototype.foot = 2;
    /* 
       空对象,几乎不占内存     

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

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