TypeScript–es5中的类,继承,静态方法

TypeScript–es5中的类,继承,静态方法

最简单的类

        function Person() {
            this.name = 'lisi';
            this.age = 20;
        }
        var p = new Person();
        alert(p.name);

clipboard.png

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

        function Person() {
            this.name = 'lisi';
            this.age = 20;
            this.run = function() {
                alert(this.name + '在运动');
            }
        }
        Person.prototype.sex = '男';
        Person.prototype.work = function() {
            alert(this.name + '在工作');
        }

        var p = new Person();
        alert(p.name);
        p.run();
        p.work()

clipboard.png

clipboard.png

clipboard.png

类里的静态方法

        function Person() {
            this.name = 'lisi';
            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();
        // p.work();
        Person.getInfo()

clipboard.png

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

只有一个弹框,说明没有继承到prototype上的方法

        function Person() {
            this.name = 'lisi';
            this.age = 20;
            this.run = function() {
                alert(this.name + '在运动');
            }
        }

        Person.prototype.sex = '男';
        Person.prototype.work = function() {
                alert(this.name + '在工作');
            }
            //Web类继承Person类
        function Web() {
            Person.call(this);
        }
        var w = new Web();
        w.run();
        w.work();

clipboard.png

es5里面的继承,原型链实现继承

        function Person() {
            this.name = 'lisi';
            this.age = 20;
            this.run = function() {
                alert(this.name + '在运动');
            }
        }

        Person.prototype.sex = '男';
        Person.prototype.work = function() {
                alert(this.name + '在工作');
            }
            //Web类继承Person类
        function Web() {

        }
        Web.prototype = new Person();
        var w = new Web();
        w.run();
        w.work();

clipboard.png

clipboard.png

原型链实现继承的问题

        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) {

        }
        Web.prototype = new Person();
        var w = new Web('lisi', 20)
        w.run()
        w.work()

clipboard.png

clipboard.png

原型链+对象冒充的组合继承模式

        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('lisi', 20)
        w.run()
        w.work()

clipboard.png

clipboard.png

原型链+对象冒充的另一种方式

        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('lisi', 20)
        w.run()
        w.work()

clipboard.png

clipboard.png

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请联系我们举报,一经查实,本站将立刻删除。

发布者:全栈程序员-站长,转载请注明出处:https://javaforall.net/101123.html原文链接:https://javaforall.net

(0)
全栈程序员-站长的头像全栈程序员-站长


相关推荐

  • idea springboot项目搭建_idea社区版配置Tomcat

    idea springboot项目搭建_idea社区版配置Tomcatspringboot搭建

    2022年9月11日
    0
  • recvfrom的参数

    recvfrom的参数今天遇到一个奇怪的问题。linux环境下gcc,socket中UDP的recvfrom函数原型ssize_trecvfrom(intsockfd,void*buf,intlen,unsignedintflags,structsockaddr*from,socket_t*fromlen);网上给出的最基本的UDP—echo服务器测试基本的是可以的。…

    2022年7月23日
    9
  • Typescript教程_安装typescript

    Typescript教程_安装typescript前言由于最近在使用vue3写项目,使用vue3的前提就是要学习TypeScript,TypeScript算是JavaScript的升级版,TypeScript包含JavaScript和自己的一些特性

    2022年7月29日
    5
  • Python生成随机数矩阵_Python生成50个随机数

    Python生成随机数矩阵_Python生成50个随机数生成随机数使用random模块random.random()用于随机生成一个0到1的浮点数random.randint(start,stop)随机生成[start,stop]区间内的整数代码示例:importrandomprint(random.random())print(random.randint(2,5))输出结果:0.281138941702427152…

    2022年10月4日
    0
  • redis的雪崩和穿透_redis击穿 穿透 雪崩,怎么预防

    redis的雪崩和穿透_redis击穿 穿透 雪崩,怎么预防Redis雪崩:查询时Redis没有数据本来先从Redis里面查某个数据但是Redis中这个数据刚好被删除了,还没来得及更新一瞬间很多请求直接进入了Mysql进行查询而mysql承受不了太大压力,就会出现雪崩Redis穿透:跳过我们预想的数据本来先从Redis里面查某个数据但是Redis中没有这个数据那么请求就会始终从mysql中查询Redis没有起到作用Redis雪崩和Redis穿透的根本原因是:开发时,开发人员并未考虑到这些问题。Redis雪崩和Redis穿透的性质:大量

    2022年9月14日
    0
  • make命令和makefile文件

    make命令和makefile文件的结合提供了一个在项目管理领域十分强大的工具,它不仅常被用于控制源代码的编译,而且还用于手册页的编写以及将应用程序安装到目标目录。makefile文件由一组依赖关系

    2021年12月28日
    48

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

关注全栈程序员社区公众号