상속을 구현하기 위해 JavaScript를 사용해야 하는 이유는 무엇입니까? 여러 상속 방법의 예에 대한 자세한 설명

상속을 구현하기 위해 자바스크립트를 사용해야 하는 이유는 무엇입니까?

초기 PC 시스템의 성능은 실제로 서버 측에 있지 않으며 클라이언트 브라우저는 순전히 장식용입니다. 당시 대중적인 테이블 레이아웃과 전화선 인터넷 액세스와 함께 웹 페이지 탐색이 매우 느렸습니다. 현재 인터넷 시대가 급속도로 발전하고 있으며 개인용 컴퓨터 하드웨어가 크게 향상되었으며 클라이언트 브라우저의 성능도 매우 실망스럽습니다. 웹 개발 모델도 조용히 변화하고 있습니다. 서버는 더 이상 이전처럼 "어려워지지" 않습니다. 대신 브라우저는 이러한 방식으로 각 클라이언트에 부담을 분산시켜야 합니다. 기업의 비용 절감은 웹 프런트엔드 개발을 더욱 흥미롭게 만듭니다. 점점 더 많은 프런트엔드 프레임워크가 등장하고 심지어 많은 프런트엔드 MVC 프레임워크도 등장했습니다. 이러한 맥락에서 JavaScript의 역할은 단순히 간단한 확인, 요청 보내기, DOM 운영이 아니라 프런트 엔드 라우팅 및 비즈니스 계층과 같은 더 많은 역할을 수행해야 하며 JavaScript는 많은 논리적 작업을 수행해야 합니다. 이는 프런트엔드 데이터(예: 모델)의 추상화를 포함하고 객체 지향적 사고를 통해서만 추상화된 데이터를 잘 처리할 수 있으므로 여기서 상속은 매우 중요합니다.

이제 프론트 데스크에서 name과 age라는 기본 속성을 가진 Person이라는 모델을 추출합니다. 기본적으로 누구나 말할 수 있으므로 말하기 기능은 각 인스턴스의 프로토타입 객체에 배치되어 즐길 수 있습니다. 이제 Man의 경우 Person의 기본 속성을 상속하고 이를 기반으로 고유한 속성을 추가해야 합니다.

function Person (name, age) {
  this.name = name;
  this.age = age;
}
Person.prototype.say = function(){
  console.log('hello, my name is ' + this.name);
};
function Man() {
  //my own properties
}

주요 상속 방법:

1. 프로토타입 체인 상속

function Person (name, age) {
  this.name = name;
  this.age = age;
}
Person.prototype.say = function(){
  console.log('hello, my name is ' + this.name);
};
function Man() {
}
Man.prototype = new Person('pursue');
var man1 = new Man();
man1.say(); //hello, my name is pursue
var man2 = new Man();
console.log(man1.say === man2.say);//true
console.log(man1.name === man2.name);//true

이 상속 방법은 위의 Person(인스턴스 및 프로토타입)의 모든 속성 방법을 얻기 위해 매우 직접적입니다. ), 상위 클래스의 new Person('pursue') 인스턴스를 하위 클래스의 프로토타입에 직접 할당합니다. 실제로 하위 클래스의 인스턴스 man1 및 man2 자체는 완전히 비어 있는 객체이므로 모든 속성과 메서드를 프로토타입화해야 합니다. 체인을 찾아보세요. 따라서 발견된 속성 메서드는 동일합니다.
그래서 프로토타입 체인 상속을 직접 사용하는 것은 비현실적입니다.

2. 생성자 상속 사용

function Person (name, age) {
  this.name = name;
  this.age = age;
}
Person.prototype.say = function(){
  console.log('hello, my name is ' + this.name);
};
function Man(name, age) {
  Person.apply(this, arguments);
}
//Man.prototype = new Person('pursue');
var man1 = new Man('joe');
var man2 = new Man('david');
console.log(man1.name === man2.name);//false
man1.say(); //say is not a function

여기서 하위 클래스는 생성자에서 적용을 사용하여 상위 클래스의 생성자를 호출하여 상위 클래스의 속성을 상속하는 효과를 얻습니다. 프로토타입 체인을 직접 사용하는 것보다 많은 것이 있고 적어도 각 인스턴스에는 자체 리소스 공유가 있지만 이 메소드는 상위 클래스의 인스턴스 속성만 상속할 수 있으므로 모든 속성을 상속하기 위해 say 메소드를 찾을 수 없습니다. 및 상위 클래스의 메소드, 프로토타입 체인을 수정해야 하므로 조합 상속 메소드가 도입됩니다.

3. 조합 상속

function Person (name, age) {
  this.name = name;
  this.age = age;
}
Person.prototype.say = function(){
  console.log('hello, my name is ' + this.name);
};
function Man(name, age) {
  Person.apply(this, arguments);
}
Man.prototype = new Person();
var man1 = new Man('joe');
var man2 = new Man('david');
console.log(man1.name === man2.name);//false
console.log(man1.say === man2.say);//true
man1.say(); //hello, my name is joe

man1과 man2의 인스턴스 속성은 실제로 프로토타입 속성을 재정의하지만 프로토타입의 say 메서드를 재정의하지 않는다는 점에 유의해야 합니다. 따라서 여기서 man1.say === man2.say는 여전히 true를 반환하므로 프로토타입 속성을 재정의하지 않도록 매우 주의해야 합니다. 프로토타입 속성은 모든 인스턴스에 공통되기 때문입니다.

4. 기생 조합 상속

솔직히 다음 형식의 이름이 무엇인지는 잘 모르겠지만 실제로 가장 인기 있고 고전적인 JavaScript 상속 방법입니다. 사실 프로토타입 객체의 구조만 이해하면 됩니다:

function Person (name, age) {
      this.name = name;
      this.age = age;
    }
Person.prototype.say = function(){
  console.log('hello, my name is ' + this.name);
};
function Man(name, age) {
  Person.apply(this, arguments);
}
Man.prototype = Object.create(Person.prototype);//a.
Man.prototype.constructor = Man;//b.
var man1 = new Man('pursue');
var man2 = new Man('joe');
console.log(man1.say == man2.say);
console.log(man1.name == man2.name);

사실 기생 조합 상속과 위 조합 상속의 차이점은 서브클래스의 프로토타입 객체를 구성하는 방식에만 있습니다( a. 및 b.) 여기서 사용되는 Object.creat(obj) 메서드는 다음과 유사하게 들어오는 obj 개체의 얕은 복사본을 만듭니다.

function create(obj){
  function T(){};
  T.prototype = obj;
  return new T();
}

따라서 하위 클래스는 상위 클래스의 프로토타입 객체와 비교됩니다. 하위 클래스의 프로토타입을 직접 복사하는 일반적인 결합 상속(예: Man.prototype = new Person();)과 달리 좋은 연결입니다. 폭력적인 속성 덮어쓰기. 기생 조합 상속 방법은 인스턴스 속성과 프로토타입 속성을 별도로 상속하므로 구현이 더 합리적입니다.

참고: 코드 b는 instanceof의 결과를 변경하지 않지만 생성자가 필요한 시나리오에서는 더 엄격합니다.

위 내용은 상속을 구현하기 위해 JavaScript를 사용해야 하는 이유는 무엇입니까? 여러 상속 방법의 예에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!