前言
在讲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) // 可访问 }
好啦，本节就结束了，不懂得多看看！