자바스크립트 프로토타입 상속_자바스크립트 기술 소개

여름 방학 동안에는 ext4 웹 데스크탑과 기타 JavaScript 관련 작업도 했습니다. javascript의 경우 이전에는 document.getElementById()와 Alert()만 알고 있었지만 이제는 더 깊이 이해하기 시작했습니다. 만약 이 글에 잘못된 점이 있다면 지적해주세요.
JavaScript의 경우 객체 기반이므로 클래스 개념이 없습니다. 따라서 상속을 구현하려면 JavaScript의 프로토타입 메커니즘을 사용해야 합니다. (실제로 이것은 잘못된 것입니다. @Memory Forest의 팁 덕분에 Apply 및 Call을 사용하여 구현할 수도 있습니다.)
JavaScript에는 클래스를 구현하는 특별한 메커니즘이 없으므로 다음의 도움을 통해서만 중첩될 수 있습니다. 구현 클래스를 시뮬레이션하는 메커니즘입니다. JavaScript에서 함수는 변수나 다른 함수를 포함할 수 있습니다. 이 경우 변수를 클래스의 속성으로 사용하고 내부 함수를 멤버 메서드로 사용할 수 있습니다. 그러면 외부 함수는 클래스로 간주될 수 있습니다.
1. 먼저 동물 클래스를 작성해 보겠습니다. 사실은 함수이지만 이 클래스의 생성자로 간주할 수 있습니다.

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

function Animal(){
console.log('Call the constructor.')
}

2. 그런 다음 new 키워드를 사용하여 myClass 클래스의 인스턴스를 생성할 수 있습니다.
var cat = new Animal()
이러한 방식으로 인스턴스 obj를 생성했습니다. 관련 디버깅 도구를 사용하면 생성자 호출의 디버깅 정보를 볼 수 있습니다. 이는 우리가 클래스를 성공적으로 생성했음을 증명합니다.
3. 그런 다음 생성자에 다음과 같은 매개변수를 추가할 수도 있습니다.

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

function Animal(name){
this.name = name
}

이런 식으로 인스턴스를 만들고 액세스할 수 있습니다. 클래스 속성은

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

function myClass(name ){
this.name = name;
}
var cat = new myClass("Kate")
alert(cat.name)

방법으로 인스턴스 cat의 속성 이름에 액세스할 수 있습니다.
4. 동물이 뛰고 먹을 수 있다는 것은 누구나 아는 사실인데, 동물에게 메소드를 추가하려면 어떻게 해야 할까요? 아래 참조
방법 1: 생성자에서 직접 메소드 선언

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

function Animal(name){
this.name = name; this.jump = function(){
alert(this.name " is Jumping..."); };
this.eat = function(){
alert (this.name " is eating...")
}
var cat = new Animal("Kate ");
alert(cat.name);
cat.jump();
cat.eat();


방법 2: 프로토타입을 사용하여 class

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

function Animal(이름){

this.name = name;
}
Animal.prototype = {
type : 'cat',
jump : function(){
alert (this.name "이 점프 중입니다.. .");
},
eat : function(){
alert (this.name " is eating...");
}
}
var cat = new Animal("케이트");
alert(cat.name);
cat.jump()


마찬가지로 동일한 방법을 사용하여 클래스에 유형과 같은 새 속성을 추가할 수도 있습니다.
5. 위에서 이야기한 내용은 자바스크립트에서 클래스를 만드는 방법과 클래스를 만드는 방법입니다. 클래스에 속성과 메소드를 추가합니다. 다음으로 클래스 상속을 구현하는 방법에 대해 설명하겠습니다.
상속을 달성하려면 프로토타입을 통해 클래스 상속을 구현할 수 있습니다. 먼저 Dog 클래스를 선언하고(아직 이해가 되지 않으면 위의 관련 내용을 다시 읽어보세요) Animal 클래스를 상속받도록 해야 합니다.

코드 복사

코드는 다음과 같습니다. function Dog(){}; >Dog.prototype = new Animal("Henry");

그런 다음 새 개를 인스턴스화하고 해당 메서드를 호출하여 성공하는지 확인할 수 있습니다.

코드 복사

코드는 다음과 같습니다.

function Dog(){};
Dog.prototype = new Animal("Henry")
var dog = new Dog()
>dog.eat();

물론 코드가 정확하다면 "Henry is Jump...", "Henry is eating..."이라는 메시지가 표시됩니다.
6. 이제 클래스 상속이 구현되었으니 또 다른 문제를 염두에 두어야 하는데, 바로 다형성의 문제입니다.
다형성은 동일한 작업, 기능 또는 프로세스가 여러 유형의 객체에 적용되어 서로 다른 결과를 얻을 수 있음을 의미합니다. 동일한 메시지를 수신할 때 서로 다른 객체가 서로 다른 결과를 생성할 수 있는 현상을 다형성이라고 합니다.
상속을 통해 하위 클래스는 상위 클래스의 메서드를 상속받았지만 다형성을 달성하려면 하위 클래스의 메서드를 다시 작성해야 합니다.
좀 더 명확하게 표현하기 위해 또 다른 Pig 클래스를 만들고 Animal 클래스를 상속합니다. 만드는 방법은 알려드리지 않겠습니다. 생성된 코드는 다음과 같습니다.

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

function Dog(){}; >Dog.prototype = new Animal("Henry");
function Pig(){}
Pig.prototype = new Animal("Coco")
var dog(); 🎜>dog .jump();
dog.eat();
var pig = new Pig()
pig.eat(); 🎜>
실행한 후에는 Animal 클래스를 상속받기 때문에 결과는 확실히 "XX가 뛰고 있다...", "XX가 먹고 있다..."가 될 것이고, 우리가 달성하고자 하는 것은 메서드를 다시 작성하는 것입니다. 다음과 같은 방법으로 메서드 재정의를 구현할 수 있습니다.

코드 복사

코드는 다음과 같습니다. function Dog(){};// 개 클래스 생성Dog.prototype = new Animal("Henry"); //개 메서드 재정의Dog.prototype.jump = function(){

alert("안녕하세요, 이 사람은 " this.name "점프 중입니다...")

};
Dog.prototype.eat = function(){
alert("헨리가 지금 뼈를 먹고 있습니다."); >};
function Pig(){};//돼지 하위 클래스 생성
Pig.prototype = new Animal("Coco")
//돼지 메서드 재정의
Pig.prototype .jump = function(){
alert("죄송합니다. " this.name "은(는) 점프할 수 없습니다.")
}
Pig.prototype.eat = function(){
alert( "안녕하세요. 저는 "this.name"입니다. 맛있는 것을 먹고 있습니다.")
}
var dog = new Dog()
dog.jump(); .eat();
var pig = new Pig();
pig.eat();


실행해 보세요. 메소드를 다시 작성할 수 있나요? ?
6. 개를 인스턴스화할 경우 이 개에 속성과 메소드를 별도로 추가하고 싶은데 어떻게 해야 하나요? 아래를 보세요




코드 복사

코드는 다음과 같습니다.

var dog = new Dog() ; //속성 및 메소드 추가 dog.type = "Doberman Pinscher"; dog.shout = function(){ alert("저는 " this.type "입니다." ); } dog.jump();

dog.eat()

//새 메소드 호출


7. 자, 이 글은 여기에 쓰여있습니다. 초보자는 클래스 생성과 상속에 대해 어느 정도 이해하고 있어야 한다고 생각합니다. 질문이 있으시면 메시지를 남겨주세요. 조언해주셔서 감사합니다.