JavaScript 기능에 대한 자세한 설명_기본지식
- WBOY원래의
- 2016-05-16 16:31:141257검색
소개
많은 기존 언어(C/C/Java/C# 등)에서 함수는 언어 키워드를 사용하여 함수를 선언한 다음 사용해야 하는 경우에만 호출할 수 있습니다. 함수를 매개변수로 다른 함수에 전달하거나, 지역 변수에 할당하거나, 반환 값으로 사용하려면 함수 포인터, 대리자 등 특수한 메서드를 거쳐야 합니다.
JavaScript 세계에서 함수는 일급 시민입니다. 기존 함수(선언 및 호출)를 사용하는 모든 방법을 가질 뿐만 아니라 값을 할당하고 매개변수를 전달하고 간단한 값처럼 반환할 수도 있습니다. - 일류 함수. 뿐만 아니라 JavaScript의 함수는 클래스의 생성자 역할도 하며 Function 클래스의 인스턴스이기도 합니다. 이러한 다중 ID는 JavaScript 기능을 매우 중요하게 만듭니다.
1. 입문용 자바스크립트 함수
다른 언어와 마찬가지로 JavaScript 함수는 먼저 선언하고 나중에 사용하는 원칙을 따릅니다. 함수 이름에는 문자, 숫자, 밑줄 또는 $만 포함될 수 있으며 숫자로 시작할 수 없습니다. 함수를 선언하는 일반적인 방법에는 두 가지가 있습니다:
// myfunc 함수를 직접 선언합니다
함수 myfunc(/* 인수 */) {
}
//익명 함수를 지역 변수 myfunc
에 할당합니다. var myfunc = 함수(/* 인수 */) {
}
위의 두 함수 선언 방법에는 미묘한 차이가 있습니다. 첫 번째 방법은 호출 전, 호출 후 또는 실행되지 않는 위치에 선언되는지 여부에 관계없이 선언할 때 명명된 함수입니다. (예: return 문 또는 결코 true가 아닌 분기)은 전체 범위에서 액세스할 수 있습니다. 두 번째 방법은 엄밀히 말하면 함수 선언(함수 선언)이 아닌 변수에 익명 함수를 할당하는 것입니다. 이 함수는 할당 전에 어떤 코드에서도 액세스할 수 없습니다. 즉, 호출하기 전에 할당을 완료해야 합니다. 그렇지 않으면 호출 시 "TypeError: undefed is a function"이라는 오류가 발생합니다. 예:
myfunc1(); // myfunc1을 직접 선언했기 때문에 정상적으로 호출 가능
함수 myfunc1() {
}
myfunc2(); // 오류 TypeError: 정의되지 않은 것은 함수가 아닙니다
var myfunc2 = function() {
};
함수를 호출하는 기본 방법은 한 쌍의 괄호를 사용하는 전통적인 언어와 동일합니다: myfunc(). JavaScript 함수는 직접 또는 간접 재귀 호출도 지원합니다. 예를 들어 클래식 Fibonacci 함수는 다음과 같이 JavaScript로 구현될 수 있습니다.
If (n == 1 || n == 2) {
1을 반환합니다.
} 다른 {
fib(n - 2) fib(n - 1)을 반환합니다.
}
}
경고(인수.길이)
}
테스트(1); // 1
테스트(1, 'a'); // 2
test(true, [], {}); // 3 인수는 C 언어 printf와 유사한 기능을 구현하는 데 사용할 수 있으며 메소드 다형성을 구현하는 데에도 사용할 수 있습니다.
2. 고급 자바스크립트 기능
2.1 익명 함수와 중첩 함수
JavaScript에서는 익명 함수라고 하는 이름 없이 함수를 선언할 수 있습니다. 동시에 JavaScript에서는 중첩 함수라고 하는 함수 내부에서 함수를 선언할 수도 있습니다. 중첩 함수의 범위는 전체 상위 함수입니다.
이전 함수 선언 섹션에서 익명 함수와 중첩 함수의 사용을 살펴보았습니다. 익명 함수에는 이름이 없으므로 컨텍스트를 오염시키는 새 변수를 도입하지 않고 새 변수 범위를 가져오는 경우가 많습니다. 지구 환경 오염을 방지하기 위해 사용됩니다.
JavaScript 런타임에는 특별한 전역 환경(전역 객체)이 있는데, 이 객체는 전역 함수와 변수를 저장하며, 실제 개발에서는 전역 객체 변수에 실수로 중복이 발생하는 경우 여러 타사 라이브러리가 사용되는 경우가 많습니다. 또는 함수 선언으로 인해 코드 실행에 혼란이 발생합니다. 예를 들어, 두 개의 js 파일이 차례로 도입되고 각각은 내부 사용을 위해 자체 함수 로그를 정의하며 두 번째로 도입된 함수는 첫 번째 정의를 덮어쓰며 후속 실행에서 로그 함수를 호출하면 문제가 발생하지 않을 수 있습니다. 오류를 유발합니다. 이때 익명 함수를 사용하여 전체 js에서 로직을 래핑하면 이 오류를 피할 수 있습니다. 이 방법은 대부분의 오픈 소스 js 라이브러리에서 사용되었습니다.
(function() { // 익명 함수
함수 로그(msg) {
console.log(msg)
}
// 기타 코드
}()); // 즉시 실행
위 코드는 간단한 예시로, 로그 함수의 범위는 이 익명 함수로 제한되며, 익명 함수를 외부에 한 쌍의 괄호()로 묶어 함수 표현식을 구성합니다. 함수 뒤에 괄호 한 쌍을 붙여 함수가 즉시 실행됨을 나타내므로 원래 코드가 정상적으로 실행될 수 있습니다. 그러나 이렇게 선언된 함수, var를 통해 선언된 변수 등은 내부적이므로 익명 함수가 아닌 다른 코드에서는 접근할 수 없습니다. 일부 기능을 인터페이스로 노출해야 하는 경우 다음과 같은 여러 가지 방법이 있습니다.
var mylib = (함수(전역) {
함수 로그(msg) {
console.log(msg)
}
log1 = log; // 방법 1: var 없이 변수 선언의 기본 동작을 사용하고 log1을 전역 변수로 만듭니다(권장하지 않음)
global.log2 = log; // 방법 2: 전역 객체에 직접 log2 속성을 추가하고 로그 함수에 값을 할당합니다(권장)
return { // 방법 3: 익명 함수의 반환 값을 통해 일련의 인터페이스 함수 컬렉션 객체를 획득하고 이를 전역 변수 mylib에 할당합니다(권장)
로그: 로그
};
}(창));
2.2 고차함수
Return -n; // n의 반대값을 취함
}
함수 square(n) {
n*n 반환; // n 제곱
}
함수 프로세스(숫자, 콜백) {
var 결과 = []
for(var i = 0, length = nums.length; i result[i] = callback(nums[i]); // 처리를 위해 배열 nums의 모든 요소를 콜백에 전달하고 반환 값을 결과로 저장합니다.
}
결과 반환
}
var nums = [-3, -2, -1, 0, 1, 2, 3, 4]
var n_neg = 프로세스(숫자, 음수)
// n_neg = [3, 2, 1, 0, -1, -2, -3, -4]
var n_square = 프로세스(숫자, 사각형)
// n_square = [9, 4, 1, 0, 1, 4, 9, 16];
위 코드는 함수를 다른 함수 프로세스 호출에 매개변수로 전달하는 예를 보여줍니다. 프로세스 함수 구현에서 콜백은 매개변수를 전달하고 가져오는 역할을 하는 블랙박스로 처리됩니다. 반환 값. 이전에는 콜백의 구체적인 구현이 명확하지 않았습니다. 20행과 22행이 실행될 때만 콜백은 각각 음수 또는 제곱으로 표현되며, 각 요소에 대해 각각 반대값 또는 제곱값 연산이 수행됩니다.
함수 생성기() {
변수 i = 0
반환 함수() {
반품
}; }
var gen1 = Generator(); // 자연수 생성기 가져오기
var gen2 = Generator(); // 또 다른 자연수 생성기 가져오기
var r1 = gen1(); // r1 = 0
var r2 = gen1(); // r2 = 1
var r3 = gen2(); // r3 = 0
var r4 = gen2(); // r4 = 1
2.3 폐쇄
클로저(Closure)는 새로운 개념이 아닙니다. 클로저는 많은 함수형 언어에서 사용됩니다. JavaScript에서는 인라인 함수 내의 외부 함수 범위 내에서 변수를 사용할 때 클로저가 사용됩니다. 클로저와 클래스 사이의 관계를 설명하려면 일반적인 비유를 사용하십시오. 클래스는 함수가 있는 데이터이고 클로저는 데이터가 있는 함수입니다.
클로저에 사용되는 변수의 한 가지 특징은 부모 함수가 반환될 때 해제되지 않고 클로저 수명 주기가 끝나면 종료된다는 것입니다. 예를 들어 이전 섹션의 생성기 예제와 같이 gen1과 gen2는 gen1 또는 gen2인 한 독립 변수 i를 사용합니다(gen1의 i가 1 증가해도 gen2의 i는 영향을 받지 않으며 그 반대도 마찬가지임). JavaScript 엔진에 의해 가비지 수집되지 않으므로 해당 변수 i가 해제되지 않습니다. JavaScript 프로그래밍에서 클로저는 무의식적으로 사용됩니다. 클로저의 이러한 기능은 사용 편의성을 제공하지만 메모리 누수와 같은 문제를 쉽게 일으킬 수도 있습니다. 예:
elem.addEventListener('click', function() {
Alert('elem.tagName)을 클릭했습니다.
});
elem.addEventListener('click', function() {
Alert('this.tagName); // 더 이상 elem 변수를 직접 참조하지 않습니다.
});
클로저는 또한 유사한 메모리 누수 문제를 많이 발생시킵니다. 이러한 문제를 피하려면 코드를 작성할 때에만 클로저에 주의하십시오.
2.4 클래스 생성자
JavaScript 함수는 클래스의 생성자 역할도 하므로 함수를 선언하기만 하면 new 키워드를 사용하여 클래스의 인스턴스를 만들 수 있습니다.
함수 사람(이름) {
This.name = 이름
This.toString = function() {
'안녕하세요, 'this.name'!'을 반환합니다. }; }
var p = new Person('Ghostheaven')
Alert(p); // Hello, Ghostheaven! 위의 예에서는 Person 함수가 클래스의 생성자로 사용되었습니다. 이때 새로 생성된 인스턴스 개체에 속성과 메서드를 추가할 수 있습니다. 자세한 객체지향 JavaScript 프로그래밍에 대해서는 이 글을 참고하세요. 여기서 제가 이야기하고 싶은 것은 JavaScript 함수를 클래스 생성자로 사용할 때 반환 값 문제입니다.
반환 이름; // 생성자의 반환 값
}
var obj1 = new MyClass('foo')
var obj2 = MyClass('foo')
var obj3 = new MyClass({})
var obj4 = MyClass({});
obj3 = {}
obj4 = {}
몬스터 레벨 기능 교육 영역에 오신 것을 환영합니다. 몬스터를 차분하고 편안하게 대하는 방법을 가르쳐드립니다. . .
3.1 함수 클래스
JavaScript 런타임에는 Function이라는 내장 클래스가 있습니다. function 키워드를 사용하여 함수를 선언하는 것은 실제로 Function 클래스 개체를 만드는 간단한 형식입니다. 그리고 바인딩하세요. 인스턴스 오브 키워드를 통해 이 명령문을 확인할 수 있습니다.
Function은 클래스이므로 그 생성자는 Function(자체도 Function 클래스의 객체임)이고, new 키워드를 통해 함수 객체 생성이 가능해야 한다. 여기에 Function 클래스를 사용하여 함수를 구성하는 방법에 대한 첫 번째 괴물이 있습니다. Function의 구문은 다음과 같습니다.
위 메서드는 Function을 통해 함수를 구성합니다. 이 함수는 function 키워드로 선언된 다른 함수와 완전히 동일합니다.
3.2 자체 업데이트 기능
많은 언어에서 함수가 선언되면 같은 이름의 함수를 다시 선언할 수 없습니다. 그렇지 않으면 구문 오류가 발생합니다. 그러나 JavaScript의 함수는 반복적으로 선언될 수 있을 뿐만 아니라 자체 업데이트도 가능합니다. 스스로 잡아먹는 괴물이 나타났다!