> 웹 프론트엔드 > JS 튜토리얼 > js에서 함수를 정의하는 세 가지 방법

js에서 함수를 정의하는 세 가지 방법

jacklove
풀어 주다: 2018-06-15 15:59:47
원래의
6334명이 탐색했습니다.

js 시리즈 튜토리얼 4 - 함수, 함수 매개변수

js에서는 함수 자체가 객체 유형이므로 객체의 속성 또는 매개변수로 정의, 할당할 수 있습니다. 다른 기능. 함수 이름은 함수의 객체 클래스에 대한 참조일 뿐입니다.

1. 함수 정의

【1】함수 선언문
함수 키워드를 사용하고 그 뒤에 매개변수 집합과 함수 본문이 옵니다.

function funcname([arg1 [,arg2 [...,argn]]]){
    statement;
}
로그인 후 복사

【2】함수 정의 표현식

수식에 정의된 함수, 함수 이름은 선택사항입니다

var functionName = function([arg1 [,arg2 [...,argn]]]){
    statement;
}var functionName = function funcName([arg1 [,arg2 [...,argn]]]){
    statement;
}
로그인 후 복사

람다 함수라고도 불리는 익명 함수(익명 함수)는 함수 키워드 뒤에 식별자가 없는 함수입니다

일반적으로 표현식에서 함수를 정의할 때 이름이 필요하지 않습니다. 이를 정의하는 코드를 더 간결하게 만듭니다. 함수 정의 표현식은 한 번만 사용되는 함수를 정의하는 데 특히 적합합니다.

var tensquared = (function(x) {return x*x;}(10));   //
로그인 후 복사

함수 정의 표현식에는 이름이 포함되어 있지만 함수의 로컬 범위에는 함수 개체에 바인딩된 이름이 포함됩니다. 실제로 함수 이름은 함수 내부의 지역 변수가 됩니다

var test = function fn(){   return fn;
}console.log(test);//fn(){return fn;}console.log(test());//fn(){return fn;}console.log(test()());//fn(){return fn;}
로그인 후 복사

개인적으로는 명명된 함수 표현식의 경우 함수 이름은 함수 개체의 형식 매개 변수와 동일하며 함수 내에서만 사용할 수 있습니다. 변수 이름은 동일합니다. 함수 객체의 실제 매개변수의 경우 함수 내부와 외부 모두에서 사용할 수 있습니다.

var test = function fn(){   return fn === test;
}console.log(test());//trueconsole.log(test === fn);//ReferenceError: fn is not defined
로그인 후 복사

함수는 이 속성을 통해 지정된 함수에서 지정한 이름이 아닌 이름 속성을 정의합니다. 이 속성의 값은 항상 다음과 같습니다. 함수 키워드 뒤의 식별자, 익명 함수의 이름 속성은 비어 있습니다.

//IE11-浏览器无效,均输出undefined//chrome在处理匿名函数的name属性时有问题,会显示函数表达式的名字function fn(){};
console.log(fn.name);//'fn'var fn = function(){};
console.log(fn.name);//'',在chrome浏览器中会显示'fn'var fn = function abc(){};
console.log(fn.name);//'abc'
로그인 후 복사

[3] 함수 생성자

함수 생성자는 여러 매개변수를 받지만 마지막 매개변수는 항상 함수 본문으로 간주되며 이전 매개변수는 새 함수의 매개변수를 열거합니다

var functionName = new Function(['arg1' [,'arg2' [...,'argn']]],'statement;');
로그인 후 복사

[참고] 함수 생성자는 함수 이름을 지정할 수 없으며 익명 함수를 생성합니다

기술적으로 말하면 다음과 같습니다. 함수 표현식. 그러나 이 구문을 사용하면 코드가 두 번 구문 분석되므로 권장되지 않습니다. 첫 번째는 일반 자바스크립트 코드를 파싱하는 것이고, 두 번째는 생성자에 전달된 문자열을 파싱하는 것입니다. 이는 성능에 영향을 줍니다

var sum = new Function('num1','num2','return num1 + num2');//等价于var sum = function(num1,num2){
    return num1+num2;
}
로그인 후 복사

Function() 생성자가 생성한 함수, 해당 함수 본문의 컴파일은 항상 전역 범위에서 실행됩니다. 따라서 Function() 생성자는 전역 범위에서 실행되는 eval()과 유사합니다

var test = 0;function fn(){
    var test = 1;    return new Function('return test');}
console.log(fn()());//0
로그인 후 복사

[참고] 모든 함수가 생성자가 될 수는 없습니다

var o = new Math.min();//Uncaught TypeError: Math.min is not a constructor
로그인 후 복사

2. 함수 선언 순서

함수 선언, 변수가 먼저 로드됩니다. . 따라서 함수 선언이 호출 전인지 후인지 걱정하지 마세요.

함수를 호출하면 로컬 활성 객체, 즉 현재 js 파일에서 먼저 쿼리됩니다. 따라서 두 개의 js 파일에 동일한 함수 이름이 정의되어 있으면 위쪽으로 쿼리됩니다. 두 개의 js 파일은 각각 내부적으로 함수를 호출하며 마지막으로 선언된 함수는 다른 js 파일에서 호출됩니다.

3. 반복

변수를 반복적으로 선언하는 것은 쓸모가 없으며 동일한 범위에서 이전에 선언된 변수를 덮어쓰지 않습니다. 그러나 함수를 반복적으로 선언하면 이전에 선언된 함수나 변수를 동일한 이름으로 덮어쓰게 됩니다.

//变量的重复声明无用var a = 1;var a;
console.log(a);//1
로그인 후 복사
//覆盖同名变量var a;function a(){
    console.log(1);
}a();//1
로그인 후 복사
//覆盖同名函数a();//2function a(){
    console.log(1);
}function a(){
    console.log(2);
}
로그인 후 복사

4. 삭제

함수 선언문으로 생성된 변수는 삭제할 수 없으며 이는 변수 선언과 동일합니다.

function foo(){
    console.log(1);
}delete foo;//falseconsole.log(foo());//1
로그인 후 복사

이 글에서는 js에서 함수를 정의하는 세 가지 방법을 소개합니다. 더 많은 관련 내용은 PHP 중국어 홈페이지를 참고해주세요.

관련 권장 사항:

JS의 "참과 거짓"

JS를 통해 충돌을 확인하는 방법!

클래식 알고리즘을 위한 일부 js 구현 솔루션을 소개합니다

위 내용은 js에서 함수를 정의하는 세 가지 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