zoukankan      html  css  js  c++  java
  • es5 的类和继承

    创建一个简单的类

    创建对象(构造函数  + newfunction cityName (name,age) {
      this.name = name;  //属性
      this.age = age;
     this.run =function(){  //实例方法
       alert('run方法')
     }
    }
    cityName.getInfo = function(){     //静态方法
       console.log('静态方法) 
    }
    cityName.prototype.about = function () {
      console.log(`name:${this.name},age:${this.age}`)
    }
    //创建对象     对象cn1和cn2共享cityName.prototype原型属性
    let cn1 = new cityName('城市',2020); console.log(cn1.name) cn1.about() 
    let cn2 = new cityName('城市',2020);
    console.log(cn2.name)
    cn2.about()
    //静态方法的调用 
    cityName.getInfo()

      

    继承

    首先先创建一个类

    function Person () {
      this.name = '张三';
      this.age = 18;
      this.run = function () {
        alert(this.name + '在运动')
      }
    }
    Person.prototype.work = function () {
      alert(this.name + '在工作')
    }

    1、对象冒充继承模式   

    对象冒充可以继承构造函数里面的属性和方法,但是不可以继承原型链上面的属性和方法
    function Web () {
      Person.call(this);   /*对象冒充实现继承*/
    }
    
    let a = new Web();
    a.run()   /*对象冒充可以继承构造函数里面的属性和方法*/
    a.work()  /*对象冒充可以继承构造函数里面的属性和方法,但是不可以继承原型链上面的属性和方法*/

    2、原型链继承模式

    原型链继承即可以继承构造函数里面的属性和方法,也可以继承原型链上面的属性和方法,但是实例化子类时,没有办法给父类传参
    function Web () {
    
    }
    Web.prototype = new Person(); /*原型链继承*/
    
    let a = new Web();
    /*即可以继承构造函数里面的属性和方法,也可以继承原型链上面的属性和方法*/
    a.run()
    a.work()

    3、原型链+对象冒充的组合继承模式

     首先创建一个需要传入参数的类

    function City (name,age) {
      this.name = name;
      this.age = age;
      this.run = function () {
        alert(this.name + '在运动')
      }
    }
    City.prototype.work = function () {
      alert(this.name + '在工作')
    }

    实现原型链+对象组合继承

    第一种方法:

    function Web (name,age) {
      City.call(this,name,age)
    }
    Web.prototype = new City();  //继承父类构造函数和原型链上的属性和方法
    let a = new Web('李雷',20);
    a.run()
    a.work()

    第二种方法:

    function Web (name,age) {
      City.call(this,name,age)
    }
    Web.prototype = City.prototype;    //直接继承父类原型链上的方法和属性
    let a = new Web('李雷',20);
    a.run()
    a.work()
  • 相关阅读:
    元素单侧阴影效果
    有关动画的总结
    吸底效果
    使用seajs来引入js代码
    引用POPUI来实现弹窗效果,且弹窗中的内容可以点击事件
    Js文本溢出自动添加省略号ellipsis
    line-hieght与vertical-align的区别与联系
    实现文本框中输入限制字数的效果
    下拉菜单的实现
    基本SQL命令 (1.SQL命令使用规则/2.库管理/3.表管理/4.表记录管理/5.更改库,库的默认字符集/6.连接数据库的过程/7.数据类型)
  • 原文地址:https://www.cnblogs.com/Li--gm/p/13306484.html
Copyright © 2011-2022 走看看