正文

JS类编写指南：轻松入门，从构造函数到ES6语法，全面解析创建自定义对象的秘诀

/0 浏览量
0402

在JavaScript中，类（Class）是创建自定义对象的一种方式，它使得对象的属性和方法定义更加清晰和易于管理。本指南将带你从构造函数开始，逐步深入到ES6语法中的类，帮助你轻松入门并掌握创建自定义对象的秘诀。

一、构造函数入门

在ES5之前，JavaScript使用构造函数来创建自定义对象。构造函数是一个普通的函数，通过在函数名前加上new关键字来创建对象。

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

var person1 = new Person('张三', 20);
console.log(person1.name); // 张三
console.log(person1.age); // 20

在上述代码中，Person函数就是一个构造函数，它接受两个参数：name和age。通过new关键字创建person1对象时，构造函数会被调用，并将this指向新创建的对象。

二、原型链

在JavaScript中，每个对象都有一个原型（prototype）属性，它指向创建该对象的构造函数的原型对象。原型对象上定义的方法和属性可以被对象继承。

Person.prototype.sayName = function() {
  console.log(this.name);
};

person1.sayName(); // 张三

在上述代码中，我们在Person的原型对象上定义了一个sayName方法，这样所有通过Person构造函数创建的对象都可以访问到这个方法。

三、ES6类语法

ES6引入了class关键字，它提供了一种更简洁、更易读的语法来定义类。

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

  sayName() {
    console.log(this.name);
  }
}

const person2 = new Person('李四', 22);
person2.sayName(); // 李四

在上述代码中，我们使用class关键字定义了一个Person类，它包含一个构造函数和一个sayName方法。通过new关键字创建person2对象时，构造函数会被调用，并将this指向新创建的对象。

四、继承

在ES6中，我们使用extends关键字来实现类的继承。

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

  sayGrade() {
    console.log(this.grade);
  }
}

const student1 = new Student('王五', 18, '高三');
student1.sayName(); // 王五
student1.sayGrade(); // 高三

在上述代码中，我们定义了一个Student类，它继承自Person类。在Student的构造函数中，我们使用super关键字调用父类（Person）的构造函数，并传入相应的参数。

五、总结

通过本文的介绍，相信你已经对JavaScript中的类和自定义对象有了更深入的了解。从构造函数到ES6语法，我们学习了如何创建、继承和扩展自定义对象。希望这篇指南能帮助你轻松入门，并让你在JavaScript的世界中游刃有余。

-- 展开阅读全文 --