面向对象之继承

102 阅读2分钟

利用instanceof

来判断这个实例(p1)是不是这个构造函数(Person)实例化出来的对象

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

        function Student(){

        }
      /*  console.log(p1 instanceof Person); */ /* =>true */
        //  console.log(p1 instanceof Student); /* =>false */
        /* 万物皆对象 */
        // console.log(p1);
        // console.log(p1 instanceof Object)

原型链继承实例化对象

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

原型链继承直接继承原型

  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();
        

利用空对象作为中介

空对象,几乎不占内存

修改Student的prototype对象,不会影响到Person的prototype对象

  function Car() {    }
        Car.prototype.color = '白色'
        Car.prototype.price = '100w'

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

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

利用空对象封装完成继承

   /* 写一个类House  price 属性 */
        /* 类 Tangc name=“汤臣一品” 继承House 的所有属性 使用空对象封装的方法    实现继承 把  name和 price 打印到页面上 */

        function House(){};
        House.prototype.price='100w';
        function Tangc(){this.name='汤臣一品'}
        function a(child,parent){
            function f(){}
                f.prototype=parent.prototype;
                child.prototype=new f();
                child.prototype.constructor=child
            
        }
        a(Tangc,House)
        let tan=new Tangc()
       document.write(`${tan.name}<br>${tan.price}`);

原型方法清除字符串空格

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>

        //清除字符串前面的空格
        // 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='    a   bc   '.clearHSpace()
        // console.log(nstr);


        //清除字符串前后的空格
        // String.prototype.clearQHSpace=function(){
        //     return this.replace(/^\s+|\s+$/g,'')
        // }
        // let nstr='    a   bc   '.clearQHSpace()
        // console.log(nstr);


        //清除字符串所有的空格
        String.prototype.clearAllSpace=function(){
            return this.replace(/\s/g,'')
        }
        let nstr='    a   bc   '.clearAllSpace()
        console.log(nstr);
        let nstr2='    a  df   sd   f bc   '.clearAllSpace()
        console.log(nstr2);
    </script>
</body>
</html>

原型方法排序

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
     //  请将如下数组使用原型方法排序,
     //  要求:从大到小排序
     //  从小到大排序
     //  var arr=[1,5,13,17,22,15,8,6];
        Array.prototype.d=function(){
            for (let i = 0; i < this.length; i++) {
                for (let j = 0; j < this.length; j++) {
                    if(this[i]<this[j]){
                        var tmp=this[i] ;
                        this[i]=this[j];
                        this[j]=tmp
                    }                    
                }                
            }
            return this
        }
        let arr=[1,5,13,17,22,15,8,6].d()
        document.write(`从小到大:<br>${arr}<br>`);

        Array.prototype.x=function(){
            for (let i = 0; i < this.length; i++) {
                for (let j = 0; j < this.length; j++) {
                    if(this[i]>this[j]){
                        var tmp=this[i];
                        this[i]=this[j];
                        this[j]=tmp
                    }
                    
                }
                
            }
            return this
        }
        let arr2=[1,5,13,17,22,15,8,6].x();
        document.write(`从大到小:<br>${arr2}`);
    </script>
</body>
</html>

原型方法排重

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        Array.prototype.pc = function () {
            // var array = [5, 4, 26, 9, 4, 8, 5, 14];

            var newarr = [];
            for (let i = 0; i < this.length; i++) {
                if (newarr.indexOf(this[i]) == -1) {
                   newarr.push(this[i])
                }
            }
            return  newarr
        }
       let narr=[5, 4, 26, 9, 4, 8, 5, 14].pc()
       document.write(narr);

    </script>
</body>

</html>