프로토타입 살펴보기

프로토타입에 주목하는 이유

멋지고 화려한 js 프레임워크로 작업하려면 먼저 JavaScript를 이해하라는 지시를 받았습니다. "이것"의 범위 외에 또 다른 개념이 나를 혼란스럽게 할 것입니다. 프로토타입 아이디어가 떠오를 때 사람들은 항상 “그건 걱정하지 마세요. 중요하지만 실제로는 그렇지 않습니다.” 그래서 가장 오랫동안 프로토타입을 무시했습니다. 필요한 것을 얻을 수 있었고 실제로 걱정할 필요가 없었습니다. es6에 대한 실질적인 다이빙을 하고 클래스와 상속을 이해한 후.

고장

나는 자바스크립트가 C#이나 자바와는 다른 규칙에 따라 작동한다는 것을 알아차렸다. 참고 사항: 필요할 때 가끔 Java를 사용하지만 대학 때처럼은 아닙니다. 제 시절에는 Java가 황금색이었고 우리는 Java를 구현했습니다. C++ 종교는 죽어 가고 있었고 이것이 그 자리를 차지했습니다. 동일한 패턴이 파이썬에서 발생하는 것을 보는 것은 흥미 롭습니다. 저의 교수인 Hang Chen 박사(학사를 거의 받지 않는 매우 예리한 사람이었습니다. 그 당시에는 제가 있었고 저는 많은 것을 줄 수 있었습니다)는 Java를 사용하면 더 부드러운 코더가 되고 실제 코더는 C++ 또는 C를 사용하게 된다는 견해를 가졌습니다. js와 python이 다른 컴파일 언어와 비교하여 새로운 시대에 이와 동일한 아이디어가 등장하는 것을 보는 것은 정말 재미있습니다. 다시 프로토타입으로 돌아갑니다. 저는 Java/C# 코더의 사고방식으로 이것을 공격했습니다.

무엇

프로토타입 언어는 다를 뿐입니다. 이제 나는 그것들을 더 잘 이해하게 되었고, 그것들이 좀 멋지다고 생각합니다. 그래서 첫 번째 단계는 고전적인 상속과 프로토타입 상속을 이해하는 것이었습니다. 이 언어에서 상속이 다르다는 것과 상속이 얼마나 단순한지 이해하는 데 잠시 시간이 걸렸습니다. JavaScript에서 함수를 포함한 모든 객체에는 프로토타입 속성이 있습니다. 위 다이어그램에서. 속성은 우리가 proto라고 하는 다른 개체에 대한 참조일 뿐입니다. 그것은 스스로 설 수 있고 필요하다면 독립적일 수 있는 물건일 것이다. 따라서 prop 2를 호출하면 객체에 있는 것이 아니라 실제로 객체의 프로토타입에 있습니다. 해당 프로토타입 개체는 다른 개체를 가리킬 수도 있습니다. 각 객체는 프로토타입을 가질 수 있습니다. 몇 가지 코드를 사용하여 프로토타입 체인의 예를 살펴보겠습니다. 프로토타입 체인은 일련의 개체 중에서 속성 또는 메서드에 액세스할 수 있는 위치를 처리합니다. 이 프로토타입 속성으로 연결된 것, 여기서는 proto라고 합니다. JavaScript 엔진은 프로토타입 체인을 검색하여 작업을 수행합니다. 호출에 대해 명시적일 필요는 없습니다(예: object.proto.prop2가 아니라 그냥 object.prop2라고 말할 수 있음) 이에 대한 예를 살펴보겠습니다.

코드

여기에서 기본값과 기본 함수를 사용하여 두 개의 개체를 만들었습니다. 두 번째 개체에는 기능이 없는 두 개의 속성이 있습니다.

// Let's create a car object with some Default values
var car = {
make: 'Default',
model: 'Default',
getCarInfo: function() {
return this.make + ' ' + this.model; 
}
}

var Volvo = {
make: 'Volvo',
model: 'S80'
}

실생활에서 이러지 마세요. 여기에서 proto에 대해 알아보세요. 우리는 여기에서 문서를 읽습니다. 이제 볼보는 자동차에서 물려받습니다. 따라서 볼보에 존재하지 않는 메서드를 호출하면 이를 찾기 위해 Car로 이동합니다.

Volvo.__proto__ = car;

// Now we can use the getCarInfo()
console.log(Volvo.getCarInfo());

우리는 프로토타입 체인 때문에 "Volvo"의 가치를 얻습니다. 먼저 해당 속성에 대한 볼보 개체를 살펴보고 찾은 다음 중지합니다. JavaScript 엔진은 체인의 맨 위에서 시작하여 필요한 값을 찾을 때까지 아래로 작동합니다.

console.log(Volvo.make);

개체에 모델 값이 아닌 제조업체 값이 있으므로 "Honda Default"를 반환합니다. 그래서 프로토타입은 자동차이고 Default라는 모델 값을 찾습니다.

var Honda = {
    make: 'Honda'   
}

Honda.__proto__ = car;


console.log(Honda.getCarInfo());

여기에서 우리는 자동차 객체에 대한 새로운 기능을 생성하여 아이디어를 구현합니다.

car.getCarFullInfo = function() {
    return this.model + ', ' + this.make;   
}

console.log(Volvo.getCarFullInfo());
console.log(Honda.getCarFullInfo());

여기서 얻을 수 있는 값은 프로토타입 작동 방식 때문에 "S80, Volvo"및 "Default, Honda"가 됩니다. Get the full code here .

원본 게시물을 찾을 수 있습니다Here.