JavaScript 객체지향 프로그래밍 튜토리얼 소개_기본 지식

객체 지향 JavaScript와 다른 언어 사이에는 차이점이 있어 논쟁이 촉발되었지만 JavaScript가 강력한 객체 지향 프로그래밍 기능을 가지고 있다는 점에는 의심의 여지가 없습니다.

이 기사는 객체 지향 프로그래밍에 대한 소개로 시작됩니다. 지향 프로그래밍 시작 후 JavaScript 개체 모델을 검토하고 마지막으로 JavaScript의 개체 지향 프로그래밍 개념을 보여줍니다.

자바스크립트 검토

변수, 유형, 함수, 범위와 같은 JavaScript 개념에 대해 확신이 없다면 JavaScript에서 이러한 주제 다시 소개를 읽어보세요. JavaScript 1.5 핵심 가이드

객체 지향 프로그래밍

도 확인해 보세요.

객체 지향 프로그래밍은 추상화를 사용하여 실제 세계에 기반한 모델을 만드는 프로그래밍 패러다임입니다. 이는 모듈화, 다형성 및 캡슐화를 포함하여 이전에 확립된 여러 패러다임 기술을 사용합니다. 오늘날 널리 사용되는 많은 프로그래밍 언어(예: Java, JavaScript, C#, C, Python, PHP, Ruby 및 Objective-C)는 객체 지향 프로그래밍(OOP)을 지원합니다.

객체 지향 프로그래밍은 프로그램을 기능 모음으로 보거나 컴퓨터 명령 목록으로 축소하는 전통적인 관점과 달리 소프트웨어를 설계하기 위해 공동 작업 개체 모음을 사용하는 것으로 볼 수 있습니다. 객체 지향 프로그래밍에서 각 객체에는 메시지 수신, 데이터 처리, 다른 객체에 메시지 보내기 등의 기능이 있습니다. 각 개체는 서로 다른 역할이나 책임을 가진 독립적인 작은 기계로 볼 수 있습니다.
객체 지향 프로그래밍은 프로그래밍의 유연성과 유지 관리 가능성을 높이는 것을 목표로 하며 대규모 소프트웨어 엔지니어링에서 널리 사용됩니다. 모듈성을 강조하기 때문에 객체 지향 코드는 개발을 더 간단하게 만들고 나중에 이해하기 쉽게 설계되었으며 덜 모듈화된 프로그래밍 방법보다 복잡한 상황과 단계를 더 쉽게 분석하고 코딩하고 이해할 수 있습니다.

특수조건

클래스
~ 객체의 특성을 정의합니다.
객체
~ 클래스 인스턴스.
속성
~ 색상 등 사물의 특성.
방법
~걷기 같은 어떤 사물능력.
생성자
~ 인스턴스화 중에 호출되는 메서드입니다.
상속
~ 클래스는 다른 클래스의 특성을 상속받을 수 있습니다.
캡슐화
~ 클래스는 객체의 특성만 정의하고, 메소드는 메소드가 실행되는 방식만 정의합니다.
추상화
~ 객체의 복잡한 상속, 메서드 및 속성을 결합하고 특정 현실 모델을 시뮬레이션할 수 있어야 합니다.
다형성
~ 서로 다른 클래스가 동일한 메서드나 속성을 정의할 수 있습니다.
객체 지향 프로그래밍에 대한 자세한 설명은 객체 지향 프로그래밍에 대한 Wikipedia 항목을 참조하세요.

프로토타입 기반 프로그래밍

프로토타입 기반 프로그래밍은 클래스가 존재하지 않고 동작 재사용(클래스 기반 언어에서는 상속이라고 함)을 프로토타입으로 위장하는 객체 지향 프로그래밍 스타일입니다. 이는 기존 객체를 사용하여 수행됩니다. 이 패턴은 클래스 없는 프로그래밍, 프로토타입 지향 프로그래밍, 인스턴스 기반 프로그래밍이라고도 합니다.
프로토타입 기반 언어의 원래(그리고 매우 표준적인) 예는 David Ungar와 Randall Smith가 개발한 Self 프로그래밍 언어입니다. 그러나 이러한 스타일의 클래스 없는 프로그래밍은 최근 점점 인기를 얻고 있으며 JavaScript, Cecil, NewtonScript, Io, MOO, REBOL, Kevo, Squeak(Viewer 프레임워크를 사용하여 Morphic 구성 요소를 조작하는 경우)와 같은 여러 프로그래밍 언어에서 채택되었습니다. 및 기타 여러 언어.

JavaScript 객체지향 프로그래밍

핵심 개체

JavaScript의 핵심에는 Math, Object, Array 및 String 객체와 같은 여러 객체가 포함되어 있습니다. 다음 예제에서는 Math 객체의 random() 메서드를 사용하여 난수를 얻는 방법을 보여줍니다.

코드 복사 코드는 다음과 같습니다.

alert(Math.random());

팁: 이 예와 다른 모든 예에서는 함수 이름 경고가 전역적으로 정의되었다고 가정합니다(경고가 웹 브라우저에 포함됨). 경고 기능은 실제로 JavaScript 자체의 일부가 아닙니다.

JavaScript 핵심 개체 목록은 JavaScript 1.5 핵심 참조: 전역 개체를 참조하세요.

JavaScript의 모든 객체는 Object 객체의 인스턴스이므로 모든 속성과 메서드를 상속합니다.

사용자 정의 개체

클래스

JavaScript는 C나 Java에서 볼 수 있는 것과 같은 클래스 문을 포함하지 않는 프로토타입 기반 언어입니다. 이는 언어에 익숙한 프로그래머에게 클래스 문을 사용하여 혼동을 줄 수 있는 경우가 있습니다. 그러나 JavaScript는 함수를 클래스로 사용합니다. 클래스를 정의하는 것은 함수를 정의하는 것만큼 간단합니다. 다음 예제에서는 Person이라는 새 클래스를 정의합니다.

코드 복사 코드는 다음과 같습니다.

function Person() { }

객체(클래스 인스턴스)

obj 객체의 새 인스턴스를 생성하려면 new obj 문을 사용하고 결과를 할당합니다(해당 유형은 obj입니다). 나중에 액세스할 수 있도록 변수를 지정합니다.
다음 예에서는 먼저 Person이라는 클래스를 정의한 후 두 개의 인스턴스(person1 및 person2)를 만듭니다.

코드 복사 코드는 다음과 같습니다.

function Person() {}
var person1 = new Person( );
var person2 = new Person();

새로운 인스턴스화 대안 Object.create도 참조하세요.

건축자

생성자는 인스턴스화될 때(객체 인스턴스가 생성되는 순간) 호출됩니다. 생성자는 클래스의 메서드입니다. JavaScript에서는 함수가 객체의 생성자로 사용되므로 생성자 메서드를 명시적으로 정의할 필요가 없습니다. 클래스에 선언된 모든 동작은 인스턴스화될 때 실행됩니다.

생성자는 개체 속성을 설정하거나 개체 사용을 준비하기 위한 메서드를 호출하는 데 사용됩니다. 이 문서의 뒷부분에서는 다른 구문을 사용하여 클래스 메서드와 해당 정의를 추가하는 방법을 알아봅니다.

다음 예에서는 Person이 인스턴스화될 때 Person 클래스의 생성자가 경고 상자를 표시합니다.

코드 복사 코드는 다음과 같습니다.

function Person() {
Alert ('인스턴스화된 사람');
}
var person1 = new Person();
var person2 = new Person();

속성(객체속성)

속성은 클래스 내에 포함된 변수입니다. 각 객체 인스턴스에는 이러한 속성이 있습니다. 상속이 제대로 작동하려면 클래스(함수)의 프로토타입 속성에 속성을 설정해야 합니다.
클래스의 속성을 조작하는 것은 현재 객체를 참조하는 this 키워드를 통해 이루어집니다. 클래스 외부에서 속성에 액세스(읽기 또는 쓰기)하려면 다음 구문을 사용하세요. InstanceName.Property. 이는 C, Java 및 기타 언어에서 사용되는 것과 동일한 구문입니다. (속성 값을 가져오거나 설정하려면 클래스 내에서 this.Property 구문을 사용하십시오.)

다음 예에서는 Person 클래스에 대한 성별 속성을 정의한 다음 초기화 중에 속성을 정의합니다.

코드 복사 코드는 다음과 같습니다.

function Person(gender) {
this.gender = 성별;
Alert('인스턴스화됨');
}
var person1 = new Person('남성'); // 남성: 남성
var person2 = new Person('여성') ; // 여성: 女
//person1의 성별 표시
alert('person1은 'person1.gender) // person1은 남성입니다

메서드

메서드는 속성과 동일한 논리를 따릅니다. 차이점은 함수이고 함수로 정의된다는 것입니다. 메서드 호출은 속성에 액세스하는 것과 비슷하지만 인수가 있을 수 있는 메서드 이름 끝에 ()를 추가합니다. 메소드를 정의한다는 것은 클래스의 프로토타입 속성에 있는 명명된 속성에 함수를 할당하는 것입니다. 함수에 할당된 이름은 객체에서 메소드가 호출되는 이름입니다.
다음 예에서는 Person 클래스에 대해 sayHello() 메서드를 정의하고 사용합니다.

코드 복사 코드는 다음과 같습니다.

function Person(gender) {
this.gender = 성별;
경보('인스턴스화된 사람');
}
Person.prototype.sayHello = function() {
경보('hello');
};
var person1 = new Person('Male');
var person2 = new Person('여성'); // Person의 sayHello 메소드를 호출합니다.
person1.sayHello(); // 안녕하세요

JavaScript에서 메소드는 클래스/객체에 속성으로 바인딩된 일반 함수 객체입니다. 즉, "컨텍스트 외부"로 호출될 수 있습니다. 다음 샘플 코드를 고려하세요.

코드 복사 코드는 다음과 같습니다.

function Person (성별) {
this.gender = 성별;
}
Person.prototype.sayGender = function() {
Alert(this.gender);
};
var person1 = new Person(' Male');
var sexualTeller = person1.sayGender;
person1.sayGender(); // '남성'에게 경고
genderTeller() // 정의되지 않은 경고
alert( genderTeller === person1 .sayGender); // 경고 true
alert(genderTeller === Person.prototype.sayGender); // 경고 true

이 예는 여러 개념을 동시에 보여줍니다. 이는 JavaScript에 "객체별 메서드"가 없음을 보여줍니다. 메서드에 대한 모든 참조는 원래 프로토타입에서 정의한 것과 정확히 동일한 함수를 가리키기 때문입니다. 함수가 메서드(정확히 말하면 속성)로 호출되면 JavaScript는 현재 "객체 컨텍스트"를 특정 "this" 변수에 "바인딩"합니다. 이는 다음과 같이 함수 개체의 "call" 메서드를 호출하는 것과 동일합니다.

코드 복사 코드는 다음과 같습니다. :

genderTeller.call(person1) //'남성'에게 경고

자세한 내용은 Function.call 및 Function.apply

를 참조하세요.

상속

상속은 하나 이상의 클래스의 특수 버전인 클래스를 생성하는 방법입니다. (JavaScript는 단일 클래스 상속만 지원합니다.) 이 특수 클래스를 하위 클래스라고 하며, 다른 클래스를 상위 클래스라고도 합니다. JavaScript에서는 상속을 완료하려면 상위 클래스의 인스턴스를 하위 클래스에 할당한 다음 하위 클래스를 특수화해야 합니다.

팁: JavaScript는 하위 클래스의 프로토타입 생성자(프로토타입 생성자)를 감지하지 못하므로 Core JavaScript 1.5 Core Reference: Global Objects:Object:prototype 속성을 ​​참조하세요. 따라서 이 값을 수동으로 지정해야 합니다. .

다음 예에서는 Student 클래스를 Person의 하위 클래스로 정의합니다. 그런 다음 sayHello() 메서드를 재정의하고 sayGoodBye() 메서드를 추가합니다.

코드 복사 코드는 다음과 같습니다.

// Person 클래스 정의
function Person() {}
Person.prototype.walk = function() {
Alert('나는 걷고 있습니다!');
} ;
Person.prototype.sayHello = function() {
Alert('hello');
};
// Student 클래스 정의
function Student() {
/ / 상위 클래스 생성자 호출
Person.call(this);
}
// Inherit Person
Student.prototype = new Person() // 생성자 포인터를 수정합니다. Person
Student.prototype.constructor = Student; // sayHello 메소드 교체
Student.prototype.sayHello = function() {
Alert('안녕하세요, 저는 학생입니다');
}
// sayGoodBye 메소드 추가
Student.prototype.sayGoodBye = function() {
Alert('goodBye');
}
var Student1 = new Student();
student1 .sayHello( );
student1.walk();
student1.sayGoodBye(); // 상속 확인
alert(student1 인스턴스of Person); // true
alert(student1 인스턴스of Student); // 참

포장

위의 예에서 Student는 Person 클래스의 walk() 메서드가 어떻게 구현되는지 알 필요가 없지만 학생 클래스는 우리가 원하지 않는 한 이 메서드를 명시적으로 정의할 필요가 없습니다. 그것을 바꾸십시오. 이를 캡슐화라고 하며, 각 클래스는 상위 클래스의 메서드를 상속하고 변경하려는 사항만 정의합니다.

초록

추상화는 해결 중인 문제의 현재 부분을 모델링할 수 있는 메커니즘입니다. 이는 상속(전문화) 또는 구성을 통해 달성할 수 있습니다. JavaScript는 클래스 인스턴스가 다른 객체의 속성 값이 되도록 하여 상속과 합성을 통해 전문화를 달성합니다.
JavaScript의 Function 클래스는 Object 클래스에서 상속되며(이는 모델의 특수화를 보여줍니다) Function.prototype 속성은 Object의 인스턴스입니다(이는 구성을 보여줍니다).

코드 복사 코드는 다음과 같습니다.

var foo = function() {};
Alert(' foo는 함수입니다: '(foo 인스턴스 오브 함수));
alert('foo.prototype은 객체입니다: '(foo.prototype 인스턴스 오브 객체));

다형성

모든 메소드와 속성이 프로토타입 속성 내에 정의되는 것처럼, 서로 다른 클래스는 동일한 이름을 가진 메소드를 정의할 수 있습니다. 메소드의 범위는 정의된 클래스로 제한됩니다. 이는 두 클래스 사이에 부모-자식 관계가 없는 경우에만 해당됩니다(한 클래스가 상속 체인의 다른 클래스에서 상속되지 않는 경우).

팁

이 기사에서 제시하는 객체지향 프로그래밍 구현 기술은 객체지향 프로그래밍을 수행하는 방법 측면에서 매우 유연하기 때문에 JavaScript에만 적용할 수 있는 것이 아닙니다.
다시 말하지만, 여기에 제시된 기술은 언어 해킹을 사용하지 않으며 다른 언어의 객체 이론 구현을 모방하지도 않습니다.
JavaScript에는 다른 고급 객체 지향 프로그래밍 기술이 있지만 이는 이 소개 기사의 범위를 벗어납니다.