자바스크립트 프로토타입 체인과 상속_자바스크립트 기술에 대한 간략한 토론

JS 프로토타입 체인과 상속은 JS의 핵심이므로 다음 세 가지 예시를 통해 자세히 설명하겠습니다.

먼저 객체 obj를 정의합니다. 객체의 프로토타입은 obj._proto_입니다. ES5의 getPrototypeOf 메소드를 사용하여 obj의 프로토타입이 Object와 같은지 판단하여 존재 여부를 증명할 수 있습니다. .prototype. obj의 프로토타입은 true를 반환하므로 존재합니다. 그런 다음 foo() 함수를 정의합니다. 모든 함수에는 함수의 프로토타입인 프로토타입 개체가 있습니다. 함수의 프로토타입에 속성을 추가한 다음 인스턴스화된 개체는 new(아래)를 통해 해당 속성을 공유할 수 있습니다. ) 두 가지 사례를 자세히 소개하겠습니다.)

function foo(){}
foo.prototype.z = 3;
var obj = new foo();
obj.x=1;
obj.y=2;
obj.x //1
obj.y //2
obj.z //3
typeof obj.toString; //function
obj.valueOf(); // foo {x: 1, y: 2, z: 3}
obj.hasOwnProperty('z'); //false

여기서 obj의 프로토타입(_proto_)은 foo 함수의 프로토타입 속성을 가리키고, foo.prototype의 프로토타입은 Object.prototype을 가리키며, 프로토타입 체인의 끝이 null인지 확인하려면 hasOwnProperty를 사용하세요. z 속성이 obj에 있습니다. false로 표시되면 obj에는 z 속성이 없지만 프로토타입 체인을 검색하면 foo.prototype에 있는 것으로 확인되므로 obj.z=3입니다. 경우, obj.valueOf() 및 toString은 모두 Object.prototype에 있으므로 모든 객체의 프로토타입이 Object.prototype이기 때문에 모든 객체에는 이 두 가지 특성이 있습니다. 물론 다음과 같은 특수한 경우는 제외됩니다.

var obj2 = Object.create(null);
obj2.valueOf(); //undefined

Object.create()는 빈 객체를 생성하고 이 객체의 프로토타입은 매개변수를 가리킵니다. 다음 포괄적인 예는 클래스를 구현하여 다른 클래스를 상속하는 방법을 보여줍니다

//声明一个构造函数Person
function Person(name,age){
  this.name = name;
  this.age = age;
}
Person.prototype.hi = function (){
  console.log('Hi,my name is ' + this.name +',my age is '+this.age);
};
Person.prototype.LEGS_NUM=2;
Person.prototype.ARMS_NUM=2;
Person.prototype.walk = function (){
  console.log(this.name+' is walking !');
};
function Student(name,age,classNum){
  Person.call(this,name,age);
  this.classNum = classNum;
}
//创建一个空对象
Student.prototype = Object.create(Person.prototype);
//constructor指定创建一个对象的函数。
Student.prototype.constructor = Student;
Student.prototype.hi = function (){
  console.log('Hi,my name is ' + this.name +',my age is '+this.age+' and my class is '+this.classNum);
};
Student.prototype.learns = function (sub){
  console.log(this.name+' is learning '+sub);
};
//实例化一个对象Bosn
var Bosn = new Student('bosn',27,'Class 3');
Bosn.hi(); //Hi,my name is bosn,my age is 27 and my class is Class 3
Bosn.LEGS_NUM; //2
Bosn.walk(); //bosn is walking !
Bosn.learns('Math'); //bosn is learning Math

생성자 Person과 Student의 this는 인스턴스화된 객체(Bosn)를 가리키고, 이 객체의 프로토타입은 생성자의 프로토타입을 가리킵니다.

빈 객체를 생성하기 위해 Object.create() 메소드를 사용합니다. 이 객체의 프로토타입은 Person.prototype입니다. 이런 방식으로 작성하면 Person.prototype 속성에 영향을 주지 않고 스스로 Studnet.prototype을 생성할 수 있다는 것입니다. . 모든 속성은 Person.prototype의 원래 속성을 상속할 수 있습니다. 왜냐하면 하위 클래스 Student가 기본 클래스 Person을 상속하기 때문입니다. Person.prototype = Student.prototype이라고 직접 작성하면 둘 다 동일한 객체를 가리킵니다. Student.prototype에 속성을 추가하면 동일한 속성이 Person의 프로토타입 체인에 추가됩니다.

생성자 Student의 호출 메서드의 경우 이 내부는 새로 생성된 Student의 인스턴스화된 개체를 가리키며 호출을 통해 상속이 구현됩니다.

Student.prototype.constructor = Student, 이 문장의 의미는 Student.prototype 객체를 생성하는 함수로 Student를 지정하는 것입니다. 이 문장이 작성되지 않으면 객체의 기능은 여전히 ​​Person입니다.

상속을 구현하는 방법은 세 가지가 있는데,

function Person(name,age){
  this.name = name;
  this.age = age;
}
function Student(){

}
Student.prototype = Person.prototype; //1
Student.prototype = Object.create(Person.prototype); //2
Student.prototype = new Person(); //3

첫 번째는 위에서 언급했듯이 이렇게 직접 작성하면 하위 클래스와 기본 클래스가 동시에 bosn 인스턴스를 가리키게 됩니다.

두 번째 방법은 이 점을 피하고 상속을 잘 구현하여 인스턴스가 먼저 하위 클래스를 쿼리한 다음 해당 속성이 없으면 기본 클래스를 쿼리하도록 합니다.

세 번째 유형은 상속도 구현되지만 Person 생성자를 호출합니다. 이 예에서 생성자에는 name과 age라는 두 개의 매개변수가 있지만 이 세 번째 유형은 아무것도 전달하지 않으며 인스턴스화되지 않습니다.

위 내용은 이 글의 전체 내용입니다. 모두 마음에 드셨으면 좋겠습니다.