JavaScript 객체지향 프로그래밍 기초_기본 지식

객체지향의 재이해
JavaScript가 완전한 객체 지향 언어임을 설명하려면 먼저 객체 지향의 개념부터 시작하여 객체 지향의 여러 개념을 논의해야 합니다.

1. 모든 것은 객체이다
2. 객체에는 캡슐화 및 상속 기능이 있습니다
3. 개체는 메시지를 통해 서로 소통하며, 각 개체에는 정보가 숨겨져 있습니다

이 세 가지 점을 바탕으로 C는 클래스 캡슐화, 상속 및 다형성을 구현하지만 비객체 전역 함수 및 변수가 있기 때문에 반객체 지향, 반절차적 언어입니다. Java와 C#은 완전한 객체 지향 언어입니다. 함수와 변수는 객체 없이는 존재할 수 없도록 클래스 형태로 구성됩니다. 하지만 여기서 함수 자체는 특정 클래스에 연결된 프로세스입니다.

그러나 객체지향은 단지 개념이나 프로그래밍 아이디어일 뿐이며 특정 언어에 의존하여 존재해서는 안 됩니다. 예를 들어, Java는 객체 지향적 사고를 사용하여 언어를 구성하고 클래스, 상속, 파생, 다형성 및 인터페이스와 같은 메커니즘을 구현합니다. 그러나 이러한 메커니즘은 객체 지향 프로그래밍을 구현하기 위한 수단일 뿐 반드시 필요한 것은 아닙니다. 즉, 언어는 자신의 특성에 따라 객체지향을 구현하는 적절한 방법을 선택할 수 있습니다. 따라서 대부분의 프로그래머들은 자바나 C 같은 고급 컴파일 언어를 먼저 배우거나 사용하기 때문에(자바는 반컴파일, 반해석이지만 일반적으로 컴파일 언어라고 설명한다) '클래스'라는 용어를 선입견으로 받아들인다. ". 객체지향 구현 방법이므로 스크립팅 언어를 학습할 때 그 언어가 객체지향 언어인지, 객체지향 특성을 가지고 있는지 판단하기 위해 클래스 기반 객체지향 언어의 개념을 사용하는 것이 관례입니다. . 이는 프로그래머가 JavaScript를 깊이 있게 배우고 익히는 것을 방해하는 중요한 이유 중 하나이기도 합니다.
실제로 자바스크립트 언어는 프로토타입이라는 메소드를 통해 객체지향 프로그래밍을 구현합니다. 객관적인 세계를 구성하는 두 가지 방법인 클래스 기반 객체 지향과 프로토타입 기반 객체 지향의 차이점을 논의해 보겠습니다.
클래스 기반 객체지향과 프로토타입 기반 객체지향 접근 방식의 비교
클래스 기반 객체지향 접근 방식에서는 클래스를 기반으로 객체가 생성됩니다. 프로토타입 기반 객체지향 접근 방식에서는 생성자와 프로토타입을 사용하여 객체를 구성합니다. 두 가지 인지 방식의 차이를 설명하기 위해 객관적인 세계의 예를 들어보세요. 예를 들어, 공장에서 자동차를 제작할 때 작업자는 엔지니어링 도면을 참조해야 하며 설계에는 자동차 제조 방법이 명시되어 있습니다. 여기의 엔지니어링 도면은 언어의 클래스와 유사하며 자동차는 이 클래스에 따라 제조되는 반면 작업자 및 기계(건설업체에 해당)는 엔진, 타이어, 스티어링 휠(각 속성에 해당) 등 다양한 부품을 사용합니다. 프로토타입)이 자동차를 제작합니다.
실제로 두 가지 방법 중 어느 쪽이 객체지향 개념을 더 철저하게 표현하는지에 대한 논쟁이 여전히 남아 있습니다. 하지만 저자는 다음과 같은 이유로 프로토타입 객체지향이 더 철저한 객체지향적 접근 방식이라고 믿습니다.
우선, 객관적 세계에서 객체의 생성은 다른 물리적 객체의 구성의 결과이며, 추상적인 "그림"은 "자동차"를 생성할 수 없습니다. 즉, 클래스는 실체가 아닌 추상적인 개념이며, 객체의 생성은 엔터티의 생성입니다.
둘째, 모든 것이 객체라는 가장 기본적인 객체지향 규칙에 따르면 클래스 자체는 객체가 아니지만 프로토타입 메소드의 생성자와 프로토타입 자체는 프로토타입 메소드를 통해 다른 객체입니다.
셋째, 클래스 기반 객체지향 언어에서는 객체의 상태는 객체 인스턴스가 갖고, 객체의 행위 메소드는 객체를 선언한 클래스가 갖고, 구조와 메소드만 상속받을 수 있다. ; 프로토타입 객체지향 언어에서 객체의 동작과 상태는 객체 자체에 속하며 함께 상속될 수 있어(참조 리소스) 객관적인 현실에 더 가깝습니다.
마지막으로 자바와 같은 클래스 기반 객체지향 언어에서는 절차적 언어에서 전역 함수와 변수를 사용할 수 없는 불편함을 보완하기 위해 클래스 내에 정적 속성과 정적 메서드를 선언할 수 있도록 허용하고 있다. 사실, 객관적 세계에는 소위 정적인 개념이 없습니다. 왜냐하면 모든 것이 대상이기 때문입니다! 프로토타입 객체지향 언어에서는 내장 객체를 제외하고 전역 객체, 메소드, 속성이 존재할 수 없으며 정적 개념도 없습니다. 모든 언어 요소(원시 요소)는 존재하기 위해 객체에 의존해야 합니다. 그러나 함수형 언어의 특성으로 인해 언어 요소가 의존하는 개체는 런타임 컨텍스트의 변경에 따라 변경되며 이는 특히 this 포인터의 변경에 반영됩니다. “만물은 무엇인가에 속하며, 우주는 만물이 생존하는 토대이다”라는 자연관에 더 가까운 것이 바로 이 특징이다.

