1. <!doctype html>
  2. <html>
  3.     <head>
  4.         <meta charset="utf-8">
  5.         <meta name="description" content="">
  6.         <meta name="viewport" content="width=device-width, initial-scale=1">
  7.  
  8.         <script>
  9.  
  10.  // es5里面的类  
  11.  
  12. //1.最简单的类
  13.         // function Person(){
  14.  
  15.         //     this.name='张三';
  16.         //     this.age=20;
  17.         // }
  18.         // var p=new Person();
  19.         // alert(p.name);
  20.  
  21. //2、构造函数和原型链里面增加方法
  22.  
  23.         // function Person(){
  24.  
  25.         //     this.name='张三';  /*属性*/
  26.         //     this.age=20;
  27.         //     this.run=function(){
  28.  
  29.         //         alert(this.name+'在运动');
  30.         //     }
  31.  
  32.         // }
  33.         // //原型链上面的属性会被多个实例共享   构造函数不会
  34.         // Person.prototype.sex="男";
  35.         // Person.prototype.work=function(){
  36.         //     alert(this.name+'在工作');
  37.  
  38.         // }
  39.         // var p=new Person();
  40.         // // alert(p.name);
  41.         // // p.run();
  42.         // p.work();
  43.  
  44. //3类里面的静态方法
  45.  
  46.         // function Person(){
  47.  
  48.         //     this.name='张三';  /*属性*/
  49.         //     this.age=20;
  50.         //     this.run=function(){  /*实例方法*/
  51.  
  52.         //         alert(this.name+'在运动');
  53.         //     }
  54.  
  55.         // }
  56.  
  57.         // Person.getInfo=function(){
  58.  
  59.         //     alert('我是静态方法');
  60.         // }
  61.         // //原型链上面的属性会被多个实例共享   构造函数不会
  62.         // Person.prototype.sex="男";
  63.         // Person.prototype.work=function(){
  64.         //     alert(this.name+'在工作');
  65.  
  66.         // }
  67.         // var p=new Person();
  68.         // p.work();
  69.  
  70.         // //调用静态方法
  71.         // Person.getInfo();
  72.  
  73. // 4、es5里面的继承   对象冒充实现继承
  74.  
  75.     //    function Person(){
  76.     //         this.name='张三';  /*属性*/
  77.     //         this.age=20;
  78.     //         this.run=function(){  /*实例方法*/
  79.     //             alert(this.name+'在运动');
  80.     //         }
  81.  
  82.     //     }
  83.     //     Person.prototype.sex="男";
  84.     //     Person.prototype.work=function(){
  85.     //          alert(this.name+'在工作');
  86.  
  87.     //     }
  88.  
  89.     //     //Web类 继承Person类   原型链+对象冒充的组合继承模式
  90.  
  91.     //     function Web(){
  92.  
  93.     //         Person.call(this);    /*对象冒充实现继承*/
  94.     //     }
  95.  
  96.     //     var w=new Web();
  97.     //    // w.run();  //对象冒充可以继承构造函数里面的属性和方法
  98.  
  99.     //     w.work();  //对象冒充可以继承构造函数里面的属性和方法   但是没法继承原型链上面的属性和方法
  100.  
  101. // 5、es5里面的继承   原型链实现继承
  102.  
  103.     //    function Person(){
  104.     //         this.name='张三';  /*属性*/
  105.     //         this.age=20;
  106.     //         this.run=function(){  /*实例方法*/
  107.     //             alert(this.name+'在运动');
  108.     //         }
  109.  
  110.     //     }
  111.     //     Person.prototype.sex="男";
  112.     //     Person.prototype.work=function(){
  113.     //          alert(this.name+'在工作');
  114.  
  115.     //     }
  116.  
  117.     //     //Web类 继承Person类   原型链+对象冒充的组合继承模式
  118.  
  119.     //     function Web(){
  120.  
  121.     //     }
  122.  
  123.     //    Web.prototype=new Person();   //原型链实现继承
  124.     //    var w=new Web();
  125.     //     //原型链实现继承:可以继承构造函数里面的属性和方法 也可以继承原型链上面的属性和方法
  126.     //     //w.run();
  127.  
  128.     //     w.work();
  129.  
  130. // 6、 原型链实现继承的 问题？
  131.  
  132.     //    function Person(name,age){
  133.     //         this.name=name;  /*属性*/
  134.     //         this.age=age;
  135.     //         this.run=function(){  /*实例方法*/
  136.     //             alert(this.name+'在运动');
  137.     //         }
  138.  
  139.     //     }
  140.     //     Person.prototype.sex="男";
  141.     //     Person.prototype.work=function(){
  142.     //          alert(this.name+'在工作');
  143.  
  144.     //     }
  145.  
  146.     //    var p=new Person('李四',20);
  147.     //    p.run();
  148.  
  149.     // function Person(name,age){
  150.     //         this.name=name;  /*属性*/
  151.     //         this.age=age;
  152.     //         this.run=function(){  /*实例方法*/
  153.     //             alert(this.name+'在运动');
  154.     //         }
  155.  
  156.     // }
  157.     // Person.prototype.sex="男";
  158.     // Person.prototype.work=function(){
  159.     //         alert(this.name+'在工作');
  160.  
  161.     // }
  162.  
  163.     // function Web(name,age){
  164.  
  165.     // }
  166.  
  167.     // Web.prototype=new Person();
  168.  
  169.     // var w=new Web('赵四',20);   //实例化子类的时候没法给父类传参
  170.  
  171.     // w.run();
  172.  
  173.     // // var w1=new Web('王五',22);
  174.  
  175. //7.原型链+对象冒充的组合继承模式
  176.  
  177. //   function Person(name,age){
  178. //             this.name=name;  /*属性*/
  179. //             this.age=age;
  180. //             this.run=function(){  /*实例方法*/
  181. //                 alert(this.name+'在运动');
  182. //             }
  183.  
  184. //     }
  185. //     Person.prototype.sex="男";
  186. //     Person.prototype.work=function(){
  187. //             alert(this.name+'在工作');
  188.  
  189. //     }
  190.  
  191. //     function Web(name,age){
  192.  
  193. //         Person.call(this,name,age);   //对象冒充继承   实例化子类可以给父类传参
  194. //     }
  195.  
  196. //     Web.prototype=new Person();
  197.  
  198. //     var w=new Web('赵四',20);   //实例化子类的时候没法给父类传参
  199.  
  200. //     // w.run();
  201. //     w.work();
  202.  
  203. //     // var w1=new Web('王五',22);
  204.  
  205. //8、原型链+对象冒充继承的另一种方式
  206.  
  207.    function Person(name,age){
  208.             this.name=name;  /*属性*/
  209.             this.age=age;
  210.             this.run=function(){  /*实例方法*/
  211.                 alert(this.name+'在运动');
  212.             }
  213.  
  214.     }
  215.     Person.prototype.sex="男";
  216.     Person.prototype.work=function(){
  217.             alert(this.name+'在工作');
  218.  
  219.     }
  220.  
  221.     function Web(name,age){
  222.  
  223.         Person.call(this,name,age);   //对象冒充继承  可以继承构造函数里面的属性和方法、实例化子类可以给父类传参
  224.     }
  225.  
  226.     Web.prototype=Person.prototype;
  227.  
  228.     var w=new Web('赵四',20);   //实例化子类的时候没法给父类传参
  229.  
  230.      w.run();
  231.     // w.work();
  232.  
  233.     // var w1=new Web('王五',22);
  234.  
  235.         </script>
  236.  
  237.     </head>
  238.     <body>
  239.  
  240.     </body>
  241. </html>

