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


相关推荐

  • Android 原生系统,手机rom下载网站

    Android 原生系统,手机rom下载网站Android,原生系统,手机rom,下载网站

    2022年6月19日
    67
  • 高级java面试题及答案_java高级面试题大汇总

    高级java面试题及答案_java高级面试题大汇总一、参考资料不容错过的Java高级面试题_帝都的雁的博客-CSDN博客_java高级面试题java面试题汇总(上)_Oliverfly1的博客-CSDN博客_java面试题史上最全的中高级JAVA工程师面试题汇总有哪些?-知乎DevBooks:2021面试题,Java面试题、JVM面试题、多线程面试题、并发编程、设计模式面试题、SpringBoot面试题、SpringCloud面试题、MyBatis面试题-Gitee.com2021年Java高级面试题总结_m0_57699

    2022年8月20日
    10
  • linux终端运行w3m,W3M – 一款终端浏览器

    linux终端运行w3m,W3M – 一款终端浏览器w3m 是一个基于文本的网页浏览器 支持多种操作系统 在命令行终端可以很好的支持中文 即使在没有鼠标支持的情况下也可以检查网页的输出 本文列出常用的快捷键 如果你浏览的关注点是文字 而网页上又有很多干扰你的广告 在终端下使用 w3m 浏览将是一个很好的选择 w3m 可以自动为你去除哪些无聊的广告 专注于文字本身 而且超链接的跳转也很方便 看下文本浏览效果 示例如下 以浏览 https linux265

    2025年8月25日
    1
  • 课后作业2

    课后作业2

    2021年6月13日
    92
  • java文档注释报错,java文档注释主要使用方法「建议收藏」

    java文档注释报错,java文档注释主要使用方法「建议收藏」一、java包含哪些注释1.//用于单行注释。2./*…*/用于多行注释,从/*开始,到*/结束,不能嵌套。3./**…*/则是为支持jdk工具javadoc.exe而特有的注释语句。这个也就是我们所知的文档注释在命名控制台:使用命令行在目标文件所在目录输入javadoc+文件名.java。二、文档注释的关键名词/**标记用于…

    2025年6月17日
    2
  • Maven–如何下载JSONObject相关依赖架包

    Maven–如何下载JSONObject相关依赖架包一、开发场景Java开发当中经常需要Json格式的数据,这就用到JSONObject类,本文章只提供以下两种JSONObject对应架包的下载方式。com.alibaba.fastjson.JSONObject(依赖1个架包fastjson-1.2.28.jar)net.sf.json.JSONObject(依赖6个架包commons-beanutils-1.9.3.jar、commons-c…

    2022年7月12日
    66

发表回复

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

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