美文网首页
es5中的类

es5中的类

作者: 北冥有咸鱼_ | 来源:发表于2020-05-12 11:14 被阅读0次

    es5里的类(自己写)

    function Person(){
      this.name = '张三';
      this.age = 20;
    }
    var p = new Person();
    p.name //张三
    

    构造函数和原型链里增加方法

    function Person(){
      this.name = '张三'; //属性
      this.age = 20;
      this.run = function(){ //实例方法
        console.log('xxx')
      }
    }
    //通过原型链扩展属性
    Person.prototype.sex = '女'
    //通过原型链扩展实例方法
    Person.prototype.work = function(){
      return '程序员'
    }
    var p = new Person();
    p.work(); //程序员
    //原型链上的属性会被多个实例共享,构造函数不会
    

    实例方法必须通过newPerson才能调用

    //定义静态方法
    Person.getInfo = fucntion(){
      console.log('我是静态方法')
    }
    //调用
    Person.getInfo();
    

    es5中的继承

    定义一个web类,继承Person类
    两种方式1.原型链 2.对象冒充 3.组合

    对象冒充
    function Web(){
      Person.call(this) //对象冒充实现继承
    //Web继承了Person
    }
    var w = new Web();
    w.run(); //xxx
    w.work(); //报错
    //对象冒充可以继承构造函数里的方法,但是没法继承原型链上的属性和方法
    
    原型链实现继承
    Web.prototype = new Person(); //原型链实现继承
    var w = new Web();
    w.work(); //程序员
    w.run(); //xxx
    //原型链继承:既可以继承构造函数中的属性和方法,也可以继承原型链上的属性和方法
    
    原型链实现继承的问题:

    实例化子类的时候没法给父类传参

    function Person(name,age){
      this.name = name; //属性
      this.age = age;
      this.run = function(){ //实例方法
        console.log(name+'在运动')
      }
    }
    Person.prototype.work = function(){
      console.log(this.name+'是程序员')
    }
    var p = new Person('李四',20);
    p.run(); //李四在运动
    
    //web继承person
    function Web(name,age){
    }
    Web.prototype = new Person();
    var w = new Web('张三',20)
    w.run(); //undefined在运动
    
    原型链+构造函数的组合继承模式
    function Web(name,age){
      Person.call(this,name,age) //可以继承构造函数里的子类和方法
    }
    Web.prototype = new Person();
    var w = new Web('张三',20)
    w.run(); //张三在运动
    w.work(); //张三是程序员
    

    换种写法:

    Web.prototype = Person.prototype
    var w = new Web('张三',20)
    w.run(); //张三在运动
    w.work(); //张三是程序员
    

    相关文章

      网友评论

          本文标题:es5中的类

          本文链接:https://www.haomeiwen.com/subject/ditpnhtx.html