Javascript의 원형

본문에서, 우리는 자바스크립트의 원형과, 그리고 그것이 어떻게 백엔드에서 일하는지 토론할 것이다.자바스크립트에 익숙하지 않은 개발자들은 이 신기한 키워드가 무엇인지, 그리고 정의되지 않은 방법을 어떻게 방문할 수 있는지 자주 알고 싶어 한다.원형이 도대체 무엇인지 봅시다.

Javascript 원형 소개

기본적으로 Javascript는 Object() 함수를 제공합니다.콘솔에서 인쇄하여 확인할 수 있습니다.

console.log(Object);

출력:

Object()는 객체처럼 보이지만 객체가 아닌 함수입니다.이것은 약간 곤혹스러울 수 있지만, Object () 는 prototype 키워드로 인용할 수 있는 익명의 대상을 제공하는 함수라는 것을 기억하십시오.

console.log(Object.prototype);

출력:

이 물체는prototype 대상은 toString (),value Of () 와 같은 미리 정의된 방법을 가지고 있습니다.JS에서는 함수가 객체 속성의 값일 때 메서드라고 합니다.
대상의 구조 함수.prototype은 객체 함수를 반대로 참조합니다.

우리는 하나의 예로 그것을 더욱 잘 이해할 수 있다.Programmer라는 구조 함수를 정의합니다.

function Programmer(name, language) {
this.name = name;
this.language = language;
}

상기 구조 함수는name과language를 매개 변수로 받아들여name과language 속성에 각각 분배합니다.JS는 배후에서 새 함수 Programmer () 와 익명 대상을 만들었습니다.

우리가 이전에 대상 함수에서 보았던 것과 유사하며, 심지어 이 프로그램러 () 함수에도 프로토타입이라는 속성이 있는데, 이것은 익명의 대상과 구조 함수를 인용하고, 후자는 Programmer () 함수를 인용한다.
콘솔에서 인쇄하고 출력을 확인합니다.

console.log(Programmer);

출력:

console.log(Programmer.prototype);

출력:

우리는 우리가 프로그래머에게서 얻은 대상을 관찰할 수 있다.prototype에는 Programmer () 함수 자체를 인용하는 구조 함수가 있습니다.JS는 이 외에도 프로그래머를 연결했다.원형에서 대상까지.prototype 대상은 [[prototype]]을 통해prototype 링크라고 합니다.
이 이미지는 다음과 같은 지리적 이해를 돕습니다.

Javascript 원형에서 사용자 정의 방법 정의하기

prototype 대상에서 사용자 정의 방법을 정의할 수 있습니다.이 함수에서 만든 실례는 사용자 정의 함수에 더 접근할 수 있습니다.
다음 코드는 Programmer에서 intro()라는 새로운 방법을 정의했습니다.프로토타입:

Programmer.prototype.intro = function() {
    return "Hello, My name is " + this.name + " and I am a " + this.language + " Developer";
}

이 intro () 함수는 프로그래머에 추가되었습니다.원형 대상.

이제 프로그래머의 실례를 만듭시다

let p = new Programmer('Jay', 'Python');

JS에서 새 객체 p와 프로그래머에 대한 링크를 만듭니다.원형 링크를 통해 원형 대상을 만듭니다.
이제 이 p 실례에서 intro () 함수를 호출합니다.

let introduction = p.intro();
console.log(introduction);

출력:

이게 어떻게 된 일입니까?
p가 자신의 intro () 방법이 없기 때문에, 자바스크립트는 원형 링크를 따라 프로그래머에게서 그것을 찾을 수 있습니다.원형 대상을 실행하십시오.

이제 p 대상에서 toString () 방법을 호출해 봅시다.

let pString = p.toString();
console.log(pString);

이게 어떻게 된 일입니까?
마찬가지로 p는 자신의 tostring () 방법이 없기 때문에 자바스크립트는 원형 링크를 따라 프로그래머에게 검색합니다.원형 대상.프로그래머 때문에.prototype에는 toString () 방법이 없습니다.prototype 링크를 따라 대상을 검색합니다.원형 대상.여기에서 toString()을 찾아 실행합니다.

만약 당신이 원형 링크에 존재하지 않는 방법을 호출한다면, 그것은 바로 프로그래머에게 있는 것이다.원형 혹은 물체.prototype, 그리고 Javascript에서 지정한 방법을 찾을 수 없는 오류를 던집니다.

p.changeProfession();

직업이 바뀌었기 때문이다().원형 체인의 모든 대상에javascript 버퍼 오류가 존재하지 않습니다.

q라는 다른 인스턴스를 만듭니다.

const q = new Programmer('Raj', 'Javascript');

현재 p와 q 두 대상은 모두 같은 대상과 속성을 가지고 있다.그런데 만약에 우리가 q에서 다른 방법을 정의한다면?p에 접근할 수 있습니까?
코드는 q 객체에 getSalary () 방법을 정의합니다.

q.getSalary = function () {
    return "My salary is decent.";
}

이 get Salary () 방법은 프로그래머가 아닌 q 대상에만 추가됩니다.원형 또는 p.

p: getSalary () 함수를 호출하려고 하면 오류가 발생합니다.

등덕 원형

proto는 dunder proto로 발음합니다.proto는 대상의 액세서리 속성입니다.원형 대상.대상의 내부 원형 링크 ([prototype]) 를 공개합니다. 이 링크를 통해 대상에 접근할 수 있습니다.
p.proto는 프로그래머를 인용한 [[Prototype]을 공개했다.원형 대상.

console.log(p.__proto__ === Programmer.prototype); // true
console.log(p.__proto__ === q.__proto__); // true

단, 이 대상을 사용해야 합니다.getPrototypeOf () 방법은 proto가 아닙니다.물체.방법은 지정한 대상의 원형을 되돌려줍니다.

console.log(p.__proto__ === Object.getPrototypeOf(p)); // true

또 다른 유행하는 방법은 대상이 변할 때 원형 링크를 얻는 것이다.getPrototypeOf() 방법은 다음과 같이 구조 함수 속성을 통해 사용할 수 없습니다.

p.constructor.prototype

p.constructor 프로그래머로 돌아가기 때문에 p.constructor.prototype 원형 대상을 되돌려줍니다.

그늘

다음 방법 호출을 참조하십시오.

console.log(p.intro());

p 객체에 intro() 메서드가 정의되어 있지 않으므로 JavaScript에서 원형 체인을 찾습니다.이런 상황에서, 그것은 프로그래머에서 방법을 찾을 수 있다.원형 대상.
대상 p에 프로그래머의 방법과 같은 이름을 가진 새로운 방법을 추가합니다.원형 객체:

p.intro = function() {
    console.log('Hello');
}

intro () 메서드를 호출합니다.

console.log(p.intro());

p 대상에 intro () 방법이 있기 때문에 자바스크립트는 원형 체인에서 찾지 않고 바로 실행합니다.
이것은 음영의 예다.p 대상의 intro () 방법은 p 대상이 인용한 원형 대상의 intro () 방법과 관련이 있습니다.