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)
全栈程序员-站长的头像全栈程序员-站长


相关推荐

  • nbsp啥意思_UG拆分体

    nbsp啥意思_UG拆分体转载:http://blog.csdn.net/olei_oleitao/article/details/7919307 一、DM36X的BOOT过程介绍DM36x的BOOT过程和DM6446、DM6467完全是一样的,因为都是ARM926EJS架构,里边都有一个RBL,这RBL在芯片出厂的时候都烧写在ROM里,芯片上电复位后RBL在运行,然后读取BOOTMODE引脚的电平状态,决定

    2022年8月13日
    3
  • do you know what i mean_do you know what

    do you know what i mean_do you know whatOriginalLinkQ: “HowdoyouknowGodisreal?” -GregoryM.A: Thisisthequestionthateverysinglepersonatonepoint(hopefully)intheirlifetimewillask.Mostpeoplewillprobablyaskitmanyt

    2022年10月8日
    0
  • intellij idea快速生成main方法、for循环、out输出

    intellij idea快速生成main方法、for循环、out输出点击这里查看<intellijidea使用教程汇总篇>1、System.out.println()输入sout,按下enter键,生成System.out.println()方法.sout—>soutv=System.out.println("变量名 = " + 变量)soutp—>System.out.println("")2、public…

    2022年5月6日
    161
  • UAT环境[通俗易懂]

    UAT环境[通俗易懂]公司上班,会给你数据库账号,SVN等一系列配置。在企业级软件的测试过程中,经常会划分为三个阶段——单元测试,SIT和UAT,如果开发人员足够,通常还会在SIT之前引入代码审查机制(CodeReview)来保证软件符合客户需求且流程正确。下面简单介绍一下SIT和UAT的基本情况。SIT(SystemIntegrationTesting)系统集成测试,也叫做集成测试,是软件测试的一个术语,…

    2022年9月30日
    1
  • HTML中的setCapture和releaseCapture

    HTML中的setCapture和releaseCapturesetCapture函数的作用就是将后续的mouse事件都发送给这个对象,releaseCapture就是将鼠标事件还回去,由document、window、object之类的自行来处理。这样就保证了在拖动的过程中,不会由于经过了其它的元素而受到干扰。另外,还有一个很重要的事情是,在Win32上,mousemove的事件不是一个连续的,也就是说,并不是我们每次移动1px的鼠标指针,就会发…

    2022年6月4日
    26
  • Electron那些事10:本地数据库sqlite

    Electron那些事10:本地数据库sqlite【前言】上一节讲了本地日志,本地数据(文件)的部分,详见:Electron那些事09:本地数据_uikoo9的博客-CSDN博客虽然本地日志可以记录日志信息,本地数据可以记录简单的配置文件,但是像一些复杂的业务,需要维护一个本地数据库进行查询,本节讲一下本地数据库sqlite【sqlite】sqlite是有名的本地数据库,在很多系统中都有应用,SQLiteHomePage当然也有nodejs的版本,一般配套和electron使用,sqlite3-np…

    2022年5月11日
    57

发表回复

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

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