객체 지향 JavaScript — 프로토타입, 호출 및 적용
지금 http://jauyeung.net/subscribe/에서 내 이메일 목록을 구독하십시오.
JavaScript는 부분적으로 객체 지향 언어입니다.
JavaScript를 배우려면 JavaScript의 객체 지향 부분을 배워야 합니다.
이 문서에서는 프로토타입
call
및 apply
를 살펴보겠습니다.함수 프로토타입
함수에는 생성자 함수의 모든 인스턴스 간에 공유되는 항목이 있는 특수
prototype
속성이 있습니다.예를 들어 다음과 같이 작성할 수 있습니다.
function F() {}
F.prototype = {
name: 'james',
say() {
return `I am ${this.nam}`;
}
};
그런 다음
F
의 인스턴스 2개를 생성하면 :const foo = new F();
const bar = new F();
console.log(foo, bar);
foo
와 bar
가 같은 속성을 가지고 있음을 알 수 있습니다.say
메서드도 같은 작업을 수행합니다.함수 객체의 메소드
함수 개체에는 고유한 메서드가 있습니다.
예를 들어, 함수에는 함수 코드와 함께 문자열을 반환하는
toString
메서드가 있습니다.따라서 다음이 있는 경우:
function add(a, b, c) {
return a + b + c;
}
console.log(add.toString());
우리는 다음을 얻습니다.
"function add(a, b, c) {
return a + b + c;
}"
기록.
전화를 걸어 신청하세요.
함수에는
call
및 apply
메서드가 있어 함수를 실행하고 this
값을 설정하고 여기에 인수를 전달할 수 있습니다.예를 들어 다음이 있는 경우:
const obj = {
name: 'james',
say(who) {
return `${this.name} is ${who}`;
}
};
그런 다음 다음과 같이 작성하여
say
를 사용하여 call
를 호출할 수 있습니다.const a = obj.say.call({
name: 'mary'
}, 'female');
그러면
a
는 'mary is female’
.this
를 다음과 같이 설정했습니다.{
name: 'mary'
}
그래서
this.name
는 'mary'
입니다.두 번째 인수는
say
의 인수이므로 who
는 'female'
입니다.함수의 인수가 배열에 있다는 점을 제외하고 동일한 작업을 수행하여
apply
를 호출할 수도 있습니다.예를 들어 다음과 같이 작성할 수 있습니다.
const obj = {
name: 'james',
say(who) {
return `${this.name} is ${who}`;
}
};
const a = obj.say.apply({
name: 'mary'
}, ['female']);
그리고 우리는 같은 것을 얻습니다.
Arrow Functions의 어휘 this
this
는 컨텍스트에 따라 변경되는 동적 개체입니다.화살표 함수는 자체 값
this
에 바인딩되지 않습니다. .따라서 다음이 있는 경우:
const obj = {
prefix: "Hello",
greet(names) {
names.forEach(function(name) {
console.log(`${this.prefix} ${name}`);
})
}
}
greet
는 콜백 함수이므로 this
속성이 없기 때문에 prefix
메서드에서 오류가 발생합니다.그러나 화살표 기능을 사용하는 경우:
const obj = {
prefix: "Hello",
greet(names) {
names.forEach((name) => {
console.log(`${this.prefix} ${name}`);
})
}
}
그러면 함수가
this
의 자체 값에 바인딩되지 않으므로 제대로 작동합니다.개체 유형 추론
toString
의 Object.prototype
메서드는 객체를 생성하는 데 사용되는 클래스 이름을 제공합니다.예를 들어 다음과 같이 작성할 수 있습니다.
Object.prototype.toString.call({});
그리고 얻다:
"[object Object]"
그리고 우리가 쓴다면:
Object.prototype.toString.call([]);
우리는 다음을 얻습니다.
"[object Array]"
다음과 같이 작성하여
call
메서드와 toString
를 사용할 수 있습니다.Array.prototype.toString.call([1, 2, 3]);
우리는 다음을 얻습니다.
"1,2,3"
이것은 다음과 같습니다.
[1, 2, 3].toString()
결론
call
및 apply
메서드를 사용하면 this
및 인수의 값이 서로 다른 함수를 호출할 수 있습니다.또한
prototype
에는 모든 생성자 인스턴스 간에 공유되는 속성이 있습니다.
Reference
이 문제에 관하여(객체 지향 JavaScript — 프로토타입, 호출 및 적용), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/aumayeung/object-oriented-javascript-prototypes-call-and-apply-2a40텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)