<!doctype html>

<html>

    <head>

        <meta charset="utf-8">

        <meta name="description" content="">

        <meta name="viewport" content="width=device-width, initial-scale=1">

        <script>

 // es5里面的类  

//1.最简单的类

        // function Person(){

        //     this.name='张三';

        //     this.age=20;

        // }

        // var p=new Person();

        // alert(p.name);

//2、构造函数和原型链里面增加方法

        // function Person(){

        //     this.name='张三';  /*属性*/

        //     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();

//3类里面的静态方法

        // 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();

        // p.work();

        // //调用静态方法

        // Person.getInfo();

// 4、es5里面的继承   对象冒充实现继承

    //    function Person(){

    //         this.name='张三';  /*属性*/

    //         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();  //对象冒充可以继承构造函数里面的属性和方法   但是没法继承原型链上面的属性和方法

// 5、es5里面的继承   原型链实现继承

    //    function Person(){

    //         this.name='张三';  /*属性*/

    //         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();

// 6、 原型链实现继承的 问题？

    //    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+'在工作');

    //     }

    //    var p=new Person('李四',20);

    //    p.run();

    // 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('赵四',20);   //实例化子类的时候没法给父类传参

    // w.run();

    // // var w1=new Web('王五',22);

//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>

    </head>

    <body>

    </body>

</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. Problem G: STL——整理唱片(list的使用)

    #include<iostream> #include<list> #include<iterator> #include<algorithm> usi ...

  2. C#：抽象类PK密封类

    最近在看关于C#的书,看到了抽象类和抽象方法,另外还看到了密封类和密封方法,那么二者有什么联系又有什么区别,我把最近的收获分享给大家! 1.抽象类和抽象方法: ·C#使用abstract关键字,将类或 ...

  3. IOT设备通讯，MQTT物联网协议，MQTTnet

    一.IOT设备的特性 硬件能力差(存储能力基本只有几MB,CPU频率低连使用HTTP请求都很奢侈) 系统千差万别(Brillo,mbedOS,RIOT等) 如使用电池供电,电量消耗敏感 如果是小设备, ...

  4. 案例:3D切割轮播图

    一.3d转换 3D旋转套路:顺着轴的正方向看,顺时针旋转是负角度,逆时针旋转是正角度 二.代码 <!DOCTYPE html> <html lang="en"&g ...

  5. 如何重置Portal for ArcGIS、ArcGIS Server管理员密码

    忘记管理员密码是ArcGIS系统管理员司空见惯的情况.每次为了找回站点管理员密码,用户经常要测试多次.有没有一种快捷的解决方案呢?答案是有的. 下面将分别介绍如何重置Portal for ArcGIS ...

  6. （25）打鸡儿教你Vue.js

    vue-cli // 全局安装 vue-cli npm install --global vue-cli // 创建一个基于 webpack 模板的新项目 vue init webpack my-pr ...

  7. 金蝶kis 16.0专业版-破解01

    Kingdee.KIS.MobAppSer>MainViewModel 经过反混淆后,找到导入LIcense文件后的验证函数. 下面仅需进行逆向生成即可,为什么一定要进行生成lic文件方式进行破 ...

  8. BurpSuite经常拦截firefox报文如success.txt的解决办法

    因为工作需要经常使用Burp对收发报文进行检测,平时习惯使用火狐浏览器,但是火狐浏览器经常进行一些登录状态的检测,导致Burp拦截中出现大量的火狐报文,如http://detectportal.fir ...

  9. C语言 memset函数及其用法

    定义 void *memset(void *s, int c, unsigned long n); 描述 将指针变量 s 所指向的前 n 字节的内存单元用一个“整数” c 替换,注意 c 是 int ...

  10. RNN梯度消失和爆炸的原因 以及 LSTM如何解决梯度消失问题

    RNN梯度消失和爆炸的原因 经典的RNN结构如下图所示: 假设我们的时间序列只有三段,  为给定值,神经元没有激活函数,则RNN最简单的前向传播过程如下: 假设在t=3时刻,损失函数为  . 则对于一 ...