고품질 JS 코드 작성 방법(계속)_javascript 기술

이전 글 "고품질 JS 코드 작성법"에 이어 이번에는 자바스크립트 함수에 대한 지식 포인트를 정리하겠습니다.

2. 기능 사용

함수는 프로그래머에게 주요 추상 함수와 구현 메커니즘을 제공합니다. 함수는 프로시저, 메서드, 생성자, 심지어 클래스나 모듈과 같은 여러 다른 기능을 다른 언어로 독립적으로 구현할 수 있습니다.

2.1 함수 호출, 메서드 호출, 생성자 호출의 차이점 이해

객체 지향 프로그래밍의 경우 함수, 메서드 및 클래스 생성자는 세 가지 다른 개념입니다.

사용 모드:

1, 함수 호출

코드 복사 코드는 다음과 같습니다.

함수 hello(사용자 이름){
"hello" 사용자 이름을 반환합니다.
}

2, 메소드 호출

코드 복사 코드는 다음과 같습니다.

var obj = {
안녕하세요: function(){
          "hello"를 반환합니다. this.username;
},
사용자 이름: "floraLam"
};
ohj.hello();//"안녕하세요, 플로라램"

이 변수는 obj 객체에 hello 메소드가 정의되어 있기 때문에 객체에 바인딩됩니다. 또한 동일한 함수 참조를 다른 객체에 할당하여 동일한 답을 얻을 수도 있습니다.

코드 복사 코드는 다음과 같습니다.

var obj2 = {
안녕하세요: obj.hello(),
사용자 이름: "floraLam"
};

3, 생성자는

을 사용합니다.

코드 복사 코드는 다음과 같습니다.

함수 사용자(이름,비밀번호Hash){
This.name = 이름;
This.passwordHash = 비밀번호Hash;
}

new 연산자를 사용하여 User를 호출하는 것은 생성자로 간주됩니다.

코드 복사 코드는 다음과 같습니다.

var u = new User("floraLam","123");

함수 호출 및 메서드 호출과 달리 생성자 호출은 새로운 개체를 이 변수의 값으로 사용하고 이 새 개체를 호출 결과로 암시적으로 반환합니다. 생성자의 주요 책임은 이 새 개체를 초기화하는 것입니다.

2.2 고차기능 능숙

고차 함수는 함수를 매개변수로 사용하거나 값을 반환하는 함수에 지나지 않습니다(고차 함수가 이를 "다음에 호출"하기 때문에 콜백 함수라고도 함). 관용구에 대한 특히 강력하고 표현적인 방법은 js 프로그램에서도 널리 사용됩니다.

배열의 표준 정렬 방법을 고려하면 모든 배열에 대해 작동하려면 호출자가 배열의 두 요소를 비교하는 방법을 결정해야 합니다.

코드 복사 코드는 다음과 같습니다.

함수 비교번호(x,y){
If(x          -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          -1을 반환합니다.
}
If(x > y){
1을 반환;
}
0을 반환합니다;
});//[1,1,3,4,5,9]

위의 예는 익명 함수를 사용하여 더욱 단순화되었습니다.

고차 함수를 사용하는 방법을 배우면 코드가 단순화되고 지루한 상용구 코드가 제거되는 경우가 많습니다. 루프를 사용하여 문자열 배열의 간단한 변환을 구현할 수 있습니다.

코드 복사 코드는 다음과 같습니다.

var names = ["프레드","윌마","자갈"];
var 상단 = [];
for(var i = 0,n = names.length ;i< n;i ){
upper[i] = 이름[i].toUpperCase();
}
upper;//["FRED","WILMA","PEBBLES"];

배열의 편리한 맵 방법을 사용하면 루프를 제거할 수 있으며 로컬 함수만 사용하여 요소를 하나씩 변환할 수 있습니다.

코드 복사 코드는 다음과 같습니다.

var names = ["프레드","윌마","자갈"];
var upper = names.map(함수(이름){
이름을 반환합니다.toUpperCase();
});
upper;//["FRED","WILMA","PEBBLES"];

또한, 예를 들어 공통 구현 논리를 사용하여 다양한 문자열을 생성하는 여러 메서드를 만들고 싶고, 각 루프는 각 독립 부분의 계산 결과를 연결하여 문자열을 생성합니다.

코드 복사 코드는 다음과 같습니다.

