JavaScript를 시작하기 위한 기본 기능에 대한 자세한 설명_기본 지식

일반적으로 JavaScript의 함수는 다음과 같습니다.

◆ 변수에 할당

◆ 객체의 속성에 할당

◆ 다른 항목에 매개변수로 전달 함수

◆는 함수

◆의 결과로 반환됩니다. 리터럴을 사용하여

함수 객체 생성

1.1 함수 생성

JavaScript 함수를 만드는 간단한 방법(거의 아무도 사용하지 않음)은 함수 "생성자"에 new 연산자를 사용하는 것입니다.

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

var funcName = new Function( [argname1, [... argnameN,]] body );

매개변수 목록에는 원하는 수의 매개변수가 있을 수 있으며 그 뒤에 함수 본문이 올 수 있습니다. 예:

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

var add = new Function("x", "y", "return(x y)")
print(add(2, 4));

will 결과가 출력됩니다:

6

그런데 누가 이렇게 어려운 방식으로 함수를 만들겠습니까? 함수 본체가 복잡하다면 많은 노력이 필요할 것입니다. 따라서 JavaScript는 리터럴을 통해 함수를 생성하는 일종의 구문 설탕을 제공합니다.

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

function add(x, y){
return x y;
}

또는:

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

var add = function(x, y){
return x y; 🎜>
사실 이것은 전통적인 분야의 프로그래머들이 오해할 가능성이 더 높습니다. function 키워드는 Function을 호출하여 새 객체를 생성하고 매개변수 목록과 함수 본문을 Function의 생성자에 정확하게 전달합니다.

일반적으로 전역 범위(범위에 대해서는 다음 섹션에서 자세히 소개)에서 객체를 선언하는 것은 속성에 값을 할당하는 것에 지나지 않습니다. 예를 들어 위 예제의 add 함수는 실제로는 그렇습니다. 전역 객체는 속성을 추가하며, 속성의 값은 객체, 즉 function(x, y){return x y;}임을 이해하는 것이 중요합니다. 이 문의 구문은 다음과 같습니다.

코드 복사 코드는 다음과 같습니다.var str = "이것은 문자열입니다.";

차이가 없습니다. 그들은 모두 전역 객체에 새로운 속성을 동적으로 추가합니다. 그게 전부입니다.

다른 객체와 마찬가지로 함수도 JavaScript 실행 시스템에서 독립적인 객체로 존재한다는 것을 설명하기 위해 다음 예를 살펴보는 것이 좋습니다.

코드 복사 코드는 다음과 같습니다.function p(){

print("invoke p by ()"); }

p.id = "func";
p.type = "함수";

print(p)
print(p.id ":" p. type);
print(p());

맞습니다. p는 익명 함수(객체)를 참조하지만 다른 객체와 마찬가지로 속성을 가질 수도 있습니다. :

function (){
print("invoke p by ()")
func:function
invoke p by ()

1.2 함수의 매개변수

JavaScript에서 함수 매개변수는 매우 흥미롭습니다. 예를 들어, 함수가 형식 매개변수를 지정하지 않고 선언된 경우에도 함수에 원하는 수의 매개변수를 전달할 수 있습니다.





코드 복사

코드는 다음과 같습니다.function adPrint(str, len, option){ var s = str | "기본값"; var o = 옵션

s = s.substring l);
switch(o){
case "u":
s = s.toUpperCase()
break
case "l":
s = s. toLowerCase();
break;
break;
}

print(s)

adPrint("안녕하세요. ");
adPrint("Hello, world", 5);
adPrint("Hello, world", 5, "l");//소문자
adPrint("Hello, world", 5, "u" );//대문자

adPrint 함수는 선언 시 세 가지 형식 매개변수(인쇄할 문자열, 인쇄할 길이, 대문자 또는 소문자로 변환할지 여부)를 허용합니다. 하지만 호출할 때 하나의 매개변수, 두 개의 매개변수 또는 세 개의 매개변수를 adPrint에 순차적으로 전달할 수 있습니다(3개 이상의 매개변수를 전달할 수도 있지만 상관없습니다). 실행 결과는 다음과 같습니다.

Hello , world
Hello
hello
HELLO

사실 JavaScript가 함수 매개변수를 처리할 때 인터프리터가 함수에 전달하는 내용은 다른 컴파일 언어와 다릅니다. 배열의 내부 값을 인수라고 하며 함수 개체가 생성될 때 초기화됩니다. 예를 들어 하나의 매개변수를 adPrint에 전달하면 다른 두 매개변수는 정의되지 않습니다. 이러한 방식으로 정의되지 않은 매개변수를 adPrint 함수 내에서 처리하여 외부에 노출할 수 있습니다. 즉, 모든 매개변수를 처리할 수 있습니다.

다른 예를 통해 이 마법 같은 주장을 논의합니다.

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

함수 sum(){
var result = 0;
for(var i = 0, len = 인수.length; i < len; i ){
var current = 인수 [i];
if(isNaN(current)){
throw new Error("숫자 예외 없음")
}else{
result = current; }

결과 반환
}

print(sum(10, 20, 30, 40, 50))
print(4, 8, 15, 16 , 23, 42));//"Lost"에 대한 마법의 숫자 문자열
print(sum("new"));

sum 함수에는 명시적인 형식 매개변수가 없으며 동적으로 다음을 수행할 수 있습니다. 그러면 sum 함수에서 이러한 매개변수를 어떻게 참조할 수 있습니까? 여기서는 인수의 의사 배열을 사용해야 합니다.

150
108
오류: 숫자 예외가 아님

함수 범위

범위 개념은 거의 모든 주류 언어에 반영됩니다. JavaScript에서는 다음과 같은 특징이 있습니다. 변수 범위는 내에서 유효합니다. 블록 범위 없이 함수 본문. Java 언어에서는 다음과 같이 for 루프 블록에 아래 첨자 변수를 정의할 수 있습니다.

public void method(){
for( int i = 0; i < ; obj1.length; i ){
//여기에서 작업하세요
}
//i는 현재 정의되지 않았습니다.
for(int i = 0; i < obj2.length; i ){
//다른 작업 수행
}
}
JavaScript에서는

코드 복사 코드는 다음과 같습니다:function func(){

for(var i = 0; i < array.length; i ){

//여기서 뭔가를 하세요 .
}
//현재 값이 있고 == array.length
print(i);//i == array.length
}

JavaScript 함수는 로컬 범위에서 실행됩니다. 로컬 범위에서 실행되는 함수 본문은 외부(전역 범위일 수도 있음) 변수 및 함수에 액세스할 수 있습니다. JavaScript의 범위는 어휘 범위입니다. 소위 어휘 범위는 다음 예에서와 같이 범위가 실행될 때가 아니라 정의될 때(어휘 분석) 결정된다는 의미입니다.

코드 복사 코드는 다음과 같습니다.var str = "global";

functionscopeTest(){

print( str);
var str = "local";
print(str)
}

scopeTest();

실행 결과는 무엇입니까? 초보자는

global
local

이라는 답을 얻을 가능성이 높습니다. 올바른 결과는

정의되지 않음 local

scopeTest 함수의 정의에서 선언되지 않은 변수 str을 미리 접근한 후 str 변수를 초기화하기 때문에 첫 번째 print(str)에서는 정의되지 않은 오류가 반환됩니다. 그렇다면 함수가 이때 외부 str 변수에 접근하지 않는 이유는 어휘 분석이 완료된 후 스코프 체인을 구성할 때 함수 내에 정의된 var 변수가 체인에 들어가게 되기 때문입니다. 전체 함수 범위 테스트에서 모두 볼 수 있습니다(함수 본문의 첫 번째 줄부터 마지막 ​​줄까지). str 변수 자체는 정의되지 않았으므로 프로그램은 순차적으로 실행되며 두 번째 줄에서는 a를 할당합니다. 값을 str로 지정하므로 해당 줄의 세 번째 줄 print(str)는 "local"을 반환합니다.


함수 컨텍스트
Java나 C/C 등의 언어에서 메소드(함수)는 객체에 붙어서만 존재할 수 있으며 독립적이지 않습니다. JavaScript에서 함수는 개체이며 다른 개체의 일부가 아닙니다. 특히 함수형 JavaScript를 이해하려면 함수를 일급으로 간주합니다.

함수의 컨텍스트는 변경될 수 있습니다. 따라서 함수 내에서도 함수가 하나의 개체의 메서드로 사용될 수 있고 동시에 다른 개체의 메서드로 사용될 수 있습니다. 함수 자체는 독립적입니다. 함수의 컨텍스트는 함수 개체의 호출 또는 적용 함수를 통해 수정할 수 있습니다.


call 및 적용
call 및 Apply는 일반적으로 컨텍스트를 수정하는 데 사용됩니다. 함수의 this 포인터는 호출 또는 적용의 첫 번째 매개변수로 대체됩니다. JavaScript 객체 및 JSON 시작하기의 예를 살펴보는 것이 좋습니다.

//이름이 지정된 사람 정의 jack
var jack = {
name : "jack",
age : 26
}

//abruzzi라는 이름으로 다른 사람 정의
var abruzzi = {
이름 : "abruzzi",
나이 : 26
}

//전역 함수 객체 정의
function printName(){
return this.name; }

//printName의 컨텍스트를 jack으로 설정하고, 이때는 jack
print(printName.call(jack))
//printName의 컨텍스트를 abruzzi로 설정하고, 지금은 abruzzi입니다
print(printName.call(abruzzi))

print(printName.apply(jack))
print(printName.apply(abruzzi)); >매개변수가 하나만 있는 경우 매개변수가 여러 개인 경우 호출 및 적용 사용법은 동일합니다.

setName.apply(jack, ["Jack Sept."])
print(printName .apply(jack));

setName.call(abruzzi, "John Abruzzi")
print(printName.call(abruzzi))
결과는 다음과 같습니다.

Jack Sept.
John Abruzzi
apply의 두 번째 매개변수는 함수에 필요한 매개변수 배열이고, call에는 쉼표(,)로 구분된 여러 매개변수가 필요합니다.


함수 사용하기

앞서 언급했듯이 JavaScript에서는 함수를 변수에 할당할 수 있습니다

◆ 객체의 속성에 할당
◆ 다른 함수에 매개변수로 전달

◆ 함수의 결과로 반환

다음 시나리오를 각각 살펴보겠습니다.

변수에 값 할당 :

//두 개의 매개변수를 받아들이고 그 합을 반환하는 함수 선언
function add(x, y){
return x y
}

var a = 0;
a = add;//변수에 함수 할당
var b = a(2, 3);//이 새 함수를 a라고 부릅니다.
print(b)>이 코드 할당 후 변수 a는 함수 add를 참조하기 때문에 "5"를 인쇄합니다. 즉, a의 값은 함수 개체(실행 가능한 코드 블록)이므로 사용할 수 있습니다. a(2와 같은 문) , 3) 합계 연산을 수행하는 데 사용됩니다.

은 개체의 속성에 할당됩니다.





코드 복사

코드는 다음과 같습니다. : var obj = { id : "obj1" } obj.func = add;//obj 객체의 속성에 값 할당

obj.func(2, 3);// 5 반환

사실 이 예제는 이전 예제와 기본적으로 동일합니다. 첫 번째 예제의 a 변수는 실제로 전역 객체의 속성입니다(클라이언트 환경에 있는 경우 window 객체로 표시됨). 두 번째 예는 obj 객체입니다. 전역 객체를 직접 참조하는 경우는 거의 없으므로 별도로 설명하겠습니다.

매개변수로 전달됨:

//고급 인쇄 기능의 두 번째 버전
function adPrint2(str, handler){
print(handler(str))
}

//문자열을 대문자로 변환하고 return
function up(str){
return str.toUpperCase()
}

/ /문자열을 다음으로 변환 소문자로 반환
function low(str){
return str.toLowerCase();
}

adPrint2("Hello, world", up)
adPrint2("Hello , world", low);
이 스니펫을 실행하면 다음 결과를 얻게 됩니다:

HELLO, WORLD
hello, world

는 함수의 두 번째 매개변수에 유의하세요. adPrint2는 실제로 함수입니다. 이 처리 함수가 매개변수로 전달되면 이 함수는 adPrint2 내에서 계속 호출될 수 있습니다. 이 기능은 특히 일부 객체를 처리하고 싶지만 무엇인지 확실하지 않을 때 유용합니다. 형식에서 "처리 방법"을 추상적인 세분성(예: 함수)으로 래핑할 수 있습니다.

함수의 반환 값:

먼저 가장 간단한 예를 살펴보겠습니다.

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

function currying(){
return function(){
print("curring")
}
}

currying 함수는 익명 함수를 반환합니다. 이 익명 함수는 "curring"을 인쇄합니다. 간단히 currying()을 호출하면 다음과 같은 결과를 얻을 수 있습니다.

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

function (){
print("curring")
}

If currying으로 반환된 익명을 호출하려면 함수는 다음과 같아야 합니다.

currying()()
첫 번째 대괄호 연산은 currying 자체를 호출하는 것을 의미합니다. 두 번째 대괄호 연산자가 이 반환 값을 호출하면 다음과 같은 결과를 얻게 됩니다.

currying