TypeScript 第三讲 ———— TypeScript 类的定义 继承 类的修饰符

前言

在讲typescript类之前，我们先了解一下JavaScript中的类的定义，以及使用，可以对比两者的不同。

这部分属于JavaScript高级部分

一、创建JavaScript对象

对象是一种特殊的数据。对象拥有属性和方法。

创建新对象有两种不同的方法：

• 定义并创建对象的实例
• 使用函数来定义对象，然后创建新的对象实例

第一种创建直接的实例：

person = new Object();
person.name="张三";
person.age=50;
person.color="blue"; 

第二种方式：

function person(name, age, eyecolor)
{
    this.name=name;
    this.age=age;
    this.eyecolor=eyecolor;
}
var myFather=new person("张三",50,"blue");

二、JavaScript 类

JavaScript 是面向对象的语言，但 JavaScript 不使用类。

在 JavaScript 中，不会创建类，也不会通过类来创建对象（就像在其他面向对象的语言中那样）。

JavaScript 基于 prototype，而不是基于类的。

function Person() {
  this.name = "张三"; //属性
  this.age = 20;
}
var p = new Person();
alert(p.name);

三、JavaScript prototype（原型对象）

所有的 JavaScript 对象都会从一个 prototype（原型对象）中继承属性和方法。

我们知道在一个已存在的对象构造器中是不能添加新的属性的

function Person(first, age, eyecolor) {
  this.Name = first;this.age = age;
  this.eyeColor = eyecolor;
}

要添加一个新的属性需要在在构造器函数中添加：

function Person(first, age, eyecolor) {
  this.Name = first;
  this.age = age;
  this.eyeColor = eyecolor;
  this.nationality = "English";
}

我们也可以使用 prototype 属性就可以给对象的构造函数添加新的方法：

function Person() {
  this.name = "张三"; //属性
  this.age = 20;
}
//使用原型链增加属性和方法
//原型链上面的属性会被多个实例共享
Persion.prototype.sex = "男";
Persion.prototype.work = function(){
   alert(this.name+"在工作");
}

var p = new Person();
alert(p.name);

四、类里面的静态方法

function Person() {
  this.name = "张三"; //属性
  this.age = 20;

  this.run = function(){
     alert(this.name+"在运动");
  }
}
//静态方法
Person.getInFo = function(){
       alert("我是静态方法");
}

//使用原型链增加属性和方法
//原型链上面的属性会被多个实例共享
Persion.prototype.sex = "男";
Persion.prototype.work = function(){
   alert(this.name+"在工作");
}

var p = new Person();
alert(p.name);

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

五、JavaScript继承

1.对象冒充实现继承

function Person() {
  this.name = "张三"; //属性
  this.age = 20;

  this.run = function(){
     alert(this.name+"在运动");
  }
}

Persion.prototype.sex = "男";
Persion.prototype.work = function(){
   alert(this.name+"在工作");
}
function web(){
 Persion.call(this);//这种方法叫：对象冒充实现继承
}
var w = new web();
w.run();//对象冒充可以继承构造函数里的属性和方法，但没法继承原型链上面的属性和方法

对象冒充可以继承构造函数里的属性和方法，但没法继承原型链上面的属性和方法。

2.原型链实现继承

function Person() {
  this.name = "张三"; //属性
  this.age = 20;

  this.run = function(){
     alert(this.name+"在运动");
  }
}

Persion.prototype.sex = "男";
Persion.prototype.work = function(){
   alert(this.name+"在工作");
}
function web(){
 
}
web.prototype = new Person();//原型链实现继承
ver w = mew web();
w.run();
w.word();

原型链既可以继承构造函数里的属性和方法，又可以继承原型链上面的属性和方法。

3.原型链+构造函数组合=实现继承

function Person(name, age) {
  this.name = name; //属性
  this.age = age;

  this.run = function(){
     alert(this.name+"在运动");
  }
}

Persion.prototype.sex = "男";
Persion.prototype.work = function(){
   alert(this.name+"在工作");
}
function web(name, age){
    Person.call(this,name,age)//对象冒充继承    实例化子类可以给父类传参
}
web.prototype = new Person();//原型链实现继承
ver w = mew web("旺旺", 20);
w.run();

web.prototype = Person.pertotype;

六、typescript中的类

TypeScript 是面向对象的 JavaScript。

类描述了所创建的对象共同的属性和方法。

TypeScript 支持面向对象的所有特性，比如 类、接口等。

class Person{ 
    // 属性 
    name: string; 
 
    // 构造函数 
    constructor(n: string) { 
        this.name = n
    }  
 
    // 方法 
    run():void { 
        console.log(" "+this.engine) 
    } 
}

// 创建实例化对象

var p = new Person("张三");

// 访问方法

p.run();

• 字段 − 字段是类里面声明的变量。字段表示对象的有关数据。

• 构造函数 − 类实例化时调用，可以为类的对象分配内存。

• 方法 − 方法为对象要执行的操作。

• 创建实例化对象 - 使用 new 关键字来实例化类的对象。
• 方法 - 类中的字段属性和方法可以使用 . 号来访问

七、typescript类的继承

TypeScript 支持继承类，即我们可以在创建类的时候继承一个已存在的类，这个已存在的类称为父类，继承它的类称为子类。

类继承使用关键字 extends，子类除了不能继承父类的私有成员(方法和属性)和构造函数，其他的都可以继承。

TypeScript 一次只能继承一个类，不支持继承多个类，但 TypeScript 支持多重继承（A 继承 B，B 继承 C）。

实例

class Person{ 
  
    name: string; 
 
    constructor(n: string) { 
        this.name = n
    }  
 
    run():string{ 
        console.log(this.engine + "在运动 ") 
    } 
}
//使用extends  继承
class Web extends  Person() {

       constructor(name: string) { 
        
           super(name);
      } 
　　　　//子类中的方法
　　　　run():string{ 
　　　　　　　console.log(this.engine + "在运动 ") 
　　　　} 
}

var w = new Web("张三");

p.run();

八、typescript访问控制修饰符

TypeScript 中，可以使用访问控制符来保护对类、变量、方法和构造方法的访问。TypeScript 支持 3 种不同的访问权限。

• public（默认） : 公有，可以在任何地方被访问。

• protected : 受保护，可以被其自身以及其子类和父类访问。

• private : 私有，只能被其定义所在的类访问。

　　属性如果不加修饰符，默认为public

class Encapsulate { 
   str1:string = "hello" 
   private str2:string = "world" 
}
 
var obj = new Encapsulate() 
console.log(obj.str1)     // 可访问 
console.log(obj.str2)   // 编译错误， str2 是私有的

在子类中：

class Encapsulate { 
   str1:string = "hello" 
   private str2:string = "world" 
}
class Wen extends Encapsulate (){

    console.log(obj.str2)  // 可访问 

}

好啦，本节就结束了，不懂得多看看！