typescript学习之旅----创建对象类继承

最新推荐文章于 2025-07-14 02:53:53 发布

原创最新推荐文章于 2025-07-14 02:53:53 发布 · 283 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#typescript

学习笔记专栏收录该内容

124 篇文章

订阅专栏

博客主要介绍了ES5中的几种继承方式，包括构造函数、原型链继承、冒充继承以及原型链与对象冒充结合的继承方式，为理解ES5的继承机制提供了详细内容。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <script src='./ts02.js'></script>
</head>

<body>
  <script>
    // es5 类
    function Person() {
      this.name = 'ts'
    }
    var p = new Person()
    console.log(p)
    // 2、构造函数和原型链里面增加方法
    function Person() {
      this.name = '张三';  /*属性*/
      this.age = 20;
      this.run = function () { /*实例方法*/
        alert(this.name + '在运动');
      }
    }
    Person.getInfo = function () {
      alert('我是静态方法');
    }
    //原型链上面的属性会被多个实例共享   构造函数不会
    Person.prototype.sex = "男";
    Person.prototype.work = function () {
      alert(this.name + '在工作');
    }
    var p = new Person();
    // alert(p.name);
    // p.run();
    p.work();
    //调用静态方法
    Person.getInfo();
    //Web类 继承Person类   原型链+对象冒充的组合继承模式

    function Web() {

      Person.call(this);    /*对象冒充实现继承*/
    }

    var w = new Web();
    // w.run();  //对象冒充可以继承构造函数里面的属性和方法

    w.work();  //对象冒充可以继承构造函数里面的属性和方法   但是没法继承原型链上面的属性和方法


    Web.prototype = new Person();   //原型链实现继承
    var w = new Web();
    //原型链实现继承:可以继承构造函数里面的属性和方法 也可以继承原型链上面的属性和方法
    //w.run();
    w.work();

    //7.原型链+对象冒充的组合继承模式
    function Person(name, age) {
      this.name = name;  /*属性*/
      this.age = age;
      this.run = function () {  /*实例方法*/
        alert(this.name + '在运动');
      }
    }
    Person.prototype.sex = "男";
    Person.prototype.work = function () {
      alert(this.name + '在工作');
    }
    function Web(name, age) {
      Person.call(this, name, age);   //对象冒充继承   实例化子类可以给父类传参
    }
    Web.prototype = new Person();
    var w = new Web('赵四', 20);   //实例化子类的时候没法给父类传参
    // w.run();
    w.work();
    // var w1=new Web('王五',22);
    //8、原型链+对象冒充继承的另一种方式
    function Person(name, age) {
      this.name = name;  /*属性*/
      this.age = age;
      this.run = function () {  /*实例方法*/
        alert(this.name + '在运动');
      }
    }
    Person.prototype.sex = "男";
    Person.prototype.work = function () {
      alert(this.name + '在工作');
    }
    function Web(name, age) {
      Person.call(this, name, age);   //对象冒充继承  可以继承构造函数里面的属性和方法、实例化子类可以给父类传参
    }
    Web.prototype = Person.prototype;
    var w = new Web('赵四', 20);   //实例化子类的时候没法给父类传参
    w.run();
    // w.work();
    // var w1=new Web('王五',22);
  </script>
</body>

</html>

es5中的构造函数，原型链继承，冒充继承，原型链+对象冒充继承