>  기사  >  웹 프론트엔드  >  JavaScript 함수 객체 생성, 매개변수 및 범위 인스턴스에 대한 자세한 설명

JavaScript 함수 객체 생성, 매개변수 및 범위 인스턴스에 대한 자세한 설명

伊谢尔伦
伊谢尔伦원래의
2017-07-25 11:29:031310검색

Function Object

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

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

매개변수 목록에는 Any가 포함될 수 있습니다. 매개변수 개수 뒤에 함수 본문이 옵니다. 예를 들어

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

는 결과를 인쇄합니다.
6
하지만 함수 본문이 더 복잡하다면 누가 이 문자열을 연결합니까? 많은 노력이 필요하므로 JavaScript는 리터럴을 통해 함수를 생성하는 일종의 구문 설탕을 제공합니다:

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

또는:

var add = function(x, y){ 
return x + y; 
}

실제로 이러한 구문 설탕은 전통적인 분야의 프로그래머에게 오해가 발생합니다. function 키워드는 Function을 호출하여 새 객체를 생성하고 매개변수 목록과 함수 본문을 Function의 생성자에 정확하게 전달합니다.
일반적으로 전역 범위(범위는 다음 섹션에서 자세히 소개됨)에서 개체를 선언하는 것은 속성에 값을 할당하는 것에 지나지 않습니다. 예를 들어 위 예제의 add 함수는 실제로 값을 추가하는 것뿐입니다. Attribute, 속성 이름은 add이고, 속성의 값은 객체, 즉 function(x, y){return x+y;}입니다. 이 문장을 문법적으로 이해하는 것이 중요합니다. 동일:

var str = "This is a string";

To. 그들은 모두 전역 객체에 새로운 속성을 동적으로 추가합니다. 그게 전부입니다.
함수가 다른 객체와 마찬가지로 JavaScript 실행 시스템에 독립된 객체로 존재한다는 것을 설명하기 위해 다음 예를 살펴보는 것이 좋습니다.

function p(){ 
print("invoke p by ()"); 
} 
p.id = "func"; 
p.type = "function"; 
print(p); 
print(p.id+":"+p.type); 
print(p());

그렇습니다. p는 익명 함수(객체)를 참조하지만 At. 동시에 다른 객체와 마찬가지로 속성을 가질 수 있습니다.

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

1.2 함수의 매개변수
JavaScript에서 함수의 매개변수는 매우 흥미롭습니다. 함수를 선언할 때 공식 매개변수가 지정되지 않은 경우에도 다음과 같이 함수에 매개변수를 지정합니다.

function adPrint(str, len, option){ 
var s = str || "default"; 
var l = len || s.length; 
var o = option || "i"; 
s = s.substring(0, l); 
switch(o){ 
case "u": 
s = s.toUpperCase(); 
break; 
case "l": 
s = s.toLowerCase(); 
break; 
default: 
break; 
} 

print(s); 
} 

adPrint("Hello, world"); 
adPrint("Hello, world", 5); 
adPrint("Hello, world", 5, "l");//lower case 
adPrint("Hello, world", 5, "u");//upper case

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

Hello, world 
Hello 
hello 
HELLO

In 사실, JavaScript가 함수 매개변수를 처리할 때 인터프리터가 함수에 전달하는 것은 함수 객체가 생성될 때 초기화되는 배열과 유사한 내부 값입니다. 예를 들어 하나의 매개변수를 adPrint에 전달하면 다른 두 매개변수는 정의되지 않습니다. 이러한 방식으로 외부에 노출될 수 있는 adPrint 함수 내부에서 정의되지 않은 매개변수를 처리할 수 있습니다. 모든 매개변수를 처리할 수 있습니다.
이 마법의 주장을 또 다른 예를 통해 살펴보겠습니다.

function sum(){ 
var result = 0; 
for(var i = 0, len = arguments.length; i < len; i++){ 
var current = arguments[i]; 
if(isNaN(current)){ 
throw new Error("not a number exception"); 
}else{ 
result += current; 
} 
} 
return result; 
} 

print(sum(10, 20, 30, 40, 50)); 
print(sum(4, 8, 15, 16, 23, 42));//《迷失》上那串神奇的数字 
print(sum("new"));

함수 sum에는 명시적인 형식 매개변수가 없으며 동적으로 많은 매개변수를 전달할 수 있습니다. 그러면 sum 함수에서 이를 참조하는 방법은 무엇입니까? 인수의 의사 배열을 사용해야 합니다. 실행 결과는 다음과 같습니다.

150 
108 
Error: not a number exception

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

public void method(){ 
for(int i = 0; i < obj1.length; i++){ 
//do something here; 
} 
//此时的i为未定义 
for(int i = 0; i < obj2.length; i++){ 
//do something else; 
} 
}

그리고 JavaScript에서는:

function func(){ 
for(var i = 0; i < array.length; i++){ 
//do something here. 
} 
//此时i仍然有值,及I == array.length 
print(i);//i == array.length; 
}

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

var str = "global"; 
function scopeTest(){ 
print(str); 
var str = "local"; 
print(str); 
} 
scopeTest();

실행 결과는 무엇입니까? 이 답을 얻으세요:

global 
local

그리고 올바른 결과는 다음과 같습니다:

undefined 
local

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

위 내용은 JavaScript 함수 객체 생성, 매개변수 및 범위 인스턴스에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.