JavaScript 객체지향 기초 지식

자바스크립트 자체에는 클래스라는 개념이 없지만 일반적인 객체지향 언어와는 다르지만 여전히 객체지향적 특성을 갖고 있습니다.

객체를 생성하는 간단한 방법은 다음과 같습니다.

function myObject() {

};

JavaScript 中创建对象的方法一般来说有两种：函数构造法和字面量法，上面这种属函数构造法。下面是一个字面量法的例子：

var myObject = {

};

객체 하나만 필요하고 객체의 다른 인스턴스가 필요하지 않은 경우 리터럴 방법을 사용하는 것이 좋습니다. 객체의 여러 인스턴스가 필요한 경우 함수 생성자를 사용하는 것이 좋습니다.
속성 및 메서드 정의

함수 구성 방법:

function myObject() {
 this.iAm = 'an object';

 this.whatAmI = function() {
 console.log('I am ' + this.iAm);
 };
};

문자 그대로의 방법:

var myObject = {
 iAm : 'an object',

 whatAmI : function() {
 console.log('I am ' + this.iAm);
 }
};

위의 두 메소드로 생성된 객체에는 "iAm"이라는 속성과 "whatAmI"라는 메서드가 있습니다. 속성은 객체의 변수이고 메소드는 객체의 함수입니다.

속성 및 호출 방법을 가져오는 방법:

var w = myObject.iAm;

myObject.whatAmI();

메서드를 호출할 때 뒤에 괄호를 추가해야 합니다. 괄호를 추가하지 않으면 메서드에 대한 참조만 반환됩니다.
객체를 생성하는 두 가지 방법의 차이점

• 함수 생성자에서 속성과 메서드를 정의할 때 리터럴 메서드에서는 필요하지 않은 접두사 this를 사용해야 합니다.
• 함수 생성자는 속성과 메서드에 값을 할당할 때 =를 사용하고 리터럴 메서드는 : 을 사용합니다.
• 속성이나 메서드가 여러 개인 경우 함수 생성자에서는 ;로, 리터럴 메서드에서는 로 구분해야 합니다.

