설명없이 샘플로 간주되는 매우 간단한 프로토 타입 기반 객체 모델입니다.
function Person(name){
this.name = name;
}
Person.prototype.getName = function(){
console.log(this.name);
}
var person = new Person("George");
프로토 타입 개념을 진행하기 전에 고려해야 할 몇 가지 중요한 사항이 있습니다.
1- JavaScript 함수의 실제 작동 방식 :
첫 번째 단계를 수행하려면 JavaScript 함수가 실제로 어떻게 작동하는지, this키워드 를 키워드로 사용하는 함수와 같은 클래스 또는 인수가있는 일반 함수, 수행하는 작업 및 반환되는 작업으로 파악해야합니다.
Person객체 모델 을 만들고 싶다고 가정 해 봅시다 . 그러나이 단계 에서는 prototypeand newkeyword 를 사용하지 않고 동일한 작업 을 수행 하려고 합니다 .
그래서이 단계에서 functions, objects그리고 this키워드, 우리 모두입니다.
첫 번째 질문이 될 것이다 어떻게 this키워드를 사용하지 않고 유용 할 수 있습니다 new키워드를 .
그래서 대답하기 위해 빈 객체가 있고 두 가지 기능이 있다고 가정 해 봅시다.
var person = {};
function Person(name){ this.name = name; }
function getName(){
console.log(this.name);
}
지금은 사용하지 않고 new키워드를 우리는 이러한 기능을 사용할 수있는 방법에 대해 설명합니다. 따라서 JavaScript에는 3 가지 방법이 있습니다.
ㅏ. 첫 번째 방법은 함수를 일반 함수로 호출하는 것입니다.
Person("George");
getName();//would print the "George" in the console
이 경우 이는 현재 컨텍스트 객체이며 일반적으로 window브라우저 또는 의 전역 객체 GLOBAL입니다 Node.js. "George"를 값으로 사용하여 브라우저의 window.name 또는 Node.js의 GLOBAL.name을 갖습니다.
비. 속성으로 객체에 첨부 할 수 있습니다
- 가장 쉬운 방법 은 다음 person과 같이 빈 개체를 수정하는 것입니다.
person.Person = Person;
person.getName = getName;
이런 식으로 우리는 다음과 같이 호출 할 수 있습니다.
person.Person("George");
person.getName();// -->"George"
이제 person객체는 다음과 같습니다.
Object {Person: function, getName: function, name: "George"}
- 속성 을 객체 에 첨부하는 다른 방법prototype 은 이름이 __proto__인 JavaScript 객체에서 찾을 수있는 객체를 사용 하는 것입니다. 요약 부분에서 조금 설명하려고했습니다. 따라서 다음을 수행하여 비슷한 결과를 얻을 수 있습니다.
person.__proto__.Person = Person;
person.__proto__.getName = getName;
그러나 실제로 우리가하고있는 일은 Object.prototype리터럴 ( { ... })을 사용하여 JavaScript 객체를 만들 때마다을 기반으로 만들어 지기 때문에을 수정하는 것 Object.prototype입니다. 즉 새로 작성된 객체에 이름이 지정된 속성으로 첨부 __proto__되므로 변경하면 이전 코드 스 니펫에서 수행했듯이 모든 JavaScript 객체는 변경되지는 않지만 좋은 습관은 아닙니다. 이제 더 나은 방법은 무엇입니까?
person.__proto__ = {
Person: Person,
getName: getName
};
그리고 이제 다른 물건들은 평화 롭지 만 여전히 좋은 습관은 아닌 것 같습니다. 따라서 여전히 하나 이상의 솔루션이 있지만이 솔루션을 사용하려면 person객체가 작성된 코드 줄로 돌아가서 var person = {};다음과 같이 변경해야합니다.
var propertiesObject = {
Person: Person,
getName: getName
};
var person = Object.create(propertiesObject);
그것이하는 일은 새로운 JavaScript를 만들고 속성에 Object첨부 propertiesObject하는 __proto__것입니다. 그래서 당신이 할 수 있는지 확인하십시오 :
console.log(person.__proto__===propertiesObject); //true
그러나 여기서 까다로운 점 __proto__은 person객체 의 첫 번째 수준에 정의 된 모든 속성에 액세스 할 수 있다는 것입니다 (자세한 내용은 요약 부분을 읽으십시오).
이 두 가지 방법 중 하나를 사용 this하면 person객체 를 정확하게 가리킬 수 있습니다.
씨. JavaScript에는 함수를 제공하는 또 다른 방법이 있습니다.이 함수 this는 호출 또는 적용 을 사용 하여 함수를 호출합니다.
apply () 메소드는 주어진이 값과 배열 (또는 배열과 같은 객체)로 제공된 인수로 함수를 호출합니다.
과
call () 메소드는 주어진이 값과 인수가 개별적으로 제공되는 함수를 호출합니다.
내가 가장 좋아하는 방법으로 다음과 같이 함수를 쉽게 호출 할 수 있습니다.
Person.call(person, "George");
또는
//apply is more useful when params count is not fixed
Person.apply(person, ["George"]);
getName.call(person);
getName.apply(person);
이 3 가지 방법은 .prototype 기능을 파악하기위한 중요한 초기 단계입니다.
2- new키워드는 어떻게 작동합니까?
이것은 .prototype기능 을 이해하기위한 두 번째 단계입니다. 이것은 프로세스를 시뮬레이션하는 데 사용하는 것입니다.
function Person(name){ this.name = name; }
my_person_prototype = { getName: function(){ console.log(this.name); } };
이 부분에서는 new키워드 prototype를 사용할 때 키워드 를 사용하지 않고 JavaScript가 취하는 모든 단계를 수행하려고 new합니다. 그래서 우리가 할 때 new Person("George"), Person함수는 생성자 역할을합니다. 이것은 JavaScript가 하나씩하는 것입니다.
ㅏ. 우선 빈 객체, 기본적으로 빈 해시를 만듭니다.
var newObject = {};
비. JavaScript가 취하는 다음 단계 는 모든 프로토 타입 객체를 새로 만든 객체 에 첨부 하는 것입니다.
우리가 my_person_prototype여기에 프로토 타입 객체에 대한 유사.
for(var key in my_person_prototype){
newObject[key] = my_person_prototype[key];
}
JavaScript가 실제로 프로토 타입에 정의 된 속성을 첨부하는 방식이 아닙니다. 실제 방법은 프로토 타입 체인 개념과 관련이 있습니다.
ㅏ. & b. 이 두 단계 대신 다음을 수행하여 동일한 결과를 얻을 수 있습니다.
var newObject = Object.create(my_person_prototype);
//here you can check out the __proto__ attribute
console.log(newObject.__proto__ === my_person_prototype); //true
//and also check if you have access to your desired properties
console.log(typeof newObject.getName);//"function"
이제 우리는 getName함수를 호출 할 수 있습니다 my_person_prototype:
newObject.getName();
씨. 그런 다음 해당 객체를 생성자에게 제공합니다.
우리는 다음과 같은 샘플로 이것을 할 수 있습니다 :
Person.call(newObject, "George");
또는
Person.apply(newObject, ["George"]);
다음 생성자가 있기 때문에, 원하는 무엇이든 할 수있는 이 그 생성자의 내부 방금 생성 된 개체입니다.
이제 다른 단계를 시뮬레이션하기 전의 최종 결과 : Object {name : "George"}
요약:
기본적으로 함수 에서 new 키워드 를 사용하면 해당 키워드를 호출하고 해당 함수가 생성자로 사용되므로 다음과 같이 말할 때 :
new FunctionName()
자바 스크립트는 내부적으로 객체, 빈 해시를 만든 다음이 생성자에 그 객체를 제공하고 생성자가 있기 때문에, 원하는 무엇이든 할 수있는 이 그 생성자의 내부 방금 생성 된 개체이며, 그것은 당신에게 물론 그 객체를 제공합니다 함수에서 return 문을 사용하지 않았거나 return undefined;함수 본문 끝에를 넣은 경우
따라서 JavaScript가 객체에서 속성을 조회 할 때 가장 먼저하는 일은 해당 객체에서 속성을 찾는 것입니다. 그리고 [[prototype]]우리가 일반적으로 좋아 하는 비밀 속성 이 __proto__있으며 그 속성은 JavaScript가 다음에 보는 것입니다. 그리고 __proto__또 다른 JavaScript 객체 인 경우을 통해 볼 때 자체 __proto__속성 이 있으며 다음 속성 __proto__이 null 이 될 때까지 올라갑니다 . 포인트는 JavaScript에서 __proto__속성이 null 인 유일한 객체입니다 Object.prototype.
console.log(Object.prototype.__proto__===null);//true
이것이 JavaScript에서 상속이 작동하는 방식입니다.
즉, 함수에 프로토 타입 속성이 있고 새로 호출하면 JavaScript가 새로 작성된 속성에 대한 객체를 찾은 후 함수를 살펴보고이 .prototype객체에 해당 객체가있을 수 있습니다. 자체 내부 프로토 타입. 등등.
![함수 객체의 * [[protytype]] * 및 <code> prototype </ code> 속성](https://i.stack.imgur.com/rcGmc.png)
