이전 기사 "고품질 JS 코드를 작성하는 방법"을 계속하십시오. 이번에는 JavaScript 기능의 지식 포인트를 분류 할 것입니다.
2. 기능을 사용하십시오
기능은 프로그래머에게 주요 추상 기능 및 구현 메커니즘을 제공합니다. 기능은 절차, 방법, 생성자, 클래스 또는 모듈과 같은 다른 언어로 여러 가지 다른 기능을 독립적으로 구현할 수 있습니다.
2.1 함수 호출, 메소드 호출 및 생성자 호출의 차이점을 이해합니다.
객체 지향 프로그래밍의 경우 함수, 메소드 및 클래스의 생성자는 세 가지 다른 개념입니다.
사용 모드 :
1. 기능 호출
코드 사본은 다음과 같습니다.
기능 안녕하세요 (사용자 이름) {
"hello" + 사용자 이름을 반환합니다.
}
2. 메소드 호출
코드 사본은 다음과 같습니다.
var obj = {
hello : function () {
"안녕하세요" + this.username을 반환합니다.
},
사용자 이름 : "Floralam"
};
OHJ.HELLO (); // "안녕하세요, Floralam"
hello 메소드가 OBJ 객체에 정의 되므로이 변수는 객체에 바인딩됩니다. 다른 객체에 동일한 함수 참조의 사본을 할당하고 동일한 답변을 얻을 수 있습니다.
코드 사본은 다음과 같습니다.
var obj2 = {
안녕하세요 : obj.hello (),
사용자 이름 : "Floralam"
};
3. 생성자를 사용하십시오
코드 사본은 다음과 같습니다.
기능 사용자 (이름, passwordhash) {
this.name = 이름;
this.passwordhash = passwordhash;
}
새 연산자를 사용하여 사용자를 호출하는 것은 생성자로 간주됩니다.
코드 사본은 다음과 같습니다.
var u = 새로운 사용자 ( "Floralam", "123");
함수 호출 및 메소드 호출과 달리 생성자 호출은이 변수의 값으로 완전히 새로운 객체를 취하고이 새로운 객체를 호출 결과로 암시 적으로 반환합니다. 생성자의 주요 책임은 새 개체를 초기화하는 것입니다.
2.2 고급 기능에 능숙합니다
고차 함수는 함수를 매개 변수 또는 반환 값으로 취하는 함수에 지나지 않으며, 매개 변수 (일반적으로 콜백 함수라고 불리는 함수라고 함)는 특히 강력하고 표현적인 관용구이기 때문에 JS 프로그램에서 널리 사용되기 때문에 함수를 매개 변수로 사용합니다.
배열의 표준 정렬 방법을 고려하십시오. 모든 배열에서 작동하려면 정렬 방법을 사용하려면 발신자가 배열의 두 요소를 비교하는 방법을 결정해야합니다.
코드 사본은 다음과 같습니다.
함수 comparenumber (x, y) {
if (x <y) {
반품 -1;
}
if (x> y) {
반환 1;
}
반환 0;
}
[3,1,4,1,5,9] .SORT (비교); // [1,1,3,4,5,9]
코드 사본은 다음과 같습니다.
[3,1,4,1,5,9] .sort (함수 (x, y) {
if (x <y) {
반품 -1;
}
if (x> y) {
반환 1;
}
반환 0;
}); // [1,1,3,4,5,9]
위의 예는 익명 기능을 사용하여 더욱 단순화합니다.
고차 기능을 사용하는 법을 배우면 종종 코드를 단순화하고 지루한 보일러 플레이트 코드를 제거 할 수 있습니다. 문자열 배열을 간단하게 변환하려면 루프를 사용하여 다음과 같이 구현할 수 있습니다.
코드 사본은 다음과 같습니다.
var names = [ "Fred", "Wilma", "Pebbles"];
var upper = [];
for (var i = 0, n = names.length; i <n; i ++) {
상단 [i] = 이름 [i] .toupperCase ();
}
상단; // [ "프레드", "윌마", "조약돌"];
편리한 배열 맵 방법을 사용하여 하나의 로컬 기능 만 사용하여 루프를 제거하고 요소를 하나씩 변환 할 수 있습니다.
코드 사본은 다음과 같습니다.
var names = [ "Fred", "Wilma", "Pebbles"];
var upper = names.map (function (name) {
return name.toupperCase ();
});
상단; // [ "프레드", "윌마", "조약돌"];
예를 들어, 공통 구현 로직으로 다른 문자열을 만들기위한 여러 가지 방법을 만들고자하며 각 루프는 각 독립 부품의 계산 결과를 연결하여 문자열을 만듭니다.
코드 사본은 다음과 같습니다.
함수 bulidstring (n, 콜백) {
var result = "";
for (var i = 0; i <n; i ++) {
결과 += 콜백 (i);
}
반환 결과;
}
var alphabet = bulidstring (26, function (i) {
Return String.FromCharCode (aindex + i);
});
알파벳; // "abcdefghijklmnopqrxtuvwxyz";
var digits = buildstring (10, function (i) {return i;})
숫자; // "0123456789"
var random = buildstring (9, function () {
random += string.fromcharcode (math.floor (math.random ()*26) +aindex
});
무작위; // "yefjmcef"(랜덤)
이를 통해 독자들은 심층적 인 구현 세부 사항없이 코드가 수행 할 수있는 일에 대한 명확한 이해를 제공합니다.
주목
JavaScript 지정된 범위의 임의 숫자 (MNS)에 대한 공식을 반환합니다. Math.Random ()*(NM)+M
동시에 질문의 요구 사항과 긍정적 인 정수를 반환 해야하는지 여부에주의하십시오.
2.3 통화 모드
함수를 호출하면 현재 함수 실행을 일시 중지하고 제어 권한 및 매개 변수를 새 함수로 전달합니다. 선언 당시 정의 된 공식 매개 변수 외에도 각 함수는 두 가지 새로운 추가 매개 변수, 즉 인수를받습니다.
이것은 매우 중요한 매개 변수이며 값은 호출 패턴에 의해 결정됩니다.
JavaScript에서 매우 중요한 4 가지 호출 패턴은 다음과 같습니다.
에이. 메소드 호출 패턴
비. 함수 호출 패턴
기음. 생성자 호출 패턴
디. 호출 패턴 적용 호출 패턴을 적용하십시오
이러한 패턴이 주요 매개 변수를 초기화하는 방법에는 차이가 있습니다.
1. 메소드 호출 방법
함수가 객체의 메소드 인 경우 메소드라고합니다. 메소드가 호출되면 호출 된 객체에 바인딩됩니다.
코드 사본은 다음과 같습니다.
var myobj = {
발 : 0,
증분 : 함수 (inc) {
this.val+= typeof inc === "숫자"? Inc : 1;
},
get_val : function () {return this.val;}
}
myobj.increment (); // 1
myobj [ "증분"] (2); // 3
요약:
1.이를 통해 자신이 속한 객체의 컨텍스트를 얻을 수있는 방법을 공개 방법이라고합니다.
2. a와 함께 함수를 사용할 때. 또는 첨자 표현식, 메소드 호출 모드 이며이 개체는 이전 객체에 바인딩됩니다.
3. 함수는 이것을 사용하여 객체에 액세스 할 수 있으므로 객체의 값을 검색하거나 객체의 값을 변경할 수 있습니다. 이것을 호출 할 때 객체에 바인딩합니다.
2. 함수 호출 패턴
함수가 객체의 속성이 아닌 경우 함수라고합니다. 함수를 함수 호출 패턴이라고하면 전역 객체에 바인딩됩니다. 이것은 JavaScript 디자인 오류이며 계속됩니다.
코드 사본은 다음과 같습니다.
함수 추가 (x, y) {
x+y를 반환합니다.
}
myobj.double = function () {
var that = this;
var helper = function () {
that.val = add (that.value, that.value);
// 잘못된 글쓰기 방법은 다음과 같을 수 있습니다. 왜 잘못입니까? 함수가 내부 함수라고 불리는 경우, 이것은 잘못된 오브젝트에 바인딩되었고 글로벌 객체에는 VAL 속성이 없으므로 잘못된 값이 반환됩니다.
//this.val = this.val+this.val;
}
돕는 사람();
}
myobj.double (); // 6
3. 생성자 호출 패턴
JavaScript는 프로토 타입 상속을 기반으로 한 언어로, 이는 객체가 다른 객체에서 속성을 직접 상속 할 수 있고 언어는 클래스가 없음을 의미합니다.
새로운 기능으로 함수를 호출하면 기능에 연결된 프로토 타입 멤버를 숨기는 새 개체가 표시되며 새로운 객체에도 바인딩됩니다.
새로운 접두사는 또한 반환 문의 동작을 변경합니다. 권장 프로그래밍 방법도 아닙니다.
코드 사본은 다음과 같습니다.
var foo = 함수 (상태) {
this.status = 상태;
}
foo.prototype.get_status = function () {
this.status;
}
// foo 인스턴스를 구성합니다
var myfoo = new foo ( "bar");
myfoo.get_status (); // "bar"
4. 적용 호출 패턴을 패턴으로 호출하십시오
JavaScript는 기능적 객체 지향 언어이므로 기능에는 방법이 있습니다.
적용 메소드에는 두 개의 매개 변수가 있습니다. 첫 번째는 값을 이것에 바인딩하는 것이고 두 번째는 매개 변수 배열입니다. 즉, 적용 메소드를 사용하면 배열을 빌드하여 기능을 호출 할 수 있으므로이 값을 선택하고 배열 값을 선택할 수 있습니다.
코드 사본은 다음과 같습니다.
var array = [3,4];
var sum = add.Apply (null, array); // 7
var stertationobj = {status : "abcdefg"};
foo.prototype.pro_get_status = function (prefix) {
리턴 접두사 +"-" +this.status;
}
var status = foo.prototype.get_status.apply (stertationobj); // "abcdefg"
var pro_status = foo.prototype.get_status.apply (stertationobj, [ "prefix"]); // "prefix -Abcdefg"
일반적으로 함수 또는 메소드의 수신기 (이 특수 키워드의 값으로 바인딩)는 발신자의 구문에 의해 결정됩니다. 특히, 메소드 호출 구문은 조회 객체에 의해 메소드를이 변수에 바인딩합니다. 그러나 때로는 사용자 정의 수신기를 사용하여 기능을 호출해야합니다. 현재 호출 메소드 또는 바인드 메소드를 사용하여 수신기를 사용자 정의하여 메소드를 호출해야합니다.
2.4 BIND 방법을 사용하여 수신자를 정의하는 방법
이 메소드는 값이 함수 인 속성과 다르지 않기 때문에 객체의 메소드를 추출하고 함수를 콜백 함수로 추출하고이를 고차 함수로 직접 전달하는 것도 쉽습니다.
그러나 추출 된 기능을 추출 된 물체에 바인딩하는 것도 잊기 쉽습니다.
코드 사본은 다음과 같습니다.
var 버퍼 = {
항목 : [],
추가 : 함수 {
this.entries.push (s);
}
}
var source = [ "867", "-", "5309"];
source.foreach (butter.add); // 오류 : 항목은 정의되지 않았습니다
현재 Butter.add를받는 사람은 버터 물체가 아닙니다. 함수의 수신기는 호출되는 방법에 따라 다르고 Foreach 메소드가 글로벌 범위에서 호출되므로 Foreach 메소드의 구현은 전역 객체를 기본 수신기로 사용합니다. 글로벌 오브젝트에는 항목 속성이 없으므로이 코드는 오류가 발생합니다.
Foreach 메소드를 통해 발신자는 콜백 함수의 수신기로서 선택적 매개 변수를 제공 할 수 있습니다.
코드 사본은 다음과 같습니다.
var source = [ "867", "-", "5309"];
source.foreach (버터, 버터);
그러나 모든 고차 기능이 사용자에게 콜백 기능 수신기를 제공하기 위해 신중하고 사려 깊은 것은 아닙니다.
두 가지 해결책이 있습니다.
1) acapsulation add acapsulation 기능을 호출 할 명시적인 버퍼 객체 방법을 만듭니다. 캡슐화 함수가 호출되는 방식에 관계없이 항상 매개 변수가 대상 어레이로 푸시되도록합니다.
코드 사본은 다음과 같습니다.
var source = [ "867", "-", "5309"];
source.foreach (함수 (s) {
버터 .add (들);
});
2) 함수 객체의 결합 메소드는 수신기 객체를 필요로하고 수신기 개체에서 호출 된 메소드로 원래 함수를 호출하는 캡슐화 함수를 생성합니다.
코드 사본은 다음과 같습니다.
var source = [ "867", "-", "5309"];
source.foreach (butter.add.bind (buffer));
주목
buffer.add.bind (buffer) buffer.add 함수를 수정하는 대신 새 함수를 만듭니다.
buffer.add === buffer.add.bind (buffer); //거짓
위의 것은이 기사에 관한 모든 것입니다. 나는 당신이 그것을 좋아하기를 바랍니다.