TypeScript类前奏之ES5中的类

关注

原创最新推荐文章于 2026-08-19 15:57:36 发布 266 阅读 AI 写同款· GEO 优化 ›

Node.js 16+升级指南：ESM、OpenSSL 3.0与LTS工程化实践 Node.js 是 JavaScript 运行时的核心基础，其版本演进直接决定现代前端与全栈项目的工程能力边界。从 ES Modules 原生支持到 V8 引擎深度优化，从 OpenSSL 3.0 安全协议升级到 npm/pnpm 对 exports 字段的完整实现，Node.js 16+ 已成为支撑 Next.js、Vite、Astro 等新一代工具链的最低兼容基线。技术价值体现在模块加载性能提升22%、TLS 1.3默认启用、内存占用下降15%以上，广泛应用于微服务API、实时音视频、CI/CD 构建流阅读详情

TypeScript类

//es5中的类：众所周知，在es5中是用构造函数来定义一个类
function Person () {
  this.name = 'ag'； // 属性
  this.age = 23；
  // 属性方法
  this.run = function () {
    console.log(this.name + '在跑步')
  }
}
// 静态方法
Person.staticWork = function () {
  console.log('静态方法在工作')
}
Person.prototype.sex = '男' // 原型链上属性
Person.prototype.work = function () { // 原型链上方法
  console.log(this.name + '在工作')
}
var person = new Person()
person.run()
console.log(person.age)
Person.staticWork()
person.work()


//es5中的继承：原型链+对象冒充的组合继承模式
function Student(){
    Person.call(this);
}

var student = new Student();
student.run();//对象冒充可以继承里面的属性和方法
student.work(); //会报错，对象冒充无法继承原型链上的属性和方法

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

原型链实现继承：

原型链继承
function Person () {
  this.name = 'ag'； // 属性
  this.age = 23；
  // 属性方法
  this.run = function () {
    console.log(this.name + '在跑步')
  }
}
// 静态方法
Person.staticWork = function () {
  console.log('静态方法在工作')
}
Person.prototype.sex = '男' // 原型链上属性
Person.prototype.work = function () { // 原型链上方法
  console.log(this.name + '在工作')
}
var person = new Person()
person.run()
console.log(person.age)
Person.staticWork()
person.work()


//原型链继承模式
function Student(){
 }

Student.prototype = new Person(); //原型链继承
var student = new Student();
student.run();
student.work();

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

//原型链继承
function Person (name,age) {
  this.name = name； // 属性
  this.age = age；
  // 属性方法
  this.run = function () {
    console.log(this.name + '在跑步')
  }
}
// 静态方法
Person.staticWork = function () {
  console.log('静态方法在工作')
}
Person.prototype.sex = '男' // 原型链上属性
Person.prototype.work = function () { // 原型链上方法
  console.log(this.name + '在工作')
} 


//原型链继承模式
function Student(){
 }

Student.prototype = new Person(); //原型链继承
var student = new Student('赵四',23);
student.run(); 
student.work(); 
//undefined在跑步
//undefined在工作

构造函数实现继承的时候，实例化子类的时候没办法给父类传参.

为了解决以上问题，引出：

原型链+构造函数的组合继承模式

很简单就是将以上两者组合起来

//原型链继承
function Person (name,age) {
  this.name = name; // 属性
  this.age = age;
  // 属性方法
  this.run = function () {
    console.log(this.name + '在跑步')
  }
}
// 静态方法
Person.staticWork = function () {
  console.log('静态方法在工作')
}
Person.prototype.sex = '男' // 原型链上属性
Person.prototype.work = function () { // 原型链上方法
  console.log(this.name + '在工作')
} 


//原型链继承模式
function Student(name,age){
  Person.call(this,name,age); //对象冒充，可以继承构造函数里的属性和方法 
 }

Student.prototype = new Person(); //原型链继承
var student = new Student('赵四',23);
student.run(); 
student.work();
//赵四在跑步
//赵四在工作

原型链+对象冒充的另外一种方式

//原型链继承
function Person (name,age) {
  this.name = name; // 属性
  this.age = age;
  // 属性方法
  this.run = function () {
    console.log(this.name + '在跑步')
  }
}
// 静态方法
Person.staticWork = function () {
  console.log('静态方法在工作')
}
Person.prototype.sex = '男' // 原型链上属性
Person.prototype.work = function () { // 原型链上方法
  console.log(this.name + '在工作')
} 


//原型链继承模式
function Student(name,age){
  Person.call(this,name,age); //对象冒充，可以继承构造函数里的属性和方法 
 }

Student.prototype = Person.prototype; //原型链继承
var student = new Student('赵四',23);
student.run(); 
student.work();
//赵四在跑步
//赵四在工作

原理是将

Student.prototype = new Person();

改为：

Student.prototype = Person.prototype;