JavaScript类和构造函数的区别

小蓝 • 2024-11-13 06:06 • 编程

一、jsclass和构造函数的定义

JavaScript是一种面向对象编程语言，它有两种创建类的方式，jsclass和构造函数。jsclass是一种ES6引入的语法，用来定义一个类，构造函数则是JavaScript早期的一种方式来创建类。

    
class Person {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }
}

    
function Person(name, age) {
    this.name = name;
    this.age = age;
}

二、jsclass和构造函数的继承

jsclass的继承使用`extends`关键字来实现，子类调用父类的构造函数使用`super`关键字。构造函数的继承需要使用`call`或`apply`来调用父类的构造函数。

    
class Student extends Person {
  constructor(name, age, school) {
    super(name, age);
    this.school = school;
  }
}

    
function Student(name, age, school) {
    Person.call(this, name, age);
    this.school = school;
}

三、jsclass和构造函数的原型

jsclass和构造函数的原型都可以添加方法和属性。jsclass使用`prototype`关键字，构造函数使用`prototype`属性。

    
Person.prototype.sayHello = function() {
    console.log(`Hello, my name is ${this.name}, I'm ${this.age} years old.`);
}

    
Person.prototype.sayHello = function() {
    console.log(`Hello, my name is ${this.name}, I'm ${this.age} years old.`);
}

四、jsclass和构造函数的静态方法

jsclass可以使用`static`关键字来定义静态方法，静态方法可以直接通过类名调用，而不需要实例化。构造函数可以直接在函数对象上定义静态方法。

    
class Utils {
  static add(a, b) {
    return a + b;
  }
}

console.log(Utils.add(1, 2)); // output: 3

    
function Utils() {}
Utils.add = function(a, b) {
    return a + b;
}

console.log(Utils.add(1, 2)); // output: 3

五、jsclass和构造函数的实例化

jsclass需要使用`new`关键字来实例化一个对象，而构造函数也可以使用`new`关键字或者直接调用函数来实例化一个对象。

    
let p = new Person('Tom', 18);
p.sayHello(); // output: Hello, my name is Tom, I'm 18 years old.

    
let p = Person('Tom', 18);
console.log(p); // output: undefined

let p1 = new Person('Tom', 18);
console.log(p1); // output: Person { name: 'Tom', age: 18 }

六、小结

通过以上对比，我们可以发现jsclass和构造函数都可以用来创建类，但是jsclass是ES6引入的面向对象编程语法，更加易读易写。同时，jsclass也拥有比构造函数更多的语法糖和功能支持，这使得程序员可以更快速地编写出复杂的程序。

原创文章，作者：小蓝，如若转载，请注明出处：https://www.506064.com/n/152782.html