>  기사  >  웹 프론트엔드  >  자바스크립트에서 oop를 작성하는 방법

자바스크립트에서 oop를 작성하는 방법

王林
王林원래의
2023-05-16 09:43:07447검색

웹 개발에서 JavaScript는 매우 인기 있는 프로그래밍 언어가 되었습니다. JavaScript에서는 객체지향 프로그래밍(OOP)이 중요한 개념입니다. OOP를 사용하면 코드를 구조화하고 중복을 줄여 유지 관리 및 확장을 더 쉽게 만들 수 있습니다. 이 기사에서는 JavaScript로 OOP를 작성하는 방법을 소개합니다.

  1. 프로토타입 및 생성자

자바스크립트에서는 프로토타입을 통해 객체의 속성과 메서드를 공유할 수 있으며, 생성자를 사용하여 새 객체를 생성하고 속성을 초기화합니다. 다음은 생성자와 프로토타입을 사용하는 간단한 예입니다.

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

Person.prototype.sayHi = function() {
  console.log("Hi, my name is " + this.name + " and I'm " + this.age + " years old.");
}

var person1 = new Person("John", 30);
var person2 = new Person("Mary", 25);

person1.sayHi(); // Hi, my name is John and I'm 30 years old.
person2.sayHi(); // Hi, my name is Mary and I'm 25 years old.

위 예에서는 name age를 초기화하는 Person 생성자를 정의합니다. 기인하다. 그런 다음 Person.prototype을 사용하여 각 Person 개체에 sayHi 메서드를 추가합니다. 이 메서드는 모든 Person 코드>객체 공유. 마지막으로 두 개의 <code>Person 개체를 만들고 해당 개체의 sayHi 메서드를 호출했습니다. Person构造函数,初始化了nameage属性。然后,我们使用Person.prototype给每个Person对象添加了一个sayHi方法,这个方法可以被所有Person对象共享。最后,我们创建了两个Person对象,并调用了它们的sayHi方法。

  1. 类(class)

在ES6中,JavaScript引入了类的概念,并使用关键字class来实现。类提供了一种更简洁、更易于理解的语法,用于定义对象。

以下是一个使用类的例子:

class Person {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }
  
  sayHi() {
    console.log("Hi, my name is " + this.name + " and I'm " + this.age + " years old.");
  }
}

let person1 = new Person("John", 30);
let person2 = new Person("Mary", 25);

person1.sayHi(); // Hi, my name is John and I'm 30 years old.
person2.sayHi(); // Hi, my name is Mary and I'm 25 years old.

在上面的例子中,我们使用class关键字定义了一个Person类,并在constructor方法中初始化了nameage属性。然后,我们定义了一个sayHi方法,用于输出一个招呼。最后,我们创建了两个Person对象,并调用了它们的sayHi方法。

  1. 继承(inheritance)

在OOP中,继承是指从一个已有的对象中派生出一个新的对象,新对象继承了原来的对象的属性和方法。在JavaScript中,继承可以通过使用prototypeclass来实现。

以下是使用prototype实现继承的例子:

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

Person.prototype.sayHi = function () {
  console.log("Hi, my name is " + this.name + " and I'm " + this.age + " years old.");
}

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

Student.prototype = Object.create(Person.prototype);
Student.prototype.constructor = Student;
Student.prototype.sayMajor = function() {
  console.log("My major is " + this.major + ".");
}

let person1 = new Person("John", 30);
let student1 = new Student("Mary", 25, "Computer Science");

person1.sayHi(); // Hi, my name is John and I'm 30 years old.
student1.sayHi(); // Hi, my name is Mary and I'm 25 years old.
student1.sayMajor(); // My major is Computer Science.

在上面的例子中,我们定义了一个Person构造函数,在原型中添加了sayHi方法。另外,我们定义了一个Student构造函数,通过使用call方法调用了Person构造函数来初始化nameage属性,并添加了一个major属性。然后,我们使用Object.create方法创建了一个Person.prototype的副本,并将其指定给Student.prototype,以便Student对象可以继承Person对象的属性和方法。最后,我们定义了一个sayMajor方法,用于输出学生的专业。最终,我们创建了一个Person对象和一个Student对象,并调用了他们的方法。

以下是使用class实现继承的例子:

class Person {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }
  
  sayHi() {
    console.log("Hi, my name is " + this.name + " and I'm " + this.age + " years old.")
  }
}

class Student extends Person {
  constructor(name, age, major) {
    super(name, age);
    this.major = major;
  }
  
