JavaScript의 원형

11092 단어 webdevtutorialjavascript

소개하다.

  • 자바스크립트는 원형을 기반으로 하는 언어로 계승을 통해 원형을 속성, 방법 찾기, 코드 재사용에 사용한다.
  • 이 글에서 우리는 원형, 원형 체인과 원형 계승을 배울 것이다.

    • 원형 및 원형 체인

  • JavaScript에는 두 가지 유형의 데이터가 있는데 하나는 원시 데이터이다
    (숫자, 문자열, 부울 값) 및 다른 하나는 객체 유형(배열, 객체 문자 및 함수)입니다.
  • 기본체와 대상 유형은 각자의 대상에 의해 포장된다.
  • 디지털용Number 포장, 문자열용String 포장, 브리지용Boolean 포장.
  • 수조는 Array로 포장하고 대상은 Object로 포장하며 함수는 Function로 포장한다.
  • 모든 포장기 대상은prototype이라는 속성을 가지고 있다.
  • 이 원형은 모든 재사용 가능한 속성, 방법을 포함하는 대상이며, 그 부모 대상의 원형도 있다.
  • 모든 포장기 대상의 부모 대상은 Object이라는 전역 대상이다.
  • 원형으로 연결된 대상체인을 원형체인이라고 한다.
  • 이제 원형 체인을 하나의 예로 시각화합시다.
  • 코드에서 어떻게 작동하는지 보여 주세요.
  • 변수의 원형을 얻기 위해 우리는 Object.getPrototypeOf() 방법을 사용할 수 있다.
    • const arr = [1, 2, 3];

const arrWrapperProto = Object.getPrototypeOf(arr);

console.log(arrWrapperProto); // Array

const objectProto = Object.getPrototypeOf(arrWrapperProto);

console.log(objectProto); // Object

const objectParentProto = Object.getPrototypeOf(objectProto);

console.log(objectParentProto); // null

    속성, 메소드 찾기

  • 등록 정보나 메서드에 액세스하려면 먼저 JavaScript에서 현재 객체를 봅니다.
  • 찾을 수 없는 경우 원형 체인을 사용하여 상위 객체를 찾습니다.
  • 속성이나 방법을 찾거나null에 도달할 때까지 계속됩니다.
  • 이것은 속성이나 방법을 찾는 방식이다.

    • 전형적인 유전

  • 원형의 주요 용례는 계승을 통해 코드를 다시 사용하는 것이다.
  • 원형 체인으로 인해 계승은 가능하다.
  • 예를 들어 이해합시다.
    • const person = {
  isTalkative: true,
  talk() {
    console.log("Talking...");
  },
};

const student = {
  name: "John",
  age: 12,
};

Object.setPrototypeOf(student, person);

console.log(student.name); // John

console.log(student.isTalkative); // true

student.talk(); // Talking...

console.log(Object.getPrototypeOf(student) === person); // true
  • 여기서 우리는 Object.setPrototypeOf()를 사용하고 학생의 원형을 개인으로 설정한다.
  • 이것은 학생t의 원형이 개인이 된다는 것을 의미한다. 또는 다시 말하면 학생t의 원형은 학생의 속성과 방법을 계승할 것이다.
  • 따라서 학생들은 모든 속성과 방법을 직접 방문할 수 있다.
  • 상기 예의 원형 체인을 상상해 봅시다.
  • 여기 학생들의 원형은 사람이고 사람의 원형은 Object이며 Object의 원형은 비어 있다.
  • 이것은 학생들이 개인과Object가 제공한 모든 속성과 방법을 방문할 권리가 있다는 것을 의미한다.
  • 마찬가지로 이 사람은 Object에서 모든 속성과 방법을 접근할 권리가 있다.

    • 객체 작성

  • 현재 우리는 원형을 이해했다. 원형을 어떻게 사용해서 우리 자신의 대상을 만드는지 보자.
    • function Student(name, age) {
  this.name = name;
  this.age = age;
}

Student.prototype.isTalkative = true;

Student.prototype.talk = function () {
  console.log("Talking...");
};

const john = new Student("John", 12);

console.log(john.age); // 12

john.talk(); // Talking...
  • 여기의student 함수는 대상을 구성하거나 만드는 데 사용되기 때문에 constructor function라고 부른다.
  • 일반적인 약속은 구조 함수는 낙타봉형의 외피를 가지고 그것들을 구조 함수로 표시해야 한다는 것이다.
  • 키워드this는 만든 객체를 가리킵니다.
  • 이 키워드의 작업 원리에 대해 더 알고 싶으면 제 댓글을 보십시오.
  • 화살표 함수는 구조 함수를 만드는 데 사용할 수 없습니다.
  • 모든 대상이 원형 계승을 통해 접근할 수 있도록 함수의 원형에 속성과 방법을 설정하고 있습니다.
  • 키워드는 구조 함수를 사용하여 대상을 만드는 데 사용됩니다.
  • new 방법은 대상 문자에서 대상을 만드는 데 사용됩니다.
  • 대상 문자에서 대상을 만드는 방법을 보여 줍니다.
    • const person = {
  isHappy: true,
  introduce() {
    console.log(`Hi I'm ${this.name}`);
  },
};

const john = Object.create(person);

john.name = "John";

console.log(john.isHappy); // true
john.introduce(); // Hi I'm John

console.log(Object.getPrototypeOf(john) === person); // true
  • 여기Object.create() 방법은john의 원형을 개인 대상으로 설정합니다.
  • ES6에서 클래스는 자바스크립트에 도입되었고 대상을 만드는 데 사용되었지만 이것은 문법상의 변화일 뿐이며 막후에서도 원형을 바탕으로 하는 계승을 사용한다.

    • 결론

  • 자바스크립트의 모든 내용에prototype 속성을 포함하는 패키지 대상이 있습니다.
  • Prototype은 모든 재사용 가능한 속성, 방법과 부모 대상의 원형을 포함하는 대상이다.
  • 원형 체인은 원형 링크의 대상 체인이다.
  • JavaScript는 원형 체인을 사용하여 속성 및 메서드를 찾습니다.
  • 원형 계승은 원형 체인 중의 아버지 대상의 속성과 방법을 중용하는 능력이다.
    • C# 동적 교체 방법 사용
    잡무(부개발): 25.5.1~26.1.0

    좋은 웹페이지 즐겨찾기

    개발자 우수 사이트 수집

    개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
    best100-homepage