JavaScript의 객체지향 프로그래밍과 상속을 마스터하세요-JS 튜토리얼-php.cn

JavaScript의 객체지향 프로그래밍과 상속을 마스터하세요

王林

풀어 주다： 2023-11-03 09:16:04

원래의

865명이 탐색했습니다.

JavaScript의 객체지향 프로그래밍과 상속을 마스터하세요

현대 웹 개발에서 JavaScript는 없어서는 안 될 언어가 되었습니다. 그 중에서 객체지향 프로그래밍(OOP)과 상속은 JavaScript 개발에 있어 두 가지 중요한 측면입니다. 이 기사에서는 독자들에게 JavaScript의 객체 지향 프로그래밍과 상속을 소개하고 구체적인 코드 예제를 제공합니다.

1. 객체 지향 프로그래밍

객체 지향 프로그래밍은 객체를 프로그램의 기본 단위로 사용하고 데이터와 데이터 작업을 캡슐화하는 프로그래밍 방법입니다. JavaScript에서는 객체와 함수를 사용하여 객체 지향 프로그래밍을 구현할 수 있습니다.

Objects

JavaScript에서 객체는 키-값 쌍의 모음입니다. 중괄호를 사용하여 객체를 정의할 수 있습니다:

var person = {
  name: 'Tom',
  age: 18,
  sayHello: function() {
    console.log('Hello, my name is ' + this.name);
  }
};

로그인 후 복사

위 코드에서는 세 가지 속성을 가진 객체를 정의합니다. 그 중 name, age는 기본 속성이고, sayHello는 메소드입니다. 개체의 속성과 메서드는 다음을 통해 액세스할 수 있습니다. name和age是基本属性，sayHello是一个方法。可以通过以下方式访问对象的属性和方法：

console.log(person.name); // 输出 'Tom'
person.sayHello(); // 输出 'Hello, my name is Tom'

로그인 후 복사

函数

在JavaScript中，函数是一种特殊的对象。我们可以使用函数来创建对象、封装操作和定义类。下面是一个使用函数来创建对象的示例：

function Person(name, age) {
  this.name = name;
  this.age = age;
  this.sayHello = function() {
    console.log('Hello, my name is ' + this.name);
  }
}

var person = new Person('Tom', 18);
person.sayHello(); // 输出 'Hello, my name is Tom'

로그인 후 복사

在上面的代码中，我们定义了一个Person函数来创建一个包含name和age属性的对象。这里使用了this关键字来代表当前的对象。通过new Person('Tom', 18)语句来创建一个新的Person对象。

二、继承

继承是一种实现代码复用的方式。在JavaScript中，我们可以使用原型链来实现继承。

原型链

JavaScript中的对象有一个指向其原型对象的指针。我们可以通过原型对象来实现继承，即子对象继承父对象的属性和方法。

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

Person.prototype.sayHello = function() {
  console.log('Hello, my name is ' + this.name);
}

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

Student.prototype = Object.create(Person.prototype);
Student.prototype.constructor = Student;

var student = new Student('Tom', 18, 3);
student.sayHello(); // 输出 'Hello, my name is Tom'

로그인 후 복사

在上面的代码中，我们定义了一个Person函数和一个Student函数。使用Object.create()来创建一个新的对象作为Student.prototype，这个新的对象的原型为Person.prototype。这样，Student函数就可以继承Person函数的属性和方法。

使用call()函数来继承Person的属性和方法：Person.call(this, name, age)，这里的this表示的是Student函数创建的对象。

最后，将Student.prototype的constructor属性指向Student函数本身，这样我们在使用new关键字创建新的Student对象时，就可以调用Student自身的构造函数。

ES6中的继承

在ES6中，我们可以使用class关键字来定义类。class关键字封装了function和prototype两个部分，让我们更方便地定义类。

下面是一个使用ES6定义继承的例子：

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

  sayHello() {
    console.log('Hello, my name is ' + this.name);
  }
}

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

let student = new Student('Tom', 18, 3);
student.sayHello(); // 输出 'Hello, my name is Tom'

로그인 후 복사

在上面的代码中，我们使用class关键字来定义Person和Student两个类。使用extends关键字来实现继承。

使用super关键字调用父类的构造函数和方法。在Student的构造函数中，使用super(name, age)来调用Person的构造函数，实现了对父类成员属性的继承。使用super关键字调用父类的方法：super.sayHello()rrreee

JavaScript에서 함수는 특별한 종류의 개체입니다. 함수를 사용하여 객체를 생성하고, 작업을 캡슐화하고, 클래스를 정의할 수 있습니다. 다음은 객체를 생성하기 위해 함수를 사용하는 예입니다:

name

를 포함하는 객체를 생성하기 위해 <code>Person

this

new Person('Tom', 18)

Person

Student

Object.create()

Student.prototype