  sayMajor() {
    console.log("My major is " + this.major + ".");
  }
}

let person1 = new Person("John", 30);
let student1 = new Student("Mary", 25, "Computer Science");

person1.sayHi(); // Hi, my name is John and I'm 30 years old.
student1.sayHi(); // Hi, my name is Mary and I'm 25 years old.
student1.sayMajor(); // My major is Computer Science.

在上面的例子中,我们定义了一个Person类,在constructor方法中初始化了nameage属性,并在sayHi方法中输出了一个招呼。然后,我们使用extends关键字创建了一个Student类,并使用super关键字调用了Person类的constructor方法来初始化nameage属性,并添加了一个major属性。最后,我们定义了一个sayMajor方法,用于输出学生的专业。最终,我们创建了一个Person对象和一个Student对象,并调用了他们的方法。

结论:

在JavaScript中,OOP是一种非常重要的概念,使用对象、构造函数、原型和类可以更好地组织代码和减少重复性。继承可以通过原型和类来实现。从ES6开始,JavaScript引入了关键字class

    Class (class)🎜🎜🎜ES6에서 JavaScript는 클래스 개념을 도입하고 이를 구현하기 위해 class 키워드를 사용했습니다. 클래스는 객체 정의를 위한 더 명확하고 이해하기 쉬운 구문을 제공합니다. 🎜🎜다음은 클래스 사용 예입니다. 🎜rrreee🎜위 예에서는 class 키워드를 사용하여 Person 클래스를 정의하고 에 추가했습니다. >constructor <code>nameage 속성은 메서드에서 초기화됩니다. 그런 다음 인사말을 출력하기 위해 sayHi 메서드를 정의했습니다. 마지막으로 두 개의 Person 개체를 만들고 해당 개체의 sayHi 메서드를 호출했습니다. 🎜
      🎜상속🎜🎜🎜OOP에서 상속이란 기존 객체에서 새 객체를 파생시키는 것을 의미합니다. 새 객체는 원래 객체의 속성과 메서드를 상속합니다. JavaScript에서는 prototypeclass를 사용하여 상속을 구현할 수 있습니다. 🎜🎜다음은 프로토타입을 사용하여 상속을 구현하는 예입니다. 🎜rrreee🎜위 예에서는 Person 생성자를 정의하고 프로토타입 sayHi에 를 추가합니다. 방법. 또한 Student 생성자를 정의하고 call 메서드를 사용하여 Person 생성자를 호출하여 name 및 age 속성을 ​​추가하고 major 속성을 ​​추가했습니다. 그런 다음 Object.create 메서드를 사용하여 Person.prototype의 복사본을 만들고 이를 Student.prototype에 할당하여 Student 개체는 <code>Person 개체의 속성과 메서드를 상속할 수 있습니다. 마지막으로 학생의 전공을 출력하기 위해 sayMajor 메소드를 정의합니다. 마지막으로 Person 개체와 Student 개체를 만들고 해당 메서드를 호출했습니다. 🎜🎜다음은 class를 사용하여 상속을 구현하는 예입니다. 🎜rrreee🎜위 예에서는 constructor에서 Person 클래스를 정의합니다. > nameage 속성이 메소드에서 초기화되고 sayHi 메소드에서 인사말이 출력됩니다. 그런 다음 extends 키워드를 사용하여 Student 클래스를 만들고 super 키워드를 사용하여 Person 클래스를 호출했습니다. code>constructor 메소드는 nameage 속성을 ​​초기화하고 major 속성을 ​​추가합니다. 마지막으로 학생의 전공을 출력하기 위해 sayMajor 메소드를 정의합니다. 마지막으로 Person 개체와 Student 개체를 만들고 해당 메서드를 호출했습니다. 🎜🎜결론: 🎜🎜JavaScript에서 OOP는 객체, 생성자, 프로토타입 및 클래스를 사용하여 코드를 더 잘 구성하고 중복을 줄이는 매우 중요한 개념입니다. 상속은 프로토타입과 클래스를 통해 이루어질 수 있습니다. ES6부터 JavaScript는 객체 정의를 위한 더 간단하고 이해하기 쉬운 구문을 제공하는 class 키워드를 도입했습니다. 가능할 때마다 OOP 코드 작성에 대한 올바른 접근 방식을 선택하는 것이 중요합니다. 이는 프로젝트 개발 및 유지 관리에 상당한 이점을 제공하기 때문입니다. 🎜

위 내용은 자바스크립트에서 oop를 작성하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.