기술나눔

한어Русский языкEnglishFrançaisIndonesianSanskrit日本語DeutschPortuguêsΕλληνικάespañolItalianoSuomalainenLatina

기능

각 함수는 Function 유형의 인스턴스이며 Function에는 다른 참조 유형과 마찬가지로 속성과 메서드도 있습니다. 함수는 객체이고, 함수 이름은 함수 객체에 대한 포인터이며 반드시 함수 자체에 밀접하게 연결되어 있는 것은 아닙니다.

함수 정의의 함수 선언적 정의

function sum (n1,n2){
return n1+n2;
}

함수 정의의 함수 표현

let sum = function(n1,n2){
return n1+n2;
};

함수 정의 화살표 함수

let sum = (n1,n2)=>{
return n1+n2;
};

함수 정의 생성자

let sum = new Function("n1","n2","return n1+n2");
/*这个构造函数接收任意多个字符串参数，
最后一个参数始终会被当成函数体，
而之前的参数都是新函数的参数*/

화살표 기능

화살표 함수는 함수 표현식을 사용할 수 있는 모든 곳에서 사용할 수 있습니다.

let sum = (a,b)=>{
return a+b;
};
let sum1 = function(a,b){
return a+b;
};
//箭头函数适合嵌入函数的场景
let arr = [1,2,3];
console.log(arr.map(function(i) {return i+1;}));
console.log(arr.map((i)=>{return i+1;}));
//二者结果一样，但是箭头函数更为简洁
 
//如果只有一个参数，括号可以不用。只有没有参数，或者多个参数的情况下，才使用括号
 
let double = (x)=>{return 2*x;};
let triple = x => {return 3*x};
 
//箭头函数也可以不使用大括号，但这样会改变函数的行为。使用大括号就说明包含函数体，可以在一
//个函数中包含多条语句，跟常规函数一样。如果不使用，后面只能有一行代码。
 
let double = (x)=>{return 2*x;};
let triple = x=>3*x;
 

화살표 함수는 간단한 구문을 가지고 있지만 적합하지 않은 상황이 많이 있습니다. 화살표 함수는 인수인 super, new.target을 사용할 수 없으며 생성자로 사용할 수도 없습니다. 또한 화살표 함수에는 프로토타입 속성이 없습니다.

화살표 함수의 매개변수

함수는 화살표 구문을 사용하여 정의되므로 함수에 전달된 매개변수는 인수 키워드를 사용하여 액세스할 수 없고 정의된 명명된 매개변수를 통해서만 액세스할 수 있습니다.

function foo() { 
 console.log(arguments[0]); 
} 
foo(5); // 5 
let bar = () => { 
 console.log(arguments[0]); 
}; 
bar(5); // ReferenceError: arguments is not defined

기능 이름

함수는 여러 이름을 가질 수 있습니다.

function sum(num1, num2) { 
 return num1 + num2; 
} 
console.log(sum(10, 10)); // 20 
let anotherSum = sum; 
console.log(anotherSum(10, 10)); // 20 
sum = null; 
console.log(anotherSum(10, 10)); // 20

기본 매개변수 값

함수 정의에서 매개변수 뒤에 =를 사용하여 매개변수에 기본값을 할당할 수 있습니다.

function makeKing(name = 'Henry') { 
 return `King ${name} VIII`; 
} 
console.log(makeKing('Louis')); // 'King Louis VIII' 
console.log(makeKing()); // 'King Henry VIII'

기본 매개변수 값은 원시값이나 객체 유형에 국한되지 않으며, 호출 함수에서 반환되는 값도 사용할 수 있습니다.

let romanNumerals = ['I', 'II', 'III', 'IV', 'V', 'VI']; 
let ordinality = 0; 
function getNumerals() { 
 // 每次调用后递增
 return romanNumerals[ordinality++]; 
} 
function makeKing(name = 'Henry', numerals = getNumerals()) { 
 return `King ${name} ${numerals}`; 
} 
console.log(makeKing()); // 'King Henry I'
console.log(makeKing('Louis', 'XVI')); // 'King Louis XVI' 
console.log(makeKing()); // 'King Henry II' 
console.log(makeKing()); // 'King Henry III'

매개변수 확장 및 수집

ES6에는 컬렉션 데이터를 매우 간결하게 조작하고 결합하는 데 사용할 수 있는 새로운 확장 연산자가 추가되었습니다. 확산 연산자에 대한 가장 유용한 시나리오는 함수 정의의 매개변수 목록으로, 언어의 약한 유형 지정 및 가변 길이 매개변수를 최대한 활용할 수 있습니다. 스프레드 연산자는 함수 호출 시 매개변수를 전달하거나 함수 매개변수를 정의하는 데 사용할 수 있습니다.

확장된 매개변수

let values = [1, 2, 3, 4]; 
function getSum() { 
 let sum = 0; 
 for (let i = 0; i < arguments.length; ++i) { 
 sum += arguments[i]; 
 } 
 return sum; 
} 
//不使用扩展操作符实现累加
console.log(getSum.apply(null,values));
 
//使用扩展操作符
console.log(getSum(...values));

매개변수 수집

수집된 매개변수 앞에 명명된 매개변수가 있는 경우 나머지 매개변수만 수집되고, 그렇지 않은 경우 빈 배열을 얻습니다. 파라미터 수집 결과는 가변적이므로 마지막 파라미터로만 사용할 수 있습니다.

 
function getProduct(...values,lastValue){}//不可以
function ignoreFirst(firstValue,...values){console.log(values)}//可以
ignoreFirst(); // [] 
ignoreFirst(1); // [] 
ignoreFirst(1,2); // [2] 
ignoreFirst(1,2,3); // [2, 3]

함수 선언 및 함수 표현

코드가 실행되기 전에 JavaScript 엔진은 함수 선언을 읽고 실행 컨텍스트에서 함수 정의를 생성합니다. 함수 표현식은 실행 컨텍스트에서 함수 정의가 생성되기 전에 코드가 해당 라인까지 실행될 때까지 기다려야 합니다.

// 没问题 
console.log(sum(10, 10)); 
function sum(num1, num2) { 
 return num1 + num2; 
}
/*函数声明提升*/
 
 
// 会出错
console.log(sum(10, 10)); 
let sum = function(num1, num2) { 
 return num1 + num2; 
};