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
//声明一个构造函数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
두 번째 방법은 이 점을 피하고 상속을 잘 구현하여 인스턴스가 먼저 하위 클래스를 쿼리한 다음 해당 속성이 없으면 기본 클래스를 쿼리하도록 합니다.
세 번째 유형은 상속도 구현되지만 Person 생성자를 호출합니다. 이 예에서 생성자에는 name과 age라는 두 개의 매개변수가 있지만 이 세 번째 유형은 아무것도 전달하지 않으며 인스턴스화되지 않습니다.
위 내용은 이 글의 전체 내용입니다. 모두 마음에 드셨으면 좋겠습니다.