typescript - 4.es5与typescript的类与继承

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)ES5静态方法

function Person() {
    this.name = '张三';  /*属性*/
    this.age = 20;
    this.run = function () {  /*实例方法*/
        alert(this.name + '在运动');
    }
}

Person.getInfo = function () {
    alert('我是静态方法');
}

//调用静态方法
Person.getInfo();

(4)es5里面的继承 对象冒充实现继承

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

    }

    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)原型链+对象冒充继承的另一种方式

Web.prototype=new Person();的另一种写法

Web.prototype=Person.prototype;

Typescript中的类

原文地址:https://www.cnblogs.com/tangge/p/10829077.html

时间: 2024-08-29 23:46:51

typescript - 4.es5与typescript的类与继承的相关文章

How Javascript works (Javascript工作原理) (十五) 类和继承及 Babel 和 TypeScript 代码转换探秘

个人总结:读完这篇文章需要15分钟,文章主要讲解了Babel和TypeScript的工作原理,(例如对es6 类的转换,是将原始es6代码转换为es5代码,这些代码中包含着类似于 _classCallCheck 和 _createClass这样的函数,而这些函数已经在Babel和TypeScript的标准库中预先定义好了,然后进行处理). 顺便温习了Object.create这个方法,  比如有一个obj:{name:'是ho',f:function(){alert(1)}} var a = O

JavaScript是如何工作的:深入类和继承内部原理 + Babel和TypeScript之间转换

现在构建任何类型的软件项目最流行的方法这是使用类.在这篇文章中,探讨用 JavaScript 实现类的不同方法,以及如何构建类的结构.首先从深入研究原型工作原理,并分析在流行库中模拟基于类的继承的方法. 接下来是讲如何将新的语法转制为浏览器识别的语法,以及在 Babel 和 TypeScript 中使用它来引入ECMAScript 2015类的支持.最后,将以一些在 V8 中如何本机实现类的示例来结束本文. 概述 在 JavaScript 中,没有基本类型,创建的所有东西都是对象.例如,创建一个

TypeScript学习笔记(四) - 类和接口

本篇将介绍TypeScript里的类和接口. 与其他强类型语言类似,TypeScript遵循ECMAScript 2015标准,支持class类型,同时也增加支持interface类型. 一.类(class) 下面是一个类的基本定义方式: 1 class User { 2 name: string; 3 constructor(_name: string) { 4 this.name = _name; 5 } 6 7 sayHello(): string { 8 return `Hello,${

TypeScript笔记【2】类、继承、多态

和C++,C#那些可以面向对象的语言那样,TS也可以面向对象. 与JS相比,TS更像传统的面向对象语言(如Java,C#).所以,TS有类. 一.类 定义一个类,要用关键字[class]. class Animai {     name: string     eat(): void {         alert(this.name + '吃');     }     sleep(): void {         alert(this.name + '睡觉')     }     breat

转载:TypeScript 简介与《TypeScript 中文入门教程》

简介 TypeScript是一种由微软开发的自由和开源的编程语言.它是JavaScript的一个超集,而且本质上向这个语言添加了可选的静态类型和基于类的面向对象编程.安德斯·海尔斯伯格,C#的首席架构师,已工作于TypeScript的开发. TypeScript扩展了 JavaScript 的句法,所以任何现有的JavaScript程序可以不加改变的在TypeScript下工作.TypeScript是为大型应用之开发而设计,而编译时它产生 JavaScript 以确保兼容性. TypeScrip

TypeScript入门五:TypeScript的接口

TypeScript接口的基本使用 TypeScript函数类型接口 TypeScript可索引类型接口 TypeScript类类型接口 TypeScript接口与继承 一.TypeScript接口的基本使用 1.1定义TypeScript接口的指令(interface) 接口让我们想到的第一个短语就是(API).比如日常我们所说的调用某某程序的API一般都是跨应用的接口,如别的网站的或者APP的接口:还有我们每天都是用的编程语言的指令和内置的方法及属性,这些可以叫做编程语言的接口:还有令我们既

TypeScript入门三:TypeScript函数类型

TypeScript函数类型 TypeScript函数的参数 TypeScript函数的this与箭头函数 TypeScript函数重载 一.TypeScript函数类型 在上一篇博客中已经对声明TypeScript类型变量已经做了初步的解析,这里先回顾以下: 1 //声明函数 2 function add1(x:number,y:number):number{ 3 return x+y; 4 } 5 6 let add2 = function(x:number,y:number):number

TypeScript入门七:TypeScript的枚举

关于枚举 数字枚举 字符串枚举 异构枚举 计算的和常量成员 运行时的枚举与反向映射 常量枚举与外部枚举 一.关于枚举 枚举:一个集的枚举是列出某些有穷序列集的所有成员的程序,或者是一种特定类型对象的计数. 在定义中可以看到这些关键词:有穷序列集.成员.类型对象.计数. 在这些关键字中可以了解到枚举是一组有穷数据的集合:这些数据或者类型对象被当成这个集合的成员:计数的话我的理解有两种:前面提到有序集那么就可以使用有序的数字对数据进行标识,而前面提到的有穷就说明这些数据量是可以被计算的. 根据这些定

[TypeScript] Installing TypeScript and Running the TypeScript Compiler (tsc)

This lesson shows you how to install TypeScript and run the TypeScript compiler against a .ts file from the command line. install: npm install -g typescript tsc -v // version app.ts: class Person{} RUN: tsc app.ts You will see the js file with the sa