ts

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

2019-07-25  本文已影响0人  johnnie_wang

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中实现继承等等...😊

上一篇下一篇

猜你喜欢

热点阅读