소홍서 제5장 - 인용 유형의 function 유형

12721 단어
재미있는 함수-function 형식
함수는 사실상 대상이고 모든 함수는function 유형의 실례로 속성과 방법을 가지고 있다.
1. 함수의 정의 방법
1) 함수 설명 구문
function sum(num1,num2){// , , 
   return num1+num2;
}

2) 함수 표현식
var sum=function(sum1,sum2){return sum1+sum2;};// , 

3) 함수 구조 함수
var sum=new Function("num1","num2","return num1+num2");// 

구조 함수 방법으로 함수를 정의하는 것을 권장하지 않습니다. 이런 방법은 두 번의 코드를 해석할 수 있습니다. 첫 번째는 일반적인 ECMAscript 코드를 해석하고, 두 번째는 구조 함수에 전달된 문자열을 해석하여 성능에 영향을 줍니다.
2. 함수 이름
함수는 대상이기 때문에 함수 이름은 사실상 함수 대상을 가리키는 지침으로 어떤 함수와 귀속되지 않는다.함수 대상에 여러 개의 이름이 있을 수 있다는 뜻이다.
function sum(num1,num2){
    return num1+num2;
}
var  sum1=sum;
alert(sum1(10,10));//20
sum=null;
alert(sum1(10,10));//20

위의 코드에서 보듯이sum을null로 설정하면sum1은 이 함수 대상을 호출할 수 있습니다.
3. 재부팅 없음
두 개의 동명 함수를 성명할 때, 뒤의 함수는 앞의 함수를 덮어씁니다.
function sum(num1,num2){
    return num1+num2;
}
function sum(num1,num2){
    return (num1+num2-1);
}
alert(sum(10,10))//9

실제로 위의 코드와 아래의 코드는 별 차이가 없다.
function sum(num1,num2){
    return num1+num2;
}
sum=function(num1,num2){
    return (num1+num2-1);
}
alert(sum(10,10))//9

4. 함수 성명과 함수 표현식
우선 아래의 두 가지 코드를 관찰하다
alert(sum(1));//2
function sum(num1){
return num1+1;
}
alert(sum(1));//unexpected identifier 
var sum=function(num1){
return num1+1;
};

발견했지, 해석기는 실행 환경에 데이터를 불러올 때 함수 성명과 함수 표현식에 대한 처리가 같지 않다. 해석기는 함수 성명을 먼저 읽고 어떤 코드를 실행하기 전에 사용할 수 있도록 하고, 함수 표현식은 해석기가 있는 코드 줄에 실행될 때까지 기다려야 진정으로 해석될 수 있다.
그럼, 이건 또 왜요?
해석: 코드가 실행되기 전에 해석기는 함수 성명이 향상되는 과정을 통해 함수 성명을 읽고 실행 환경에 추가합니다.코드에 값을 구할 때, js엔진은 첫 번째 함수를 성명하고 원본 코드 트리의 맨 위에 놓는다. 이렇게 하면 성명 함수의 코드가 코드를 호출한 후에도 JS엔진은 함수 성명을 맨 위로 올릴 수 있다.
5. 값의 함수
ECMAscript의 함수 이름 자체가 변수이기 때문에 함수도 값으로 사용할 수 있습니다.
예컨대 아래
function callsomeFunction(someFunction,someArgument){
   return someFunction(someFUnction,someArgument);
}

 
주의: 위의 예는callcomeFunction에 전달된 것은someFunction과someArgument이지 실행된 결과가 아닙니다
적용:
한 함수에서 다른 함수를 되돌려줍니다. 상황을 나누어 이 함수에 파라미터를 설정할 수 있습니다. 끼워 넣은 함수를 기교적으로 실행할 수 있습니다.
function createCompareFuc(propertyName){
    return function(obj1,obj2){
                  var value1=obj[propertyName];
                  var value2=obj[propertyName];
                   if(value1return -1;}
                   else if(value1>value2){return 1;}
                   else {return 0;}
               };
}

위의 코드와 같이 하나의 함수에서 비교 함수를 편리하게 호출할 수 있다
6. 함수 내부 속성
1)、callee
함수 내부에는 두 가지 특수한 대상이 있다:arguments와this.그 중에서arguments는 재미있는 속성이 있습니다:callee, 이 속성은 지침으로 이arguments 대상을 가진 함수를 가리킵니다.
callee 속성은 주로 함수 이름과 함수의 결합을 없애는 데 쓰인다.함수 이름은 함수 대상의 지침일 뿐이기 때문에 함수에서 함수 이름을 직접 사용하면 함수 이름이 바뀌면 이 함수 대상의 호출에 오류가 발생할 수 있습니다
아래의 이 곱셈 함수와 같다
function fac(num){
    if(num<=1){return 1;}
   else {return num*fac(num-1);}
}