Typescript中的类 Es5中的类和静态方法和继承（原型链继承、对象冒充继承、原型链+对象冒充组合继承）的更多相关文章

  1. 《前端之路》- TypeScript (三) ES5 中实现继承、类以及原理

    目录 一.先讲讲 ES5 中构造函数(类)静态方法和多态 1-1 JS 中原型以及原型链 例子一 1-2 JS 中原型以及原型链中,我们常见的 constructor.prototype.**prot ...

  2. Typescript 学习笔记四：回忆ES5 中的类

    中文网:https://www.tslang.cn/ 官网:http://www.typescriptlang.org/ 目录: Typescript 学习笔记一:介绍.安装.编译 Typescrip ...

  3. ES5中的类与继承

    最近在重新复习TypeScript,看到类这块的时候自然会和ES5中的类写法进行对比加深印象. 发现ES5的类与继承一些细节还是挺多的,时间久了容易忘记,特此记录下. 首先是ES5的类定义,这没什么好 ...

  4. Es5中的类和静态方法 继承

    Es5中的类和静态方法 继承(原型链继承.对象冒充继承.原型链+对象冒充组合继承) // es5里面的类 //1.最简单的类 // function Person(){ // this.name='张 ...

  5. ES6中的类继承和ES5中的继承模式详解

    1.ES5中的继承模式 我们先看ES5中的继承. 既然要实现继承,首先我们得要有一个父类. Animal.prototype.eat = function(food) { console.log(th ...

  6. ES6中。类与继承的方法，以及与ES5中的方法的对比

    // 在ES5中,通常使用构造函数方法去实现类与继承 // 创建父类 function Father(name, age){ this.name = name; this.age = age; } F ...

  7. ES5中的类

    之前小编对于类和类的基本特征(所谓的封装.继承.多态)理解一直不是很到位,同时在实际项目应用中也用的比较少,今天小编就结合ES5中的基本用法和大家聊聊,希望小伙伴会在这篇文章有属于自己的收获,并能够在 ...

  8. 在ES5中模拟类

    1.Object.create()方法创建一个新对象,使用现有的对象来提供新创建的对象的__proto__. var _this = Object.create(fn.prototype);这句代码的 ...

  9. "检索COM类工厂中 CLSID为 {00024500-0000-0000-C000-000000000046}的组件时失败，原因是出现以下错误: 80070005" 问题的解决

    一.故障环境 Windows 2008 .net 3.0 二.故障描述 ​ 调用excel组件生成excel文档时页面报错.报错内容一大串,核心是"检索COM类工厂中 CLSID为 {000 ...

随机推荐

  1. [牛客网 -leetcode在线编程 -02] minimum-depth-of-binary-tree -树的最短深度

    题目描述 题目描述 Given a binary tree, find its minimum depth.The minimum depth is the number of nodes along ...

  2. [转]Linux网络 - 数据包的接收过程

    转, 原文: https://segmentfault.com/a/1190000008836467 ------------------------------------------------- ...

  3. 什么是IAP？如何实现IAP？

    发布时间:2008-09-01 来源:computer00   分享到:   IAP是In Application Programming的首字母缩写,IAP是用户自己的程序在运行过程中对User F ...

  4. CSS hack整理

    浏览器的兼容性一直是个头疼的问题,使用“欺骗”技术可使各个浏览器效果一致,花了些时间整理了各个浏览器的HACK,主要包括IE系列和最新版本的Chrome.Safari.Firefox. Opera,比 ...

  5. NOIP2018模板总结【数学】

    质因数分解 //质因数分解 int prime[MAXN], tim[MAXN], cnt; void Divide(int N) { printf("%d = ", N); fo ...

  6. 堆优化/zkw线段树优化 dijkstra

    #include <bits/stdc++.h> using namespace std; const int MAXN = 100005; const int MAXM = 200005 ...

  7. jumpserver 安装

    # CentOS 7 安装jumpserver $ setenforce 0 # 可以设置配置文件永久关闭$ systemctl stop iptables.service$ systemctl st ...

  8. Hive ACID和事务表支持详解

    一.ACID介绍 ACID就是常见数据库事务的四大特性:Atomicity(原子性).Consistency(一致性).Isolation(隔离性).Durability(持久性). 在Hive 0. ...

  9. YAML_09 脚本调用变量+触发器

    ansible]# vim adhttp2.yml --- - hosts: cache   remote_user: root   vars:     server: httpd   tasks: ...

  10. YAML_01 YAML语法和playbook写法

    ansible的playbook采用yaml语法,它简单地实现了json格式的事件描述.yaml之于json就像markdown之于html一样,极度简化了json的书写.在学习ansible pla ...