javascript 함수, 포인터 및 내장 개체_javascript 기술

함수는 모듈식 프로그래밍의 기초입니다. 복잡한 Ajax 애플리케이션을 작성하려면 함수에 대해 더 깊이 이해해야 합니다.
JavaScript의 함수는 다른 언어와 다릅니다. 각 함수는 객체로 유지되고 실행됩니다. 함수 객체의 속성을 통해 함수를 변수에 쉽게 할당하거나 함수를 매개변수로 전달할 수 있습니다. 계속하기 전에 함수 사용 구문을 살펴보겠습니다.
다음은 인용문입니다.
function func1(…){…}
var func2=function(…){…}; 🎜>var func3=function func4(…){…};
var func5=new Function()
이는 함수 선언을 위한 올바른 구문입니다. 다른 언어에서 흔히 사용하는 함수나 이전에 소개했던 함수 정의 방식과는 많이 다릅니다. 그렇다면 JavaScript에서는 왜 이렇게 작성할 수 있을까요? 따르는 구문은 무엇입니까? 자세한 내용은 아래에 설명되어 있습니다.
함수 객체 이해
function 키워드를 사용하여 함수를 정의하고, 각 함수에 함수 이름을 지정하고, 함수 이름을 통해 호출할 수 있습니다. JavaScript가 해석되고 실행될 때 함수는 도입되는 Function Object인 객체로 유지됩니다.
함수 객체는 다른 사용자 정의 객체와 본질적으로 다릅니다. 이러한 유형의 객체를 내부 객체라고 합니다. 예를 들어 날짜 객체(Date), 배열 객체(Array), 문자열 객체(String)는 모두 내부 객체입니다. . 물체. 이러한 내장 객체의 생성자는 JavaScript 자체에 의해 정의됩니다. 객체를 반환하기 위해 new Array()와 같은 문을 실행함으로써 JavaScript는 사용자가 객체 구성 방법을 지정하는 대신 반환된 객체를 초기화하는 내부 메커니즘을 갖습니다. .
JavaScript에서는 해당 유형의 함수 객체가 Function이고, 해당 유형의 배열 객체가 Array이고 해당 유형의 날짜 객체가 Date인 것처럼 new Function()을 통해 함수 객체를 만들 수도 있고, 함수 키워드를 사용하여 객체를 생성합니다. 이해를 돕기 위해 함수 객체 생성과 배열 객체 생성을 비교합니다. 먼저 배열 객체를 살펴보겠습니다. 다음 두 줄의 코드는 모두 배열 객체 myArray를 생성합니다.
다음은 참조 조각입니다.
var myArray=[]
//
과 동일합니다. var myArray=new Array ();
마찬가지로 다음 두 코드도 myFunction 함수를 생성합니다.
function myFunction(a,b){
return a b; /
와 동일 var myFunction=new Function("a","b","return a b")
배열 객체를 구성하는 구문과 비교해 보면 함수의 본질을 확실히 알 수 있습니다. 앞서 소개한 함수 선언은 위 코드의 첫 번째 방식으로, 인터프리터 내에서 이 구문을 만나면 자동으로 Function 객체가 생성되고 해당 함수가 내부 객체로 저장되어 실행됩니다. 여기서도 알 수 있듯이 함수객체명(함수변수)과 일반 변수명은 동일한 사양을 가지고 있으며 둘 다 변수명을 통해 변수를 참조할 수 있으나 함수변수명 뒤에는 괄호와 매개변수가 올 수 있다. 기능을 수행하기 위한 목록입니다.
함수 본문에는 일반적으로 여러 개의 명령문이 포함되어 있으므로 new Function() 형식으로 함수를 생성하는 것은 일반적이지 않습니다. 문자열 형식으로 매개변수로 전달되면 코드의 가독성이 떨어집니다. . 다음은 사용 구문에 대한 소개입니다.
다음은 참조 부분입니다.
var funcName=new Function(p1,p2,...,pn,body)
매개변수 유형은 다음과 같습니다. p1부터 pn까지의 모든 문자열은 생성된 함수의 매개변수 이름 목록을 나타내고, body는 생성된 함수의 함수 본문 문을 나타내며, funcName은 생성된 함수의 이름을 나타냅니다. 매개변수를 지정하지 않고 빈 함수를 생성할 수 있고, funcName을 지정하지 않고 이름 없는 함수를 생성할 수 있습니다. 물론 이러한 함수는 의미가 없습니다.
p1 ~ pn은 매개변수 이름 목록입니다. 즉, p1은 매개변수를 나타낼 수 있을 뿐만 아니라 쉼표로 구분된 매개변수 목록일 수도 있습니다. 예를 들어 다음 정의는 동일합니다. >다음은 참조 조각입니다:
new Function("a", "b", "c", "return a b c")
new Function("a, b, c", "return a b c")
new Function("a,b", "c", "return a b c")
JavaScript에서는 Function 유형을 도입하고 new Function()과 같은 구문을 제공합니다. 왜냐하면 함수 객체는 Function 유형을 사용하여 속성을 추가하고 행동 양식.
함수의 본질은 내부 객체이며 JavaScript 인터프리터가 함수의 작동 방식을 결정합니다. 위 코드로 생성된 함수는 프로그램 내 함수명을 이용하여 호출할 수 있습니다. 이 섹션의 시작 부분에 나열된 함수 정의 문제도 설명됩니다. 함수 선언 바로 뒤에 괄호를 추가하여 함수가 생성 직후에 호출된다는 것을 나타낼 수 있습니다. 예를 들면 다음과 같습니다.
다음은 참조 조각입니다.
var i=function (a,b){
return a b;
}(1,2);
alert(i)
이 코드는 변수 i의 값이 3임을 표시합니다. i는 생성된 함수가 아니라 반환된 값을 나타냅니다. 괄호 "("가 등호 "="보다 우선순위가 높기 때문입니다. 이러한 코드는 일반적으로 사용되지 않을 수 있지만 사용자가 원하는 경우에 사용됩니다. 이는 모듈식에 좋은 솔루션입니다. 디자인 또는 이름 충돌을 피하려는 경우.
함수를 생성하는 다음 두 가지 방법은 동일하지만 유의해야 합니다.
다음은 참조 조각입니다.
function funcName(){
//Function body
}
//
var funcName=function(){
//Function body
}
와 동일하지만 전자의 메서드는 명명된 함수를 생성하고 후자의 메서드는 명명되지 않은 함수를 생성합니다. 변수는 이 이름 없는 함수를 가리킵니다. 사용법에는 한 가지 차이점이 있습니다. 명명된 함수의 경우 호출된 후에 정의할 수 있지만 명명되지 않은 함수의 경우 호출하기 전에 정의해야 합니다. 예를 들면 다음과 같습니다.
다음은 인용 부분입니다.

이 문은 func에 대해 정의되지 않은 오류를 생성합니다.
다음은 인용문입니다:

이 올바르게 실행될 수 있으며, 다음 문도 올바르게 실행될 수 있습니다.
다음은 인용 부분입니다.

자바스크립트는 해석형 언어이지만, 이 함수 이름은 funcName() 형식으로 정의된 함수만 유효하며 익명 함수는 사용할 수 없습니다.
함수 개체와 기타 내부 개체의 관계
함수 개체 외에도 Object, Array, Date, RegExp, Math, Error와 같은 많은 내부 개체가 있습니다. 이러한 이름은 실제로 유형을 나타내며 객체는 new 연산자를 통해 반환될 수 있습니다. 그러나 함수 객체는 다른 객체와 다릅니다. typeof를 사용하여 함수 객체의 유형을 가져오면 여전히 "function" 문자열을 반환하고, 배열 객체나 다른 객체의 typeof를 사용하면 "object" 문자열을 반환합니다. ". 다음 코드는 다양한 유형의 typeof를 보여줍니다.
다음은 참조 부분입니다.
alert(typeof(Function)))
alert(typeof(new Function())); ( typeof(Array));
alert(typeof(object));
alert(typeof(new Array()))
alert(typeof(new Date())); ( typeof(new Object()));
이 코드를 실행하면 처음 4개의 문에는 "function"이 표시되고 다음 3개의 문에는 "object"가 표시되는 것을 볼 수 있습니다. 함수는 실제로 함수를 반환합니다. 이것은 다른 개체와 매우 다릅니다. Array 및 Object와 같은 다른 유형은 new 연산자를 통해 일반 객체를 반환합니다. 함수 자체도 객체이지만 객체 생성자이기도 하다는 점에서 여전히 일반 객체와 다릅니다. 즉, 이전에 소개한 객체를 반환하는 새로운 함수를 만들 수 있습니다. typeof가 "function"을 반환하는 모든 객체는 함수 객체입니다. 이러한 객체를 생성자라고도 합니다. 따라서 모든 생성자는 객체이지만 모든 객체가 생성자는 아닙니다.
함수 자체도 객체이기 때문에 C, Java 등 객체지향 언어의 클래스 정의를 생각해보면 Function 유형의 역할을 짐작할 수 있습니다. 함수 객체 자체에 대한 일부 메서드와 속성을 정의합니다. 함수의 프로토타입 개체를 사용하면 함수 유형 정의를 쉽게 수정하고 확장할 수 있습니다. 예를 들어 함수 유형 Function은 아래에서 확장되고 method1 메서드는 다음과 같습니다. 여기에 기능이 추가되어 "function"을 표시하는 대화 상자가 나타납니다.
다음은 인용 부분입니다.
Function.prototype.method1=function(){
alert("function" );
}
function func1(a,b,c){
return a b c;
}
func1.method1()
🎜> 함수 객체 method1의 method1 메소드를 호출하는 마지막 문인 func1.method1.mehotd1()에 주의하세요. 다소 혼란스러워 보이지만 구문을 자세히 살펴보면 이것이 재귀적 정의라는 점을 분명히 알 수 있습니다. method1 자체도 함수이기 때문에 함수 개체의 속성과 메서드도 갖습니다. Function 유형에 대한 모든 메서드 확장에는 이러한 재귀 속성이 있습니다.
Function은 모든 함수 객체의 기본이고, Object는 모든 객체(함수 객체 포함)의 기본입니다. JavaScript에서는 모든 개체가 Object의 인스턴스입니다. 따라서 모든 개체가 공통 속성과 메서드를 갖도록 개체 유형을 수정할 수 있습니다.
다음은 참조 조각입니다. 🎜>Object.prototype.getType=function(){
return typeof(this);
}
var array1=new Array()
function func1(a,b){
return a b;
}
alert(array1.getType());
alert(func1.getType());
위 코드는 모든 객체에 getType 메서드를 추가합니다. 이 개체의 유형입니다. 두 개의 경고 문에는 각각 "개체"와 "함수"가 표시됩니다.
함수를 매개변수로 전달
앞서 함수 객체의 본질에 대해 소개한 바 있습니다. 각 함수는 변수에 쉽게 할당될 수 있는 특별한 객체로 표현되며, 이 변수 ​​이름을 통해 함수 호출이 이루어집니다. . 변수로서 매개변수 형태로 다른 함수에 전달될 수 있습니다. 이는 JavaScript 이벤트 처리 메커니즘에 대한 이전 소개에서 확인되었습니다. 예를 들어 다음 프로그램은 func1을 func2에 매개변수로 전달합니다. 다음은 인용문입니다:
function func1(theFunc){
theFunc();
}
function func2(){
alert("ok")}
func1( func2);
마지막 명령문에서 func2는 func1의 형식 매개변수 theFunc에 객체로 전달된 다음 func1에 의해 내부적으로 theFunc가 호출됩니다. 실제로 함수를 매개변수로 전달하거나 다른 변수에 함수를 할당하는 것은 모든 이벤트 메커니즘의 기본입니다.
예를 들어 페이지가 로드될 때 일부 초기화 작업을 수행해야 하는 경우 먼저 init 초기화 함수를 정의한 다음 window.onload=init 문을 통해 페이지 로드 완료 이벤트에 바인딩할 수 있습니다. 여기서 init는 창의 onload 이벤트 목록에 추가할 수 있는 함수 개체입니다.
함수에 전달된 암시적 매개변수: 인수
함수 호출이 이루어지면 지정된 매개변수 외에도 암시적 개체인 인수도 생성됩니다. 인수는 배열과 유사하지만 배열이 아닌 객체입니다. 배열과 동일한 액세스 속성을 갖고 있기 때문에 유사합니다. 인수[인덱스]와 같은 구문을 사용하여 값을 얻을 수 있으며 배열을 갖습니다. 길이 속성 길이. 인수 객체는 실제로 함수에 전달된 매개변수를 저장하며 함수 선언에 의해 정의된 매개변수 목록으로 제한되지 않습니다.
다음은 참조 조각입니다.
function func(a,b){
alert(a);
alert(b);
for(var i=0;ialert(arguments[i]);
}
func(1,2,3);
코드가 실행되면 1, 2, 1, 2, 3 순서로 표시됩니다. 따라서 함수를 정의할 때 매개변수 목록을 지정하지 않더라도 인수를 통해 얻은 매개변수를 계속 참조할 수 있어 프로그래밍에 큰 유연성을 제공합니다. 인수 개체의 또 다른 특성은 함수 개체 자체에 대한 참조를 나타내는 호출자입니다. 이는 이름이 지정되지 않은 함수의 재귀를 구현하거나 함수의 캡슐화를 보장하는 데 유용합니다. 예를 들어 재귀를 사용하여 1에서 자연수의 합을 계산합니다. n:
다음은 참조 조각입니다.
var sum=function(n){
if(1==n)return 1;
else return n sum(n-1); 🎜>}
alert( sum(100));
함수에는 sum 자체에 대한 호출이 포함되어 있습니다. 그러나 JavaScript의 경우 함수 이름은 함수 내에서 호출하는 것과 같습니다. 별로 좋지 않은 전역 변수입니다. 반사는 자체적으로 호출하는 것이므로 인수.callee 속성을 사용하는 것이 더 나은 방법이 될 것입니다.
다음은 참조 조각입니다.
var sum=function(n){
if(1==n) return 1;
else return n 인수.callee(n-1);
}
alert(sum(100))
　수신자 속성은 다음과 같습니다. 다음과 같이 인수가 배열 객체와 다른 유일한 기능은 아닙니다. 코드는 인수가 배열 유형에서 생성되지 않음을 보여줍니다.
다음은 참조 조각입니다.
Array.prototype.p1=1; 🎜>alert(new Array().p1);
function func() {
alert(arguments.p1);
}
func(); 첫 번째 경고 문이 1로 표시되는 것을 볼 수 있는데, 이는 배열 개체가 p1 속성을 가지고 있음을 의미하며, func 호출은 "정의되지 않음"으로 표시됩니다. 즉, p1은 인수의 속성이 아니라는 것을 알 수 있습니다. 해당 인수는 배열 객체가 아닙니다.
함수의 적용, 호출 메서드 및 길이 속성
JavaScript는 함수 개체에 대해 적용 및 호출이라는 두 가지 메서드를 정의합니다. 해당 기능은 실행을 위해 함수를 다른 개체에 바인딩하는 것입니다. 매개변수 방식은 다릅니다. 🎜>다음은 참조 조각입니다.
Function.prototype.apply(thisArg,argArray);
Function.prototype.call(thisArg[,arg1[,arg2…]])
함수 프로토타입을 보면 첫 번째 매개변수의 이름은 thisArg입니다. 즉, 모든 함수 내부의 this 포인터에 thisArg가 할당되어 함수를 다른 개체의 메서드로 실행하는 목적을 달성합니다. thisArg 매개변수를 제외하고 두 메소드 모두 Function 객체에 대해 전달된 매개변수입니다. 다음 코드는 적용 및 호출 메소드의 작동 방식을 보여줍니다.
다음은 참조 부분입니다.
//속성 p와 메소드 A를 사용하여 func1 함수를 정의합니다.
function func1(){
this. p="func1-";
this.A=function(arg){
alert(this.p arg);
}
}
//p 속성을 사용하여 func2 함수 정의 및 메소드 B
function func2(){
this.p="func2-";
this.B=function(arg){
alert(this.p arg)
}
}
var obj1=new func1();
var obj2=new func2()
obj1.A("byA"); //func1-byA 표시
B ("byB"); //func2-byB 표시
obj1.A.apply(obj2,["byA"]); //func2-byA 표시, 여기서 ["byA"]에는 배열 요소가 하나만 있습니다. 아래도 동일
obj2.B.apply(obj1,["byB"]); //func1-byB 표시
obj1.A.call(obj2,"byA") //func2-byA 표시
obj2.B.call(obj1,"byB"); //display func1-byB
obj1의 메서드 A가 실행되도록 바인딩된 후 함수 A의 전체 실행 환경이 다음으로 전송되는 것을 볼 수 있습니다. obj2, 즉 이 포인터는 obj2를 가리킵니다.마찬가지로, obj2의 함수 B를 obj1 개체에 바인딩하여 실행할 수도 있습니다. 코드의 마지막 4줄은 적용 및 호출 함수의 매개변수 형식의 차이점을 보여줍니다.
인수의 길이 속성과 달리 함수 객체에도 길이 속성이 있는데, 이는 호출 시 실제로 전달되는 매개변수의 개수가 아니라 함수 정의 시 지정한 매개변수의 개수를 나타냅니다. 예를 들어 다음 코드는 2를 표시합니다.
다음은 참조 조각입니다.
function sum(a,b){
return a b;
}
alert(sum.length) ;
JavaScript의 this 포인터에 대한 깊은 이해
this 포인터는 객체지향 프로그래밍에서 중요한 개념입니다. 객체의 메서드를 구현할 때 이 포인터를 사용하여 객체 자체에 대한 참조를 얻을 수 있습니다.
다른 객체 지향 언어와 달리 JavaScript의 this 포인터는 메서드 내의 this 포인터가 항상 메서드를 정의하는 객체를 가리키는 것은 아닙니다. 이전 섹션에서 적용 및 호출에 대해 설명했습니다. 그러한 예가 있습니다. 이해를 돕기 위해 다음 예를 살펴보겠습니다.
다음은 인용 부분입니다.

코드 실행 결과, 각각 1과 2를 표시하는 대화 상자가 나타납니다. getP 함수는 한 번만 정의되고 다른 경우에 실행되어 다른 실행 결과를 표시하는 것을 볼 수 있습니다. 이는 이 포인터의 변경에 따라 결정됩니다. obj1의 getP 메소드에서 this는 obj1 객체를 가리키고, obj2의 getP 메소드에서는 this가 obj2 객체를 가리키며, 이 포인터를 통해 두 객체가 모두 가지고 있는 속성 p를 참조하게 됩니다.
JavaScript의 this 포인터는 동적으로 변하는 변수이며, 현재 함수가 실행 중인 객체를 나타내는 것임을 알 수 있습니다. 이 포인터의 특성을 통해 JavaScript 개체의 특성을 더 잘 이해할 수 있습니다. 개체는 하나 이상의 속성(메서드)의 모음입니다. 각 컬렉션 요소는 하나의 컬렉션에 속할 수 있을 뿐만 아니라 동적으로 여러 컬렉션에 속할 수도 있습니다. 이런 방식으로 메서드(컬렉션 요소)를 호출하는 사람은 누구나 this 포인터가 가리키는 대상을 가리킵니다. 실제로 앞서 소개한 Apply 메소드와 Call 메소드는 이 포인터가 매개변수에 지정된 객체를 가리키도록 이 포인터의 값을 강제로 변경하여 한 객체의 메소드를 다른 객체의 메소드처럼 실행하는 방식으로 구현됩니다.
각 개체 컬렉션의 요소(속성 또는 메서드)도 독립적인 부분입니다. 전역 함수와 변수는 창 개체의 메서드로 간주될 수 있으므로 개체 메서드로 정의된 함수 간에는 차이가 없습니다. . 및 속성. 또한 new 연산자를 사용하여 객체의 메소드를 조작하여 객체를 반환할 수 있습니다. 이러한 방식으로 객체의 메소드는 클래스 형식으로 정의될 수 있으며 this 포인터는 새로 생성된 객체를 가리킵니다. 나중에 볼 수 있듯이 이때 객체 이름은 네임스페이스로 기능할 수 있습니다. 이는 JavaScript를 사용하는 객체 지향 프로그래밍을 위한 기술입니다. 예:
다음은 참조 조각입니다.
var 네임스페이스1=new Object();
namespace1.class1=function(){
//객체 초기화 코드
}
var obj1 =new 네임스페이스1.class1();
　 여기서는 네임스페이스1을 네임스페이스로 생각하면 됩니다.
객체 속성(메서드)의 동적인 변화 특성으로 인해 객체의 두 속성(메서드) 간의 상호 참조는 this 포인터를 통과해야 하지만, 다른 언어에서는 this 키워드를 생략할 수 있습니다. 위의 예에서와 같이:
다음은 참조 조각입니다.
obj1.getP=function(){
alert(this.p) //표면적으로는 이 포인터가 obj1을 가리킵니다.