최근 타오바오 인터뷰 중 누군가의 경험에 대해 온라인에서 읽었는데, 제가 명확하지 않은 부분이 많다는 것을 발견하고 일부 문제에 대한 이해를 심화하기 위해 기사를 썼습니다.
기사에 언급된 질문은 다음과 같습니다. JavaScript는 상속을 어떻게 구현합니까?
아래에서는 깊은 인상을 주기 위해 온라인에서 찾은 몇 가지 방법과 예를 설명하겠습니다.
우리는 JavaScript의 함수가 함수 정의에 사용되는 것 외에도 클래스 정의에도 사용될 수 있다는 것을 알고 있습니다.
JavaScript의 상속은 약간 이상합니다. C++ 및 일부 객체 지향 언어와 달리 공개 및 비공개와 같은 액세스 제어 수정이 없으며 상속을 나타내는 구현이나 기타 특정 기호가 없습니다.
JavaScript 클래스의 상속에 대해서는 다음 예를 참조할 수 있습니다.
다음과 같이 코드 코드를 복사합니다.
<스크립트 유형="텍스트/자바스크립트">
함수 사람() {
//속성
this.Gender = "여성";
this.Age = 18;
this.Words = "침묵";
// 방법
this.shouting = function() {
Alert("행복합니다! 상위 클래스의 메소드");
}
}
//상속
함수프로그래머() {
this.base = 사람;
}
Programmer.prototype = 새로운 사람;
//서브클래스에 새로운 메소드 추가
Programmer.prototype.typeCode = 함수() {
Alert("저는 코더입니다! IT 이주 노동자입니다. 매우 불행합니다. 하위 클래스 방법");
}
// 호출 예
함수 sayHello() {
var a = 새로운 프로그래머();
Alert(a.Gender); // 상위 클래스의 속성을 호출합니다.
a.shouting(); // 상위 클래스의 메소드 호출
a.typeCode(); // 하위 클래스의 메서드 호출
}
안녕하세요();
</script>
위의 예에서는 일부 속성과 메서드가 포함된 개인 클래스가 먼저 선언된 다음 기본 속성이 있는 프로그래머 클래스가 선언됩니다. 미래 모든 상속된 클래스를 작성해야 하며, 그런 다음 개인 클래스를 프로그래머의 프로토타입 객체(프로토타입)에 복사하여 클래스 상속이 실현됩니다.
JavaScript에서 클래스 및 상속의 일부 원칙을 시뮬레이션합니다.
객체 지향 언어에서는 클래스를 사용하여 사용자 정의 객체를 만듭니다. 하지만 JavaScript의 모든 것은 개체입니다. 그렇다면 사용자 정의 개체를 만드는 방법은 무엇입니까?
이를 위해서는 또 다른 개념인 프로토타입의 도입이 필요합니다. 프로토타입을 단순히 템플릿으로 간주할 수 있습니다. 새로 생성된 사용자 정의 개체는 모두 이 템플릿(프로토타입)의 복사본입니다(실제로는 복사본이 아니라 링크입니다. 단지 이러한 종류의 링크는 보이지 않으며 사람들에게 사본이라는 인상을 줍니다.)
프로토타입을 통해 사용자 정의 객체를 생성하는 예를 살펴보겠습니다.
다음과 같이 코드 코드를 복사합니다.
//건설자
함수 사람(이름, 성별) {
this.name = 이름;
this.sex = 섹스;
}
//Person의 프로토타입을 정의합니다. 프로토타입의 속성은 사용자 정의 개체에서 참조할 수 있습니다.
Person.prototype = {
getName: 함수() {
this.name을 반환합니다.
},
getSex: 함수() {
this.sex를 반환합니다.
}
}
여기서는 Person 함수를 사용자 정의 객체를 생성하는 함수인 생성자라고 부릅니다. JavaScript는 생성자와 프로토타입을 통해 클래스의 기능을 시뮬레이션하는 것을 볼 수 있습니다.
다음은 사용자 정의 개체를 생성할 때 JavaScript가 수행하는 특정 작업을 자세히 설명하는 예입니다.
다음과 같이 코드 코드를 복사합니다.
var zhang = new Person("장산", "남자");
console.log(zhang.getName()); // "장산"
var chun = new Person("춘화", "여자");
console.log(chun.getName()); // "춘화"
var zhang = new Person("ZhangSan", "man") 코드가 실행되면 실제로 다음 작업이 내부적으로 수행됩니다.
빈 개체(new Object())를 만듭니다.
Person.prototype의 속성(키-값 쌍)을 이 빈 객체에 복사합니다(앞서 언급했듯이 내부 구현은 복사본이 아니라 숨겨진 링크입니다).
this 키워드를 통해 이 개체를 생성자에 전달하고 생성자를 실행합니다.
이 개체를 zhang 변수에 할당합니다.
모든 작업이 완료되었습니다.
프로토타입 템플릿이 인스턴스화된 객체에 복사되지 않고 연결 방식임을 증명하려면 다음 코드를 참조하세요.
다음과 같이 코드 코드를 복사합니다.
함수 사람(이름, 성별) {
this.name = 이름;
this.sex = 섹스;
}
Person.prototype.age = 20;
var zhang = new Person("장산", "남자");
console.log(장.나이); // 20
// 프로토타입의 age 속성을 재정의합니다.
장나이 = 19;
console.log(장.나이); // 19
zhang.age 삭제;
// 인스턴스 속성 age를 삭제한 후 프로토타입에서 이 속성 값을 다시 가져옵니다.
console.log(장.나이); // 20
위의 예에서 복사로만 얻은 경우에는 age 속성을 삭제한 후 객체가 존재하지 않습니다. 그러나 예의 age 속성은 계속 출력될 수 있거나 이전 값을 덮어쓰게 됩니다. 하위 클래스에서 동일한 이름의 속성만 삭제되었으며 상위 클래스의 age 속성은 보이지 않는 링크를 통해 객체에 여전히 존재합니다.
JavaScript에서 단순 상속을 구현하는 방법은 무엇입니까?
다음 예제에서는 Person의 프로토타입 프로토타입에서 모든 속성을 상속하는 직원 클래스 Employee를 만듭니다.
다음과 같이 코드 코드를 복사합니다.
function Employee(이름, 성별, 직원ID) {
this.name = 이름;
this.sex = 섹스;
this.employeeID = 직원ID;
}
// Employee의 프로토타입이 Person의 인스턴스를 가리키도록 합니다.
// Person 인스턴스는 Person 프로토타입의 메서드를 호출할 수 있으므로 Employee 인스턴스도 Person 프로토타입의 모든 속성을 호출할 수 있습니다.
Employee.prototype = 새로운 사람();
Employee.prototype.getEmployeeID = function() {
this.employeeID를 반환합니다.
};
var zhang = new Employee("장산", "남자", "1234");
console.log(zhang.getName()); // "장산
좋아요, 위의 내용은 JavaScript에서 상속을 구현하기 위한 몇 가지 특정 프로세스와 방법입니다.
물론 요약하면 JavaScript의 상속 메커니즘은 일부 객체 지향 언어에 비해 거칠고 몇 가지 결함이 있지만 여전히 프런트엔드 개발자의 효율성을 저하시키지 않습니다. . 열광.