함수 성명 방식

익명 함수

function 뒤에 괄호를 따라가면 중간에 함수 이름이 없는 것이 익명 함수입니다.

let fn = function() {
    console.log(' fn')
}
let fn2 = fn
console.log(fn.name) //fn
console.log(fn2.name)//fn，fn fn2 function。

구명 함수

function 뒤에 함수 이름이 있습니다. 괄호를 직접 따라가는 것이 아니라 구명 함수입니다.만약 구명 함수를 변수에 값을 부여한다면, 이 구명 함수의 작용역은 윈도우가 아니다.

let fn = function fn1() {
  console.log('function')
}
console.log(fn.name) //fn1
console.log(fn1,name) // ReferenceError: fn1 is not defined

화살표 함수

화살표 함수는 es6 지식점으로 다음과 같은 몇 가지 특징을 가지고 있다.

매개변수가 하나만 있으면 소괄호를 생략할 수 있습니다.

두 개 이상의 매개변수가 있는 경우 소괄호를 넣어야 합니다.

함수체가 한 마디만 있으면 괄호를 생략하고 이 한 마디를 반환값으로 return할 수 있습니다.

함수체에 적어도 두 마디가 있으면 반드시 괄호를 붙여야 한다.

화살표 함수에this가 없습니다.

let fn = e => e+1
console.log(fn(1)) //2

let fn1 = (i,y) => i+y
console.log(fn1(2,3)) //5

let fn2 = (i,y) => {
  i+=1;
  y+=2;
  return i+y
}
console.log(fn2(5,6)) //13

문법 작용 영역 (정적 작용 영역)

정적 작용역은 어법 작용역이라고도 하는데 어법 작용역의 변수를 어법 변수라고 한다.어법 변수는 컴파일할 때 정태적으로 확정된 작용역을 가지고 있다.어법 변수의 작용역은 하나의 함수나 코드일 수 있으며, 이 변수는 이 코드 구역에서 볼 수 있다(visibility).이 영역 이외의 변수는 보이지 않거나 접근할 수 없습니다.어법 작용 영역에서 변수의 값을 가져올 때 함수 정의의 텍스트 환경을 검사하고 함수 정의를 포착할 때 이 변수에 대한 귀속을 검사합니다.
어법 작용역: 변수의 작용역은 정의할 때 결정하는 것이지 실행할 때 결정하는 것이 아니다. 즉, 어법 작용역은 원본 코드에 달려 있고 정적 분석을 통해 확정할 수 있기 때문에 어법 작용역도 정적 작용역이라고 한다.with와 eval을 제외하고는 JS의 작용역 메커니즘이 어법 작용역(Lexical scope)에 매우 가깝다고 말할 수 있습니다.
어법 작용역 트리를 통해 변수의 지향 관계를 판단할 수 있지만 변수의 값을 단정할 수 없다. 변수의 값은 집행 순서에 따라 더욱 판단해야 한다. 예를 들어 다음과 같다.
자바스크립트는 어법 작용역을 사용하기 때문에bian'liang의 작용역은 함수를 바탕으로 만든 위치로 호출할 때의 위치와 무관하다.

var i = 1,
    j = 2,
    k = 3;

function a(o, p, x, q) {
    var x = 4;
    alert(i);

    function b(r, s) {
        var i = 11,
            y = 5;
        alert(i);

        function c(t) {
            var z = 6;
            alert(i);
        };
        
        var d = function() {
            alert(y);
        };
        c(60);
        d();
    };
    b(40, 50);
}
a(10, 20, 30); //1 11 11 5

/**
*  ， function 
*/
var SyntaxTree = {
        //  
    window: {
        variables:{
            i:{ value:1},
            j:{ value:2},
            k:{ value:3}
        },
        functions:{
            a: this.a
        }
    },

    a:{
        variables:{
            x:'undefined'
        },
        functions:{
            b: this.b
        },
        scope: this.window
    },

    b:{
        variables:{
                 i:'undefined'
            y:'undefined'
        },
        functions:{
            c: this.c,
            d: this.d
        },
        scope: this.a
    },

    c:{
        variables:{
            z:'undefined'
        },
        functions:{},
        scope: this.b
    },

    d:{
        variables:{},
        functions:{},
        scope: {
           scope: this.b
        }
    }
};

/**
*  ： 
*/
let ActiveObject = {
    window: {
        variables: {
            i: { value: 1 }
            j: { value: 2 }
            k: { value: 3 }
        },
        functions: {
                a: this.a
        }
    }

    a: {
        variables: {
            x: { vale: 4 },
            functions: {
                b： this.b
            },
            scope: this.window,
            params: {
                o: { value: 10 },
                p: { value: 20 },
                x: this.variables.x
                q: { vale: 'undefined' }
            },
            arguments: [this.params.o, this.params.p, this.params.x]
        }
    }

    b: {
        variables: {
            i: { vale: 11 },
            y: { vale: 5 },
        },
        functions: {
            c: this.c,
            d: this.d
        },
        params: {
            r: { value: 40 }
            s: { value: 50 }
        },
        arguments: [this.params.r, this.params.scope]
        scope: this.a
    }


    c: {
        variables: {
            z: { value: 6 },
            functions: {},
            params: {
                t: { value: 60 }
            },
            arguments: [this.params.t]
            scope: this.b
        }
    }

    d: {
        variables: {},
        functions: {},
        params: {},
        arguments: []
        this.scope: this.b
    }

}

