美文网首页ts
类和静态方法 继承以及ts类的写法(原型链继承、对象冒充继承、原

类和静态方法 继承以及ts类的写法(原型链继承、对象冒充继承、原

作者: johnnie_wang | 来源:发表于2019-07-25 23:10 被阅读0次

    1.最简单的类

    function Person() {
        this.name = "jake";
        this.age = 20;
     }
    var p = new Person();
    console.log(p.name);
    

    2.构造函数和原型链里面新增方法

          function Person () {
              this.name = "jake";
              this.age = 20;
              this.run = function () {
                  return this.name + '在跑步'
              }
            }
            Person.prototype.sex = 'man'
            Person.prototype.work = function () {
                return this.name + '在工作'
            }
    

    3. 类里面的静态方法

           function Person() {
              this.name = "jake";
              this.age = 20;
              this.run = function() {
                return this.name + "在跑步";
              };
            }
            Person.getInfo = function() {
              console.log("这是静态方法");
            };
            //   原型链上的属性, 会被多个实例共享 , 但是构造函数不会
            Person.prototype.sex = "man";
            Person.prototype.work = function() {
              return this.name + "在工作";
            };
    
            var p = new Person();
            //   p.getInfo(); 构造函数的静态方法 , 不会被实例共享
            console.log(p.work());
    

    4. es5里面的继承 , 对象冒充实现继承

           function Person() {
              this.name = "jake";
              this.age = 20;
              this.run = function() {
                return this.name + "在跑步";
              };
            }
            Person.prototype.sex = "man";
            Person.prototype.work = function() {
              return this.name + "在工作";
            };
    
            function Web() {
                Person.call(this)  /* 对象冒充实现继承 */
            }
            var w = new Web();
            console.log(w.run());  /* 对象冒充可以继承构造函数里面的属性 和 方法 */
            console.log(w.work) /* 但是不能继承原型链上的属性方法 */
    

    5. es5里面的继承 原型链链继承

           function Person() {
              this.name = "jake";
              this.age = 20;
              this.run = function() {
                return this.name + "在跑步";
              };
            }
            Person.prototype.sex = "man";
            Person.prototype.work = function() {
              return this.name + "在工作";
            };
            function Web() {}
            Web.prototype = new Person(); /* 原型链继承 */
            var w = new Web();
            console.log(w.run()); /* 对象冒充可以继承构造函数里面的属性 和 方法 */
            console.log(w.work); /* 也可以继承原型链上的属性方法 */
    

    6.但是原型链继承有一个问题

           function Person(name, age) {
              this.name = name;
              this.age = age;
              this.run = function() {
                return this.name + "在跑步";
              };
            }
            Person.prototype.sex = "man";
            Person.prototype.work = function() {
              return this.name + "在工作";
            };
            function Web(name, age) {}
            Web.prototype = new Person();
            var w = new Web("rose", 20); /* 实例话子类的时候无法给父类传参 */
            console.log(w.run());  /* undefined在跑步 */
    

    7.构造函数 + 对象冒充的组合继承模式

           function Person(name, age) {
              this.name = name;
              this.age = age;
              this.run = function() {
                return this.name + "在跑步";
              };
            }
            Person.prototype.sex = "man";
            Person.prototype.work = function() {
              return this.name + "在工作";
            };
            function Web(name, age) {
              Person.call(this, name, age); //对象冒充继承  实例化子类可以给父类传值
            }
            Web.prototype = new Person();
            var w = new Web("rose", 20);
            console.log(w.run());
            console.log(w.work());
    

    8. 原型链 + 对象冒充继承 的 另一种写法

           function Person(name, age) {
              this.name = name;
              this.age = age;
              this.run = function() {
                return this.name + "在跑步";
              };
            }
            Person.prototype.sex = "man";
            Person.prototype.work = function() {
              return this.name + "在工作";
            };
            function Web(name, age) {
              Person.call(this, name, age); //对象冒充继承  实例化子类可以给父类传值
            }
            Web.prototype = Person.prototype;
            var w = new Web("rose", 20);
            console.log(w.run());
            console.log(w.work());
    

    最后 , ts中定义类

    class Person {
        name: string;
        constructor(n: string) {     //实例话类的时候 , 触发的方法
            this.name = n
        }
        // run():void{
        //     alert(this.name + '在跑步')
        // }
        getName(): string {
            return this.name + '在跑步'
        }
        setName(name: string): void {
            this.name = name
        }
    }
    var p = new Person('jack')
    alert(p.getName());
    p.setName('rose')
    alert(p.getName())
    

    后面 会慢慢更新ts中实现继承等等...😊

    相关文章

      网友评论

        本文标题:类和静态方法 继承以及ts类的写法(原型链继承、对象冒充继承、原

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