JavaScript 프로토타입 체인 이해

모든 JavaScript 객체는 다른 객체와 연관되어 있으며, 연관된 객체를 우리는 "프로토타입"이라고 부릅니다. 모든 객체는 프로토타입의 속성과 메서드를 상속받습니다. 프로토타입이 없는 특별한 객체가 있는데, 바로 Object입니다. 이에 대해서는 다음 그림에서 설명하겠습니다.

예를 들어 먼저 Student() 함수를 선언합니다.

function Student(name){
  this.name = name;
 this.hello = function(){
   alert(`Hello,${this.name}`);
 }
 }

이 함수에는 속성 이름과 hello 메서드가 포함되어 있습니다.
JavaScript에서는 new 키워드를 통해 Student 함수를 호출할 수 있으며(new를 작성하지 않는 것은 일반 함수이고 new를 작성하는 것은 생성자임) 아래와 같이 프로토타입이 Student.prototype을 가리키는 객체를 반환합니다.

var xiaoming = new Student("xiaoming");
alert(xiaoming.name); // xiaoming
xiaoming.hello(); // Hello,xiaoming

우리의 가정이 맞는지 확인하고 싶다면 Xiaoming.prototype과 Student.prototype이 같은지 비교하고 싶을 것입니다.
그러나 Xiaoming에는 프로토타입 속성이 없지만 __proto__를 사용하여 볼 수 있습니다. 다음으로, 이러한 속성을 사용하여 Xiaoming, Student 및 Object 사이의 프로토타입 체인을 볼 것입니다.

document.onreadystatechange = function(){
 // interactive表示文档已被解析，但浏览器还在加载其中链接的资源
 if(document.readyState === "interactive"){
  var xiaoming = new Student("xiaoming");
  alert(xiaoming.name);
  xiaoming.hello();
  console.log("xiaoming.__proto__：");
  console.log(xiaoming.__proto__);
  console.log("Student.prototype：");
  console.log(Student.prototype);
  console.log("xiaoming.__proto__ === Student.prototype：" + xiaoming.__proto__ === Student.prototype);
  console.log("Student.prototype.constructor：" + Student.prototype.constructor);
  console.log("Student.prototype.prototype：" + Student.prototype.prototype);
  console.log("Student.prototype.__proto__：");
  console.log(Student.prototype.__proto__);
  console.log(Object.prototype);
  console.log("Student.prototype.__proto__ === Object.prototype：" + Student.prototype.__proto__ === Object.prototype);
 }
}