JavaScript가 상속_javascript 기술을 구현하는 방법에 대한 심층적인 이해

최근 타오바오 인터뷰 중 누군가의 경험에 대해 온라인에서 읽었는데, 제가 명확하지 않은 부분이 많다는 것을 발견하고 일부 문제에 대한 이해를 심화하기 위해 기사를 썼습니다.

기사에 언급된 질문은 다음과 같습니다. JavaScript는 상속을 어떻게 구현합니까?

아래에서는 인상을 깊게 하기 위해 인터넷에서 찾은 몇 가지 방법과 예를 설명하겠습니다.

우리는 JavaScript의 함수가 함수 정의에 사용되는 것 외에도 클래스 정의에도 사용될 수 있다는 것을 알고 있습니다.

JavaScript의 상속은 C 및 일부 객체 지향 언어와 달리 공개, 비공개 및 기타 액세스 제어 수정이 없으며 상속을 나타내는 구현 또는 기타 특정 기호가 없습니다.

JavaScript 클래스 상속에 대해서는 다음 예시를 참고하세요.

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

위의 예에서는 일부 속성과 메서드가 포함된 개인 클래스가 먼저 선언된 다음 기본 속성이 포함된 프로그래머 클래스가 선언됩니다. 이 속성은 필수는 아니지만 사양과 향후를 위해 필요합니다. 객체가 상속받은 클래스를 찾을 때 작성하고, 그 후 프로그래머의 프로토타입 객체(프로토타입)에 person 클래스를 복사해야 클래스 상속이 구현됩니다.

JavaScript에서 클래스 및 상속의 몇 가지 원칙 시뮬레이션

객체 지향 언어에서는 클래스를 사용하여 사용자 정의 객체를 만듭니다. 하지만 JavaScript의 모든 것은 개체입니다. 그렇다면 사용자 정의 개체를 만드는 방법은 무엇입니까?

이를 위해서는 프로토타입이라는 또 다른 개념을 도입해야 합니다. 새로 생성된 사용자 정의 개체는 모두 이 템플릿(프로토타입)의 복사본입니다(실제로는 복사본이 아니지만 링크는 보이지 않습니다). 그리고 사본 같은 느낌이 듭니다).

프로토타입을 통해 커스텀 객체를 생성하는 예를 살펴보겠습니다.

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

//Constructor
function Person(이름, 성별) {
this.name = 이름;
this.sex = sex;
}
/ / Person Prototype을 정의하면 프로토타입의 속성을 사용자 정의 개체에서 참조할 수 있습니다.
Person.prototype = {
     getName: function() {
                                                                                                                                    {
                                     ~ ~  ;
여기서 Person 함수를 생성자라고 부릅니다. 이는 사용자 정의 개체를 생성하는 함수입니다. JavaScript는 생성자와 프로토타입을 통해 클래스의 기능을 시뮬레이션하는 것을 볼 수 있습니다.

다음은 사용자 정의 개체를 생성할 때 javascript가 수행하는 특정 작업을 설명하는 예입니다.

코드 복사

코드

var zhang = new Person("ZhangSan", "man");console.log(zhang.getName()) // "ZhangSan" var chun = new Person("춘화", "여자");console.log(chun.getName()) // "춘화"

var zhang = new Person("ZhangSan", "man") 코드가 실행되면 실제로 내부적으로 다음 작업이 수행됩니다.

빈 개체(new Object())를 만듭니다.
Person.prototype의 속성(키-값 쌍)을 이 빈 객체에 복사합니다(앞서 언급했듯이 내부 구현은 복사본이 아니라 숨겨진 링크입니다).
this 키워드를 통해 이 개체를 생성자에 전달하고 생성자를 실행합니다.
이 개체를 zhang 변수에 할당합니다.
모든 작업이 완료되었습니다.
프로토타입 템플릿이 인스턴스화된 객체에 복사되지 않고 연결 방식임을 증명하려면 다음 코드를 참조하세요.

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

function Person(이름, 성별) {
this.name = 이름;
this.sex = sex;
}
Person.prototype.age = 20;
var zhang = new Person("ZhangSan", "man");
console.log(zhang.age) // 20
// 프로토타입 덮어쓰기
zhang.age = 19;
console.log(zhang.age); // 19
delete zhang.age;
// 인스턴스 속성 삭제 후 age, 이 속성은 프로토타입
console.log(zhang.age) // 20

에서 가져옵니다.

위 예시에서 복사로만 얻은 경우, age 속성을 삭제한 후에는 객체가 존재하지 않습니다. 그러나 예시의 age 속성은 여전히 ​​출력되거나 덮어쓸 수 있음을 나타냅니다. 하위 클래스에서 동일한 이름의 속성만 삭제되었으며 상위 클래스의 age 속성은 보이지 않는 링크를 통해 객체에 여전히 존재합니다.

JavaScript에서 단순 상속을 구현하는 방법은 무엇입니까?

다음 예에서는 Person으로부터 프로토타입 프로토타입의 모든 속성을 상속하는 직원 클래스 Employee를 생성합니다.

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

function Employee(이름, 성별, 직원 ID) {
this.name = name;
this.sex = sex;
this.employeeID = EmployeeID;
}
// Employee의 프로토타입이 Person의 인스턴스를 가리키도록 합니다
// Employee의 Person 인스턴스는 Person 프로토타입의 메서드를 호출할 수 있으므로 Employee의 인스턴스도 Person 프로토타입의 모든 속성을 호출할 수 있습니다.
Employee.prototype = new Person();
Employee.prototype.getEmployeeID = function() {
return this.employeeID;
};
var zhang = new Employee("ZhangSan" , "man", "1234");
console.log(zhang.getName()); // "ZhangSan

자, 위는 JavaScript에서 상속을 구현하기 위한 몇 가지 특정 프로세스입니다. , 상속을 구현하는 방법 .

물론 요약하자면 JavaScript의 상속 메커니즘은 일부 객체 지향 언어에 비해 거칠고 몇 가지 결함이 있지만 일반적으로 여전히 프런트엔드 개발 속도를 늦추지는 않습니다. . 이에 대한 저자의 열정.