자바스크립트의 객체지향과 상속에 대해 초보자가_javascript 기술을 배우는 데 도움이 됩니다.

JavaScript의 객체지향과 상속에 관한 글입니다. 저자가 1년 전에 쓴 글인데, JavaScript를 배우려는 학생들에게 많은 도움이 되기를 바랍니다. 내가 틀렸다면 정정해 주세요. 원본 링크 Javascript의 객체 및 상속

일부 Javascript 사용자는 프로토타입이나 객체 지향 언어의 본질에 대해 전혀 알 필요가 없지만, 전통적인 객체 지향 언어를 사용하는 개발자는 다음과 같은 경우 JavaScript에서 상속을 찾을 수 있습니다. 그들은 그것을 사용합니다. 모델은 매우 이상합니다. 다양한 JS 프레임워크는 클래스와 유사한 코드를 작성하기 위한 자체 메서드를 제공하므로 JS 객체 지향을 이해하기가 더욱 어렵습니다. 그 결과는 다음과 같습니다.
1. 객체 지향을 구현하는 표준 방법은 없습니다.
2. 객체지향 JS의 기본 개념은 사람들에게 잘 알려져 있지 않습니다

프로토타입 상속
프로토타입 상속은 매우 간단한 개념이며 그 본질은 다음과 같습니다. 🎜 >1. 객체 a는 객체 b로부터 상속받습니다. 이는 b가 a의 프로토타입임을 의미합니다.
2. a는 b의 모든 속성을 상속합니다. 즉, b의 값이 >존 스미스와 그로부터 상속받은 제인이 있다고 가정하여 구체적인 코드에서 그 효과를 살펴보겠습니다.




코드 복사

코드는 다음과 같습니다. var john = {firstName: 'John' , lastName: 'Smith'}; var jane = {firstName: 'Jane'};

jane.__proto__ = john;

이제 john을 jane의 프로토타입이라고 부릅니다. jane은 john

코드 복사

코드는 다음과 같습니다. jane. lastName "Smith"//이 속성은 john

에서 상속됩니다. 다음과 같이 Jane 자신의 속성이 더 높은 우선순위를 가집니다.

코드 복사

코드는 다음과 같습니다. jane.firstName;//이 속성은 john "Jane"

의 firstName 속성을 재정의합니다.
이후에 john에게 속성을 추가하면 아래와 같이 jane도 속성을 동적으로 상속받습니다.

코드 복사

코드는 다음과 같습니다. john.hair = 'brown'; //john jane.hair

"brown"//결과는 다음과 같습니다. jane은

의 새로운 추가 속성을 상속받습니다. 이제 Jane이 결혼하여 새로운 성(last name)

을 갖게 된다고 가정해 보겠습니다. 코드 복사

코드는 다음과 같습니다. jane.lastName = 'Doe'

이 속성은 동일한 속성으로 재정의됩니다. john의 이름(성)

코드 복사

코드는 다음과 같습니다. jane.lastName "Doe"

그러나 이제 jane의 성을 삭제하면

코드를 복사하세요

코드는 다음과 같습니다. delete jane.lastName 이 속성의 값은 john의 값으로 복원됩니다.

[code]

jane.lastName
"Smith "


이제 jane은 다른 개체에서도 상속받을 수 있습니다. 이 체인에는 상속이 얼마든지 있을 수 있습니다. 실제로 John은 프로토타입 속성도 가지고 있습니다.

코드 복사

코드는 다음과 같습니다. john.__proto__ Object { }

Firebug 콘솔에서 john.__proto__의 값은 Object{}로 설정되어 있지만 Object{}는 모든 객체의 상위 클래스인 Object.prototype 객체를 나타냅니다.

프로토타입 상속에 대한 간략한 설명입니다. 꽤 좋아 보이는데요, 그렇죠?
그러나 실제로는 __proto__를 사용할 수 없습니다. . .
그러나 이것이 __proto__ 속성이 존재하지 않는다는 의미는 아닙니다. __proto__ 속성은 일부 브라우저에서 직접 접근할 수 없지만 여전히 어떤 형태로 존재하며, 우리가 이를 처리해야 하지만 그리 직접적이지는 않습니다.


클래스와 상속

따라서 JavaScript에는 클래스가 없다고 말할 수 있습니다기억하세요: JavaScript에는 클래스가 없습니다이 경우 어떻게 되나요? 메서드와 상속으로 무엇을 달성했나요?
프로토타입 기준. 전통적인 객체 지향 언어에서 메소드는 클래스에 의존하지만 JavaScript에서는 메소드는 객체의 프로토타입에 의존하고 프로토타입은 객체의 생성자에 바인딩됩니다.