리터럴 메서드로 생성된 개체의 경우 개체 참조를 사용하여 해당 속성이나 메서드를 직접 호출할 수 있습니다.

myObject.whatAmI();

함수 생성자의 경우 해당 속성이나 메서드를 호출하기 전에 개체의 인스턴스를 만들어야 합니다.

var myNewObject = new myObject();
myNewObject.whatAmI();

생성자 사용

이제 이전 함수 구성 방법으로 돌아가겠습니다.

function myObject() {
 this.iAm = 'an object';
 this.whatAmI = function() {
 console.log('I am ' + this.iAm);
 };
};

사실 함수처럼 보이는데 함수인데 매개변수를 전달할 수 있나요? 코드를 약간 수정하세요:

function myObject(what) {
 this.iAm = what;
 this.whatAmI = function(language) {
 console.log('I am ' + this.iAm + ' of the ' + language + ' language');
 };
};

그런 다음 객체를 인스턴스화하고 매개변수를 전달합니다.

var myNewObject = new myObject('an object');
myNewObject.whatAmI('JavaScript');

프로그램의 최종 출력은 I am an object of the JavaScript 언어입니다.
객체를 생성하는 방법에는 두 가지가 있습니다. 어떤 방법을 사용해야 합니까?

리터럴 메서드의 경우 인스턴스화가 필요하지 않으므로 객체 값이 수정되면 객체 값이 영구적으로 수정되고 다른 모든 액세스는 수정된 값이 됩니다. 함수 생성자의 경우 값을 수정하면 해당 인스턴스의 값이 수정되며 N개 개체를 인스턴스화할 수 있으며 각 개체는 서로 간섭하지 않고 고유한 값을 가질 수 있습니다. 다음 코드 조각을 비교해 보세요.

먼저 리터럴 방식을 살펴보겠습니다.

var myObjectLiteral = {
 myProperty : 'this is a property'
};

console.log(myObjectLiteral.myProperty); // log 'this is a property'

myObjectLiteral.myProperty = 'this is a new property';

console.log(myObjectLiteral.myProperty); // log 'this is a new property'

이 개체를 가리키는 새 변수가 생성되더라도 결과는 여전히 동일합니다.

var myObjectLiteral = {
 myProperty : 'this is a property'
};

console.log(myObjectLiteral.myProperty); // log 'this is a property'

var sameObject = myObjectLiteral;

myObjectLiteral.myProperty = 'this is a new property';

console.log(sameObject.myProperty); // log 'this is a new property'

함수 구성 방법을 다시 살펴보세요.

// 用函数构造法
var myObjectConstructor = function() {
   this.myProperty = 'this is a property'
};

// 实例化一个对象
var constructorOne = new myObjectConstructor();

// 实例化第二个对象
var constructorTwo = new myObjectConstructor();

// 输出
console.log(constructorOne.myProperty); // log 'this is a property'

// 输出
console.log(constructorTwo.myProperty); // log 'this is a property'

和预期一样，两个对象的属性值是一样的。如果修个其中一个对象的值呢？

// 用函数构造法
var myObjectConstructor = function() {
 this.myProperty = 'this is a property';
};

// 实例化一个对象
var constructorOne = new myObjectConstructor();

// 修改对象的属性
constructorOne.myProperty = 'this is a new property';

// 实例化第二个对象
var constructorTwo = new myObjectConstructor();

// 输出
alert(constructorOne.myProperty); // log 'this is a new property'

// 输出
alert(constructorTwo.myProperty); // log 'this is a property'

보시다시피 함수 생성자를 사용하여 인스턴스화한 다양한 개체는 서로 독립적이며 각각 다른 값을 가질 수 있습니다. 따라서 객체를 생성하는 데 어떤 방법을 사용할지는 실제 상황에 따라 다릅니다.