이것에 대한 나의 이해는 항상 그것을 사용하고 그것을 아는 것에 관한 것이었지만, 나는 그 본질을 탐구하지 않았습니다. 이번에는 "JavaScript The Good Parts"에 대한 깊은 이해가 있습니다. (모든 디버깅은 콘솔, 브라우저 F12 키에서 볼 수 있습니다)
이것을 함께 살펴 보겠습니다.
함수를 선언 할 때 각 함수에는 두 개의 추가 매개 변수 (공식 매개 변수)가 정의되어 있습니다. 하나는 이것이고 다른 하나는 인수입니다. 인수는 실제로 함수에 의해 허용되는 매개 변수이며 다양한 클래스 배열입니다. 나는 논쟁에 대한 간단한 소개 만 제공 할 것이며, 우리는이 포인터에 중점을 둘 것입니다.
객체 지향 변환에서 이것은 매우 중요하며 그 값은 통화 패턴에 따라 다릅니다. JavaScript에는 총 4 개의 호출 패턴이 있습니다. 방법 호출 패턴, 기능 호출 패턴, 생성자 호출 패턴 및 호출 패턴을 적용합니다.
방법 호출 모드
함수가 객체로서 속성 인 경우 일반적 으로이 함수를이 객체의 메소드라고합니다. 이 메소드가 호출되면이 방법은 메소드가 속한 객체를 가리 킵니다.
코드 사본은 다음과 같습니다.
<script type = "text/javaScript">
var people = {
이름 : "Yika",
SayName : function () {
Console.log (this.name); // "Yika"
// 이것은 People Object에 묶여 있습니다
}
}
people.sayname ();
</스크립트>
밤나무에서 볼 수 있듯이 이것은 SayName 객체를 가리 킵니다. 이를 통해 객체의 맥락을 얻는이 방법은 공개 방법입니다. (출판 방법)
기능 호출 모드
함수가 객체의 메소드가 아닌 경우 기능이라고합니다.
이 패턴 호출은이 함수가 외부 함수에서 호출 될 수 있더라도 창 객체를 가리 킵니다.
코드 사본은 다음과 같습니다.
<script type = "text/javaScript">
var name = "window-yika";
var people = {
이름 : "People-Yika",
학생 : function () {
Console.log (this); // 이것은 여기에 객체 사람들을 묶습니다
function sayname () {
var name = "sayname-yika";
Console.log (this.name); // Window-Yika
// SayName 기능 자체와 People Object의 이름 값이 있더라도 Window를 가리 킵니다.
};
SayName ();
}
}
people.student ();
</스크립트>
이러한 관점에서, JavaScript "Design Error"를 해결하는 방법을 알고 있습니까?
예, 학생 함수, 즉 6 행에서이를 캐시합니다. 그런 다음 변수를 통해 SayName 함수로 전송하여 해결하십시오!
코드 사본은 다음과 같습니다.
var people = {
이름 : "People-Yika",
학생 : function () {
var self = 이것; // cache 님이 캐시합니다
function sayname () {
var name = "sayname-yika";
Console.log (self.name); // "People-Yika", 현재, 자기 지적을 지적합니다.
};
SayName ();
}
}
생성자 호출 모드
JavaScript가 생성자에 대해 이야기 할 때, 당신은 다음과 같이 생각할 것입니다. "기능 이름은 대문자가되어! 전화 할 때 새 연산자를 사용하십시오!" 기능 이름 대문자는 생성자의 이름을 표준화하기 위해 이해하기 쉽습니다. 그러나 왜 새로운 것을 사용해야하는지 살펴본 적이 있습니까? 새 기능을 새로 호출하면 함수 배경이 기능 프로토 타입을 가리키는 새 개체를 생성하며 이는 새 개체에도 바인딩됩니다. JavaScript는 프로토 타입 상속을 기반으로 한 언어입니다. 프로토 타입 프로토 타입에 대해 명확하지 않은 학생들은 정보를 직접 확인할 수 있습니다. 나는 이것에 집중한다.
먼저 생성자가 일반적으로 어떻게 보이는지 살펴 보겠습니다.
코드 사본은 다음과 같습니다.
<script type = "text/javaScript">
기능인 (이름) {
this.name = 이름; // 여기에 새로운 객체 Yika가 새로 전화 한 후 지적합니다.
this.sayname = function () {
Console.log (this.name); //산출
}
}
var yika = 새로운 사람들 ( "Yika");
yika.sayname (); // "Yika"출력 Yika는 새 호출을 통해 얻어 지므로 Yika 객체에 묶여 있습니다.
</스크립트>
언뜻보기에 이해하기 쉽지 않은 것 같습니다. 왜 지금이 기능의 창을 지적했는데, 이제 캐시없이 사람들의 기능을 가리킬 수 있습니까?
중요하지 않습니다. 당신은 그 기능이 새로운 전화를 통해 비밀리에 "나쁜 일을"할 것이라고 말하지 않았습니까? 당신이 정확히 무엇을했는지 봅시다.
코드 사본은 다음과 같습니다.
<script type = "text/javaScript">
기능인 (이름) {
var that = {}; // 나쁜 것 : 혼자서 물체를 생성하십시오
that.name = 이름;
that.sayname = function () {
Console.log (that.name);
};
그것을 돌려주십시오. // 나쁜 일 2, 반환 동작을 변경하고 방금 생성 된 개체를 반환합니다.
}
var yika = people ( "Yika"); // 새로 생략 될 수 있으며 새 연산자에게 전화를 모방 할 수 있습니다.
yika.sayname (); // 지금처럼 "Yika"를 출력합니다
</스크립트>
이런 식으로 명확하게 볼 수 있습니다. New는 객체를 생성 할뿐만 아니라 자동으로 객체를 반환하여 자연스럽게이 새로운 객체를 가리킬 것입니다.
새로운 것을 사용하여 생성자를 호출해야합니다. 그렇지 않으면 무언가 잘못되면 경고가 없으며 모든 자본 계약이 여전히 매우 필요합니다.
통화 모드를 적용하십시오
적용 메소드를 사용하면 호출 함수로 전달되는 매개 변수 배열을 빌드 할 수 있으며,이 값도 변경할 수 있습니다.
function.Apply (이 바운드 값, 인수 매개 변수 배열)
내가 말할 수있는 많은 것들이 있습니다. 나는 당신이 이해하는 데 도움이되는 밤만을 줄 것입니다.
코드 사본은 다음과 같습니다.
<script type = "text/javaScript">
기능인 (이름) {
this.name = 이름;
this.sayname = function () {
Console.log (this.name); // SayName 메소드는 People 생성자에 속합니다
}
}
기능 학생 (이름) {
People.Apply (this, Arguments); // 생성자를 빌리는 통합 방법은 학생 생성자를 신청하여 사람들의 생성자에게 전화 하고이 사람들의 가치를 바꾸는 것입니다.
// 이런 식으로, 학생 인스턴스가 생성 될 때마다 People 생성자가 호출됩니다.
}
var 학생 = 신입생 ( "Yika");
학생 .sayname (); // "Yika"출력
</스크립트>
적용을 통해 함수 의이 바인딩 객체를 쉽게 수정할 수 있습니다. 신청과 유사한 호출도 동일한 효과를 갖습니다. 관심있는 학생들은 스스로 검색하고 배울 수 있습니다.
좋아요, 마침내 우리는 이것의 네 가지 호출 모드를 변경했습니다. 메소드 호출 모드 및 생성자 호출 모드가 더 많이 사용되며 더 중요합니다. 기능 호출 모드의 경우 트랩을 피하는 법을 배워야합니다.
오류가 있으면 오류가 있으면 시간이 지남에 따라보고 해 주시면 다른 사람을 오도하는 것을 막기 위해 가능한 빨리 수정하겠습니다. 감사합니다!