자바스크립트에서는 함수가 생성자 역할을 합니다. new 연산자를 사용하면 함수를 생성자로 사용할 수 있습니다. 아래 코드는 Cat 함수를 생성하는 것을 보여줍니다.

코드 복사 코드는 다음과 같습니다. function Cat(name){ // <-일반 함수입니다

this.name = name // 새 객체를 가리킵니다

}


위 코드 Cat.prototype 객체

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

Cat { }

new 연산자를 사용하여 Cat 인스턴스를 생성할 수 있습니다

코드 복사 코드는 다음과 같습니다. var garfield = new Cat('Garfield') // 인스턴스 생성 - Cat 함수가 생성자 역할을 합니다.

이제 Cat.prototype 객체는 new Cat()에 의해 생성된 객체의 프로토타입이 됩니다. 예:

코드 복사 코드는 다음과 같습니다. garfield.__proto__ === Cat.prototype

true //'Cat.prototype'은 이제 가필드 객체의 프로토타입입니다.

이제 Cat.prototype 메서드를 추가합니다. 추가 후 해당 메서드는 가필드에서 액세스할 수 있습니다.

코드 복사 코드는 다음과 같습니다. Cat.prototype.greet = function(){

console.log('야옹, 나는 'this.name)

}
garfield.greet()
"야옹, 난 가필드야"


다른 Cat 인스턴스도 액세스할 수 있습니다.

코드 복사 코드는 다음과 같습니다. var felix = new Cat('Felix')

felix.greet()

"야옹, 나야. Felix"


그래서 JavaScript에서는 메소드가 객체의 프로토타입(prototype)에 따라 다릅니다.

실제로 아래와 같이 Cat.prototype에 있는 동일한 이름의 메서드를 재정의하는 garfield에 메서드를 추가할 수도 있습니다.

코드 복사 코드는 다음과 같습니다. garfield.greet = function(){

console.log("What's new?")

};
garfield.greet();
"새로운 기능은 무엇인가요?"


그러나 이는 다른 객체에는 영향을 미치지 않습니다

코드 복사

코드는 다음과 같습니다. felix.greet() "야옹, 나는 펠릭스입니다"

따라서 JavaScript에서 메소드는 객체, 객체의 프로토타입 또는 객체의 상위 객체, 즉 프로토타입 체인의 모든 링크와 직접 연결될 수 있습니다. 이것이 상속이 구현되는 방식입니다.

보조 프로토타입 체인을 만들려면 먼저 다른 생성자를 만들어야 합니다. 이를 Animal이라고 부르는 것은 어떻습니까?

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

function Animal(){
}

다음으로 Cat.prototype의 프로토타입이 Animal 객체를 가리키도록 해야 Cat 인스턴스가 모든 Animal 메서드를 상속하게 됩니다. 따라서 Cat.prototype의 값을 다음과 같이 Animal의 인스턴스로 설정합니다.

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

Cat.prototype = new Animal();

또한 새 Cat.prototype에 실제로 Cat의 인스턴스임을 알려야 합니다.

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

Cat.prototype.constructor = Cat // Let `Cat.prototype`은 Cat

이 작업을 수행하는 목적이 주로 클래스 간의 계층적 관계를 위한 것이지만 일반적으로 이를 수행해야 합니다.

이제 Animal.prototype과 Cat.prototype에서 상속된 객체는 Animal 클래스에 속하므로 Cat의 모든 인스턴스도 Animal.prototype에서 간접적으로 상속됩니다. Animal.prototype에 새 메소드를 추가하면 Cat의 모든 인스턴스도 이 메소드에 액세스할 수 있습니다.

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

Animal.prototype.breed = function() {
console.log('새 동물 만들기!');
return new this.constructor();
var kitty = garfield.breed(); 새로운 동물!


위의 코드를 통해 상속을 얻었으니 간단합니다.

결론
JavaScript의 프로토타입 기반 상속은 이상하고 익숙해지는 데 시간이 좀 걸리지만 핵심 아이디어는 매우 간단합니다. 이러한 필수 개념을 진정으로 이해한다면 이러한 혼합 코드에서 JavaScript OO를 제어하는 ​​데 자신감을 갖게 될 것입니다. (끝)^_^