함수 bulidString(n,callback){
var 결과 = "";
for(var i = 0 ; i < n ;i ){
          결과 = 콜백(i);
}
결과 반환;
}
var 알파벳 = bulidString(26,function(i){
Return String.fromCharCode(aIndex i);
});
알파벳;//"abcdefghijklmnopqrxtuvwxyz";
var digits = buildString(10,function(i){ return i;})
숫자;//"0123456789"
var 무작위 = buildString(9,function(){
Random = String.fromCharCode(Math.floor(Math.random()*26) aIndex
});
무작위;//"yefjmcef"(무작위)

이를 통해 독자는 구현 세부 사항을 다루지 않고도 코드가 무엇을 할 수 있는지 더 명확하게 이해할 수 있습니다.

비고

자바스크립트는 지정된 범위(m-n 사이)의 난수에 대한 공식을 반환합니다. Math.random()*(n-m) m

동시에 질문 요구 사항과 양의 정수를 반환해야 하는지 여부에 주의하세요

2.3 통화 모드

함수를 호출하면 현재 함수의 실행이 일시 중지되고 제어 및 매개변수가 새 함수에 전달됩니다. 선언 시 정의된 형식 매개변수 외에도 각 함수는 this와 인수라는 두 개의 새로운 추가 매개변수를 받습니다.

매우 중요한 매개변수로 호출 모드에 따라 그 값이 결정됩니다.

다음은 JavaScript의 4가지 중요한 호출 패턴입니다.

a. 메소드 호출 패턴
b. 함수 호출 패턴
c. 생성자 호출 패턴
d. 적용 호출 패턴을 적용합니다

이러한 모드는 주요 매개변수를 초기화하는 방법이 다릅니다

1. 메소드 호출 방법

함수가 객체의 메소드 역할을 할 때, 우리는 그 함수를 메소드라고 부릅니다. 메소드가 호출되면 이는 호출 객체에 바인딩됩니다.

코드 복사 코드는 다음과 같습니다.

var myObj={
값:0,
증분:함수(inc){
This.val =typeof inc ==="숫자"? inc:1;
},
Get_val:function(){return this.val;}
}
myObj.increment();// 1
myObj["increment"](2);//3

요약:

1. 이를 통해 자신이 속한 객체의 컨텍스트를 얻을 수 있는 메소드를 퍼블릭 메소드라고 합니다

2. 함수를 사용하기 위해 . 또는 첨자 표현식을 사용할 경우 메소드 호출 모드이며 이 객체는 이전 객체에 바인딩됩니다.

3. 함수는 이를 사용하여 객체에 액세스할 수 있으므로 객체의 값을 검색하거나 객체의 값을 변경할 수 있습니다. 이것을 객체에 바인딩하는 것은 호출 시 발생합니다.

2. 함수 호출 패턴

함수가 객체의 속성이 아닌 경우 함수라고 합니다. 함수 호출 모드로 함수를 호출하면 전역 객체에 바인딩됩니다. 이는 지속되는 JavaScript의 설계 실수였습니다.

코드 복사 코드는 다음과 같습니다.

함수 추가(x,y){
xy 반환;
}
myObj.double=function(){
var that=this;
var helper=function(){
That.val=add(that.value,that.value);
//잘못된 글쓰기 방식은 이런 것일 수도 있는데, 왜 잘못된 걸까요? 내부 함수로 함수를 호출하면 this가 잘못된 객체에 바인딩되었고, 전역 객체에는 val 속성이 없어 잘못된 값이 반환되기 때문입니다.
​​​​ //this.val = this.val this.val;
}
도우미();
}
myObj.double();//6 

3. 생성자 호출 패턴

JavaScript는 프로토타입 상속을 기반으로 하는 언어입니다. 즉, 객체가 다른 객체의 속성을 직접 상속할 수 있으며 언어에는 클래스가 없습니다.

앞에 new를 붙여 함수를 호출하면 함수에 연결된 프로토타입 멤버를 숨기는 새 객체를 얻게 되며 이 역시 새 객체에 바인딩됩니다.

새 접두사는 return 문의 동작도 변경합니다. 이는 또한 권장되는 프로그래밍 방법이 아닙니다.

코드 복사 코드는 다음과 같습니다.

var Foo = 함수(상태){
This.status = 상태;
}
Foo.prototype.get_status = 함수(){
this.status를 반환하세요.
}
//Foo 인스턴스 생성
var myFoo = new Foo("bar");
myFoo.get_status();//"바"

4. 적용 호출 패턴을 적용합니다

JavaScript는 함수형 객체 지향 언어이므로 함수에는 메서드가 있을 수 있습니다.

Apply 메소드에는 두 개의 매개변수가 있습니다. 첫 번째는 여기에 바인딩될 값이고 두 번째는 매개변수 배열입니다. 즉, Apply 메소드를 사용하면 배열을 만들고 이를 사용하여 함수를 호출할 수 있습니다. , 이를 통해 이를 선택할 수 있습니다. 값을 사용하면 배열의 값도 선택할 수 있습니다.

코드 복사 코드는 다음과 같습니다.

var 배열 = [3,4];
var sum = add.apply(null,array) // 7
var statusObj = {status:"ABCDEFG"};
Foo.prototype.pro_get_status = 함수(접두사){
접두사 "-" 반환 this.status;
}
var status = Foo.prototype.get_status.apply(statusObj);// "ABCDEFG"
var pro_status = Foo.prototype.get_status.apply(statusObj,["prefix"]);// "prefix -ABCDEFG"

일반적으로 함수나 메서드(특수 키워드 this에 바인딩된 값)의 수신자는 호출자의 구문에 따라 결정됩니다. 특히, 메소드 호출 구문은 메소드 객체를 this 변수에 바인딩합니다. 그러나 때로는 함수를 호출하기 위해 사용자 정의 수신기를 사용해야 하는 경우도 있습니다. 이때 호출 메소드나 바인드 메소드를 사용하여 메소드를 호출하도록 수신기를 사용자 정의해야 합니다

2.4 바인딩 메소드를 사용하여 수신자가 결정된 메소드 추출

값이 함수인 메서드와 속성의 차이가 없기 때문에 객체의 메서드를 추출하여 함수를 콜백 함수로 추출하여 고차 함수에 직접 전달하는 것도 쉽습니다.

그러나 추출된 함수의 수신자를 함수가 추출된 개체에 바인딩하는 것을 잊어버리기 쉽습니다.

코드 복사 코드는 다음과 같습니다.

var 버퍼 = {
항목: [],
       추가 :함수{
This.entries.push(s);
}  
}
var 소스 = ["867","-","5309"];
source.forEach(butter.add);//오류:항목이 정의되지 않았습니다

이때,utter.add의 수신자는 버터 객체가 아닙니다. 함수의 수신자는 호출 방법에 따라 다릅니다. forEach 메소드는 전역 범위에서 호출되므로 forEach 메소드의 구현은 전역 객체에 항목 속성이 없으므로 전역 객체를 사용합니다. 코드에서 오류가 발생했습니다.

forEach 메소드를 사용하면 호출자가 콜백 함수의 수신자로 선택적 매개변수를 제공할 수 있습니다.

코드 복사 코드는 다음과 같습니다.

var 소스 = ["867","-","5309"];
source.forEach(butter.add,butter);

그러나 모든 고차 함수가 사용자에게 콜백 함수 수신기를 제공할 만큼 충분히 사려 깊은 것은 아닙니다.

두 가지 해결 방법이 있습니다.

1) 버퍼 객체 메서드를 통해 add를 명시적으로 호출하는 래퍼 함수를 ​​만듭니다. 래핑된 함수가 어떻게 호출되든 항상 해당 매개변수를 대상 배열로 푸시하는 것이 보장됩니다.

코드 복사 코드는 다음과 같습니다.

var 소스 = ["867","-","5309"];
source.forEach(함수{
버터.추가(들);
});

2) 함수 객체의 바인딩 메소드에는 수신자 객체가 필요하며, 수신자 객체의 메소드 호출을 이용하여 원래 함수를 호출하는 래퍼 함수를 ​​생성합니다.

코드 복사 코드는 다음과 같습니다.

var 소스 = ["867","-","5309"];
source.forEach(butter.add.bind(buffer));

비고

buffer.add.bind(buffer)는 buffer.add 함수를 수정하는 대신 새 함수를 생성합니다.

buffer.add === buffer.add.bind(buffer) //false

위 내용은 이 글의 전체 내용입니다. 모두 마음에 드셨으면 좋겠습니다.