美文网首页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类的写法(原型链继承、对象冒充继承、原

    1.最简单的类 2.构造函数和原型链里面新增方法 3. 类里面的静态方法 4. es5里面的继承 , 对象冒充实现...

  • es5继承

    对象冒充实例继承(无法获取原型链上的属性和方法) 原型链继承(实例化无法给父类传参) 二者结合,实现继承

  • es5的部分继承以及es6的class

    一、JavaScript常用的原型继承方式 原型链继承 2,构造函数继承(对象冒充继承) 3,组合继承(原型链继承...

  • js中的继承

    继承 对象冒充的方式实现继承 弊端:只能继承构造函数里面的属性/方法。原型链上的无法继承 原型链的方式实现继承 弊...

  • js继承遇到的小问题

    这两天在看js继承方面,它不像OC那种传统的类继承。js继承方式还是挺多的。比如:原型继承、原型冒充、复制继承 原...

  • JS继承

    JS继承的几种实现方式 继承是指子类继承父类的属性和方法,要实现继承,首先我们需要有一个父类 原型链继承 原型链继...

  • 继承

    原型链继承 原型链继承缺点: 1 子类从父类继承的属性和方法变成了共享的 2 继承时子类无法给父类传递参数 fun...

  • es5 类与继承

    ES5定义一个类 创建一个静态方法 实例化Person类 es5上的继承分为两种:(原型链)、(对象冒充) 如果对...

  • JS汇总---面向对象&数组

    面向对象 js原型链的继承 静态属性怎么继承 js原型链以及特点 面向对象有哪几个特点 封装,继承,多态 对象的继...

  • ES5 继承实现

    ES5中继承主要3种方式: 1、对象冒充缺点:无法调用原型链方法 2、原型链缺点:无法调用父类构造方法 3、对象+...

网友评论

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

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