JavaScript의 프로토타입 및 프로토타입 체인에 대한 코드 설명

이 글의 내용은 JavaScript의 프로토타입 및 프로토타입 체인에 대한 코드 설명입니다. 필요한 친구들이 참고할 수 있기를 바랍니다.

많은 프런트엔드 개발자에게 JavaScript의 프로토타입과 프로토타입 체인은 상대적으로 혼란스러운 지점이므로 이 글은 이 측면에 대한 나의 이해를 기록하고 앞으로 더 깊은 이해로 업데이트할 것입니다.

객체

프로토타입과 프로토타입 체인을 이해하려면 먼저 객체가 무엇인지 이해해야 합니까? 객체 지향 프로그래밍(OOP)은 현재 주류 프로그래밍 패러다임으로, 다양하고 복잡한 관계를 여러 객체로 추상화한 후 이를 분할하고 협력하여 실제 환경의 시뮬레이션을 완성하는 것입니다. 따라서 객체는 단일 물리적 객체의 추상화이며, 추상화를 통해 얻은 객체는 속성과 메서드를 포함하는 컨테이너입니다. 예를 들어, 학생을 학생 개체로 추상화하면 속성을 사용하여 학생의 학년(예: 중학교 1학년, 고등학교 1학년 등)을 기록할 수 있으며, 방법은 다음과 같습니다. 학생의 특정 행동(예: 공부, 놀이 등)을 나타내는 데 사용됩니다.

생성자, 인스턴스 객체 및 상속

객체 지향 프로그래밍을 사용하려는 경우 첫 번째 작업은 객체를 생성하는 것입니다. JavaScript에서 생성자는 특히 인스턴스 객체를 생성하는 데 사용됩니다. 생성자는 모두 동일한 구조를 갖는 여러 인스턴스 개체를 생성할 수 있습니다.

var Student= function () {
  this.age= 18;
};

var s = new Student();
s.age// 18

특별히 주의해야 할 점:

• 위 코드에서 Student는 생성자이지만 일반 함수와 구별하기 위해 이름의 첫 글자를 대문자로 표기해야 합니다.

• this 키워드는 생성할 객체 인스턴스를 나타내는 함수 본문 내부에서 사용됩니다.

• 객체를 생성할 때는 새 명령을 사용해야 합니다. new만 새 인스턴스 객체를 생성합니다.

new 명령을 사용하여 새 인스턴스 객체를 생성하는 것 외에도 Object.create()를 통해 생성할 수도 있습니다. 이 방법은 생성자를 가져올 수는 없지만 기존 객체만 가져올 수 있는 경우에 적합합니다. 물체.

var student1 = {
    name:'Solar',
    age:18,
    greeting:function(){
        console.log('Hello!');
    }
};
var student2 = Object.create(student1);
student2.name//Solar
student2.greeting()//Hello!

위 코드에서 Object.create 메소드는 Student1 객체를 프로토타입으로 사용하고 Student2 객체를 생성합니다. Student2는 Student1의 모든 속성과 메서드를 상속합니다.

프로토타입

우선 프로토타입이 왜 존재하는지 알아볼까요?

function Student(name, age) {
  this.name = name;
  this.age = age;
  this.greeting = function(){
    console.log('Hello!');
  }
}

var student1= new Student('Solar', '18');
var student2 = new Student('Moonbyul', '17');

student1.greeting=== student2.greeting
// false

위 코드에서 볼 수 있듯이 생성자를 통해 인스턴스화된 개체에는 모두 인사말 메서드가 있지만 이 메서드는 각 인스턴스 개체 자체에서 생성되므로 인스턴스가 실행될 때마다 새로운 인사말이 생성됩니다. 방법이 생성됩니다. 하지만 사실 인사말 방식도 똑같고, 여러번 생성해서 자원을 낭비할 필요도 없기에 자바스크립트 프로토타입 객체가 탄생하게 되었습니다. JavaScript는 각 함수에 객체를 가리키는 프로토타입 속성이 있다고 규정합니다.

function Animal(name) {
  this.name = name;
}
Animal.prototype.color = 'white';
var cat1 = new Animal('大毛');
var cat2 = new Animal('二毛');
cat1.color // 'white'
cat2.color // 'white'

위 코드에서 생성자 Animal의 프로토타입 속성은 인스턴스 개체 cat1 및 cat2의 프로토타입 개체입니다. 프로토타입 객체에 색상 속성을 추가하면 모든 인스턴스 객체가 이 속성을 공유합니다.

프로토타입 객체의 속성은 인스턴스 객체 자체의 속성이 아닙니다. 프로토타입 객체를 수정하는 한 변경 사항은 모든 인스턴스 객체에 즉시 반영됩니다.

Animal.prototype.color = 'yellow';
cat1.color // "yellow"
cat2.color // "yellow"

인스턴스 객체 자체에 특정 속성이나 메소드가 있는 경우 프로토타입 객체에서 해당 속성이나 메소드를 찾지 않습니다.

cat1.color = 'black';
cat1.color // 'black'
cat2.color // 'yellow'
Animal.prototype.color // 'yellow';

프로토타입 체인

JavaScript에서는 모든 개체가 자신만의 프로토타입 개체(프로토타입)를 갖는다고 규정합니다. 한편으로는 모든 객체가 다른 객체의 프로토타입 역할을 할 수 있습니다. 반면에 프로토타입 객체도 객체이기 때문에 자체 프로토타입도 갖습니다. 따라서 "프로토타입 체인"이 형성됩니다. 객체에서 프로토타입으로, 그리고 프로토타입의 프로토타입으로…

계층별로 추적하면 모든 객체의 프로토타입이 결국 Object로 추적될 수 있습니다. 프로토타입, 즉 Object 생성자의 프로토타입 특성입니다. 즉, 모든 개체는 Object.prototype의 속성을 상속합니다. Object.prototype의 프로토타입이 null입니다. null에는 속성이나 메서드가 없으며 자체 프로토타입도 없습니다. 따라서 프로토타입 체인의 끝은 null입니다.

위 내용은 JavaScript의 프로토타입 및 프로토타입 체인에 대한 코드 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!