함수의 집행은 함수와 밀접하게 결합되어 함수 이름이 바뀌면 함수를 사용할 수 없습니다.
이렇게 고치는 게 좋아요.
function fac(num){
    if(num<=1){return 1;}
   else {return num*argumenets.callee(num-1);}
}

 
2)、this
this, 함수 내부의 또 다른 특수한 대상,this는 함수가 실행되는 환경의 대상, 또는this값(전역 환경에서 윈도우)을 인용한다.
다음 예를 참조하십시오.
window.color="red";
var o={color:"blue"};
function sayColor(){
    alert(this.color);
}
sayColor();//"red"
var o.sayColor=sayColor;
o.sayColor();//"blue"

위에서 보듯이,sayColor()는 전역 환경에서this를 정의하고 인용하였으며,this는 편지 데이터로 실행되는 환경 대상을 가리키기 때문에 이 함수가 실행되기 전에this의 값을 확정할 수 없습니다.
전역 환경에서sayColor를 호출할 때,this는 전역 대상 윈도우를 인용합니다. 다시 말하면,this에 대한 값은 윈도우로 바뀝니다.color의 값을 구하다.이 함수를 대상 o에 부여한 후, 이 함수 중this.color가 o.color로 변했다.
this: 완일봉 대신은 블로그를 철저하게 말했습니다. 링크는 여기를 보십시오.http://www.ruanyifeng.com/blog/2018/06/javascript-this.html
3)、caller
ECMAscript5의 규범화된 또 다른 함수 대상의 속성은 Opera의 초기 버전이 지원되지 않는 것을 제외하고 다른 브라우저는 이 함수 속성을 지원합니다.이 속성에는 현재 함수를 호출하는 함수의 인용이 저장되어 있습니다. 전역 작용역에서 현재 함수를 호출하는 경우, 그 값은null입니다.예:
function outer(){
    inner();
}
function inner(){
    alert(arguments.callee.caller);
}
outer();//alert outer

7. 함수 속성 및 방법
ECMAscript의 프로토타입 속성은 ECMAscript의 인용 유형에 있어 프로토타입은 그들의 모든 실례를 저장하는 진정한 곳이다. 다시 말하면 toString (), value Of () 등은 모두 프로토타입 이름으로 저장되고 각자의 대상의 실례를 통해 방문할 뿐이다.ECMAscript5에서prototype의 속성은 일일이 열거할 수 없기 때문에 for-in을 사용하면 발견할 수 없습니다.
모든 함수는 계승되지 않은 두 가지 방법을 포함합니다: apply () 와call ()
이 두 가지 방법의 용도는 모두 특정한 작용역에서 함수를 호출하는 것으로 실제로는 함수 체내this대상의 값을 설정하는 것과 같다.
 
1)、apply()
apply () 는 두 개의 매개 변수를 수신합니다. 하나는 함수를 실행하는 작용역이고, 다른 하나는 매개 변수 그룹입니다.두 번째 매개변수는 Array의 인스턴스일 수도 있고 Arguments 객체일 수도 있습니다.
function sum(num1,num2){
  return num1+num2;
}
function callSum1(num1,num2){
   return sum.apply(this,arguments);// arguments
}
funtion callSum2(num1,num2){
  return sum.apply(this,[num1,num2]);// 
}
alert(callSum1(10,10));//10
alert(callSUm2(10,10));//10

2)、call()
call () 과 apply () 방법의 작용이 같고 차이는 수신 매개 변수의 방식이 다르다는 데 있다. call () 방법에 있어 수신의 첫 번째 매개 변수는this 값이 변하지 않고 변화가 있는 것이다. 다른 매개 변수는 함수에 직접 전달해야 한다.
다음과 같은 I:
funtion callSum2(num1,num2){
  return sum.call(this,num1,num2);// 
}

주의: 매개 변수를 전달하는 것은call()과 apply()의 진정한 용무의 장소가 아니다. 이 두 가지 방법의 진정한 강력한 점은 함수를 확장하여 생존하는 작용역에 의존할 수 있다는 것이다.
window.color="red";
var o={color:"blue"};
function sayColor(){
   alert(this.color);
}
sayColor();//red
sayColor.call(this);// , this window
sayColor.call(window);
sayColor.call(o);// call , o。

콜 () 과 apply () 를 사용하여 작용역을 확장하는 가장 큰 장점은 대상이 방법과 어떠한 결합 관계도 갖지 않는다는 것이다. 이 예에서 인용한 첫 번째 버전에서 우리는sayColor () 함수를 대상 o에 넣고 대상 o를 통해 그것을 조정하는 것이다. 이제 콜 () 과 apply () 가 있으면 이렇게 번거롭게 할 필요가 없다.
3)、bind()
ECMAscript가 정의한 방법입니다. 이 방법은 함수의 실례를 만듭니다.this 값은bind () 함수에 전달되는 값으로 귀속됩니다.예:
window.color="red";
var o={color:"blue"};
function sayColor(){
   alert(this.color);
}
var objectSayColor=sayColor.bind(o);
objectSayColor();//blue

좋은 웹페이지 즐겨찾기