不是恐龙的JS原型和继承-掌握终极指南

前端

2023-11-16 04:43:11

刚踏上JS学习之旅时,很多前端小白对__proto__和prototype这两个概念一脸懵逼,在面试中遇到原型链的问题更是瑟瑟发抖。不过,真正的勇者敢于直面难题。让我们一起走进JS中原型链的海洋,从原型方面来探究JS中继承的奥秘吧!

JS中的类

谈到类,你可能会联想到面向对象的编程(OOP)。实际上,JS中的类并不是传统意义上的类,而是一种语法糖,是ES6新特性。JS中的类,主要有以下特点:

使用class来定义;
类包含属性(property)和方法(method);
类可以被继承;
类可以用来创建对象。

JS中的原型

原型是一个对象,它存储了某个对象的属性和方法,它是JS继承的基础。每个对象都隐式地关联着原型对象,称为其原型。对象的原型对象也可以有自己的原型对象,以此类推,形成原型链。原型链上的所有属性和方法都可以被该对象使用。

JS中的继承

JS中的继承是基于原型链实现的。当一个对象被创建时,它会继承其原型对象的所有属性和方法。子对象可以访问和修改原型对象上的属性和方法,但不能修改原型对象本身。子对象也可以添加自己的属性和方法,而这些属性和方法不会影响原型对象。

实例解析

为了更深入地理解JS中的类、原型和继承,我们来看一个实例:

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

  greet() {
    console.log(`Hello, my name is ${this.name} and I am ${this.age} years old.`);
  }
}

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

  study() {
    console.log(`${this.name} is studying ${this.major}.`);
  }
}

const person1 = new Person('John Doe', 30);
person1.greet();

const student1 = new Student('Jane Doe', 20, 'Computer Science');
student1.greet();
student1.study();

在这个例子中,我们定义了一个Person类,它有一个constructor函数和一个greet()方法。Student类继承了Person类,它有一个自己的constructor函数和一个study()方法。

我们创建了两个对象:person1和student1。person1是一个Person对象,它使用Person类的constructor函数进行初始化。student1是一个Student对象,它使用Student类的constructor函数进行初始化。

我们调用person1.greet()方法,它输出"Hello, my name is John Doe and I am 30 years old."。我们调用student1.greet()方法,它输出"Hello, my name is Jane Doe and I am 20 years old."。我们调用student1.study()方法,它输出"Jane Doe is studying Computer Science."。

这个例子展示了JS中类、原型和继承是如何工作的。