call stack

콜 스택에 들어갈 때의 규칙:

함수의 모든 인삼 (만약 우리가 함수 집행 상하문에서)

이름과 대응하는 값으로 구성된 변수 대상의 속성이 생성됩니다.대응하는 매개 변수를 전달하지 않으면 이름과undefined 값으로 구성된 변수 대상의 속성도 생성됩니다.

모든 함수 선언(FunctionDeclaration, FD)

명칭과 대응값(함수 대상(function-object)으로 구성된 변수 대상의 속성이 생성됩니다.변수 대상에 이미 같은 이름의 속성이 존재한다면, 이 속성을 완전히 대체합니다.

모든 변수 선언(var, VariableDeclaration)

명칭과 대응값(undefined)으로 구성된 변수 대상의 속성이 생성됩니다.만약 변수 이름이 이미 성명된 형식 매개 변수나 함수와 같다면, 변수 성명은 이미 존재하는 이런 속성을 방해하지 않을 것이다.

/*
* example1: 
*/
function test(a, b) {
    /*
    var a = 10
    var b = undefined
     1， 。
    */ 
  console.log(a)
  var c = 10;
  function d() {}
  var e = function _e() {};
  (function x() {});
}
test(10); // 10

/*
* example2: 
*/
function test(a, b) {
  console.log(a)
  function a() {}
  var e = function _e() {};
}
test(10); // ƒ a() {} . 2， ， 。

function test(a, b) {
  console.log(a)
  var a = 30;
  var a = function _e() {};
}
test(10); // 10 . 2， ， 。

/*
* example3: 
*/
console.log(foo);// foo ， 3， 

 function foo(){
    console.log("foo");
}

var foo = 1;

this와arguments

함수 호출

es5에서 함수는 네 가지 호출 방식이 있습니다.

1. fn(p1,p2)
2. obj.fn(p1,p2)
3. fn.call(context,p1,p2)
4. fn.apply(context,p1,p2)

세 번째와 네 번째야말로 정상적인 js 함수 호출 방식이고 다른 두 가지는 문법 설탕이다.

fn(p1,p2)       fn.call(undefined,p1,p2)   fn.apply(context,[p1,p2])
obj.fn(p1,p2)   obj.fn.call(obj,p1,p2)     obj.fn.apply(obj,[p1,p2])

만약 당신이 전송한context가null 또는undefined라면, 윈도우 대상은 기본context (엄격한 모드에서 기본context는undefined) 입니다

this가 뭐예요??

this는call의 첫 번째 매개 변수!!!

var obj = {
  foo: function(){
    console.log(this)
  }
}

var bar = obj.foo
obj.foo() //   this   obj
bar() //   this   window

obj.foo()   obj.foo.call(obj)  call ， this， window。
bar()   bar.call(undefined) 

함수를 실행할 때,this는 숨겨진 매개 변수이며, 반드시 하나의 대상이어야 하며, 그렇지 않으면 js는 자동으로 그것을 대상으로 전환합니다.

function fn() {
    console.log(this)
    console.log(arguments)
}
fn.call(1,2,3) // Number {1}  [2,3]

arguments

arguments는 위조 그룹입니다. 이것은 Array와 유사하지만,length 속성과 색인 요소를 제외하고는 Array 속성이 없습니다.call과 apply 안에 첫 번째 파라미터를 제외하고는 모두arguments입니다. 만약arguments의 개수가 적으면call을 권장합니다. apply를 사용해도 됩니다. 확실하지 않으면 apply를 사용하십시오.방법을 사용하세요.arguments가 진정한 수조로 바뀝니다.

var args = Array.prototype.slice.call(arguments);
var args = [].slice.call(arguments);

// ES2015
const args = Array.from(arguments);
const args = [...arguments]

bind

Bind()에 대한 MDN 공식 문서의 정의:
The bind() method creates a new function that, when called, has its this keyword set to the provided value, with a given sequence of arguments preceding any provided when the new function is called.
대충 말하면bind는 새로운 함수를 되돌려줍니다. (원래 함수를 호출하지 않았습니다.) 이 새로운 함수는call 원래 함수입니다.call의 매개 변수는 당신이 결정합니다.예:

        this.x = 9;
        var module = {
          x: 81,
          getX: function() { return this.x; }
        };
        
        var retrieveX = module.getX;
        var boundGetX = retrieveX.bind(module);
        boundGetX(); // 81

retrieveX.bind(module)는 새로운 함수 boundGetX를 되돌려주고 이 새로운 함수를 호출할 때 이 함수 안에 있는this를module 대상에 연결하기 때문에this.x는 모듈에 해당한다.x는 81이다.

콜리화

컴퓨터 과학에서 커리화(영어: Currying)는 카리화 또는 가리화로 번역되어 여러 개의 파라미터를 받아들이는 함수를 하나의 단일 파라미터(최초 함수의 첫 번째 파라미터)를 받아들이는 함수로 바꾸고 나머지 파라미터를 받아들이고 결과를 되돌리는 새로운 함수로 바꾸는 기술이다.이 기술은 Moses Schönfinkel과 고트로브 프레그가 발명한 논리학자 하스켈 가리가 명명한 것이다.
한 가지 명백한 것은 함수에 일부 파라미터를 전달하여 하나의 함수로 돌아가 다른 파라미터를 처리하도록 하는 것이다. 예를 들어 세 개의 수의 합을 구한다.

let addOne = function add(x) {
  return function(y) {
    return function(z) {
      return x+y+z
    }
  }
}

let one = addOne(3)
console.log(one)//ƒ (y) {return function (z) {return x + y + z}}
let two = one(4)
console.log(two)//ƒ (z) {return x + y + z}
let three = two(5)
console.log(three)//12

javascript 함수 코리화 - 링크 상세 설명

고급 함수

수학과 컴퓨터 과학에서 고급 함수는 적어도 다음 조건을 만족시키는 함수이다.

하나 이상의 함수를 입력으로 받아들인다

함수 출력

고급 함수의 예를 들다.

/*
* 
*/
1. Array.prototype.filter()
2. Array.prototype.forEach()
3. Array.prototype.reduce()
4. Array.prototype.map()
5. Array.prototype.find()
6. Array.prototype.every()

/*
* 
*/
1. fn.bind(args)

리셋 함수

함수 A는 매개 변수(함수 참조)로 다른 함수 B에 전달되고 이 함수 B는 함수 A를 실행합니다.우리는 함수 A를 리셋 함수라고 말한다.이름 (함수 표현식) 이 없으면 익명 리셋 함수라고 합니다.
명사 형식: 매개 변수로 간주되는 함수는 바로 리셋 동사 형식입니다. 이 리셋을 호출하면 리셋은 비동기와 아무런 관계가 없습니다.

리셋 함수의 사용 장소

자원 불러오기: 동적 js 파일 불러오기 후 리셋, iframe 불러오기 후 리셋, aax 작업 리셋, 사진 불러오기 완료 리셋, AJAX 등.

DOM 이벤트 및 Node.js 이벤트는 리셋 메커니즘을 기반으로 합니다. (Node.js 리셋에 다중 리셋 플러그인 문제가 발생할 수 있습니다.)

setTimeout의 지연 시간은 0입니다. 이 hack은 자주 사용됩니다. settimeout에서 호출된 함수는 사실callback의 구현입니다

체인 호출: 체인 호출을 할 때 값 부여기(setter) 방법에서 (또는 그 자체가 값을 되돌려 주지 않는 방법에서) 체인 호출을 실현하기 쉬운데, 값 추출기(getter)는 상대적으로 체인 호출을 실현하기 어렵다. 왜냐하면 값 추출기가this 바늘이 아니라 필요한 데이터를 되돌려 줘야 하기 때문이다. 체인 방법을 실현하려면 리셋 함수로 실현할 수 있다.

setTimeout, setInterval의 함수를 호출하여 반환 값을 얻습니다.두 함수는 모두 비동기적이다. 즉, 그들의 호출 시퀀스와 프로그램의 메인 프로세스는 상대적으로 독립적이기 때문에 주체 안에서 그들의 반환 값을 기다릴 수 없다. 그들이 열릴 때 프로그램도 멈추지 않고 기다릴 수 없다. 그렇지 않으면 set Timeout과 set Interval의 의미를 잃기 때문에return은 의미가 없어서callback을 사용할 수 밖에 없다.callback의 의미는timer가 실행한 결과를 프록시 함수에 통지하여 제때에 처리하는 데 있다.

리셋 함수의 전달

전달 방식은 두 가지가 있는데 함수 인용과 함수 표현식이다.

$.get('myhtmlpage.html', myCallBack);// 
$.get('myhtmlpage.html', myCallBack('foo', 'bar'));// ， ？
$.get('myhtmlpage.html', function(){// 
myCallBack('foo', 'bar');
});

화살표 함수와es5의 함수 주요 차이

화살표 함수의 주요 차이는this에 있다. 화살표 함수는this라는 개념이 없다. 예를 들어 다음과 같다.

setTimeout(function(a){
  console.log(this) // this {name:'Jack'}
  setTimeout(function(a){
    console.log(this) // this window， bind， setTimeout window
  },1000)
}.bind({name:'Jack'}),1000)

setTimeout(function(a){
  console.log(this) // this {name:'Jack'}
  setTimeout(function(a){
    console.log(this) // this {name: "Jack"}， bind this {name: "Jack"}
  },1000)
}.bind({name:'Jack'}),1000)

setTimeout(function(a){
  console.log(this) // this {name:'Jack'}
  setTimeout(a=>console.log(this),1000)// this {name:'Jack'}, this ， this this， {name:'Jack'}
}.bind({name:'Jack'}),1000)

이로써 기본적으로 js의 모든 함수 내용을 말했습니다. 간단하게 예를 들면 더욱 깊이 있는 연구는 다른 사나이의 블로그를 봐야 합니다.