js 프로토타입 체인 및 상속 분석(첫 경험)_javascript 기술

먼저 객체의 프로토타입은 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입니다. z 속성이 obj에 있는지 확인하면 false로 표시되고 obj에는 z 속성이 없지만 프로토타입 체인을 검색하면 foo.prototype에 있는 것으로 확인되므로 obj.z=3입니다. 첫 번째 예인 obj.valueOf()와 toString은 모두 Object .prototype이므로 모든 객체의 프로토타입이 Object.prototype이기 때문에 모든 객체에는 이 두 가지 특성이 있습니다. 물론 다음과 같은 특수한 경우는 제외됩니다.

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

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의 모든 속성이며, 하위 클래스 Student가 기본 클래스 Person을 상속하므로 Person.prototype의 원래 속성을 상속할 수 있습니다. Person.prototype = Student.prototype이라고 직접 작성하면 둘 다 동일한 객체를 가리킵니다. Student.prototype에 속성을 추가하면 동일한 속성이 Person의 프로토타입 체인에 추가됩니다.

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

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

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

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

위의 js 프로토타입 체인 및 상속 분석(첫 번째 경험)은 모두 편집자가 공유한 내용이므로 참고가 되기를 바라며, Script Home에 많은 지원 부탁드립니다.