JavaScript_javascript 기술의 기능에 대한 심층적인 이해-JS 튜토리얼-php.cn

개요
함수는 모듈식 프로그래밍의 기초입니다. 복잡한 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은 매개변수를 나타냅니다. 생성된 함수의 이름 List, 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; ,2) ;
alert(i);
이 코드는 변수 i의 값이 3임을 표시합니다. i는 생성된 함수가 아니라 반환된 값을 나타냅니다. 괄호 "("가 등호 "="보다 우선순위가 높기 때문입니다. 이러한 코드는 일반적으로 사용되지 않을 수 있지만 사용자가 원하는 경우에 사용됩니다. 이는 모듈식에 좋은 솔루션입니다. 디자인 또는 이름 충돌을 피하려는 경우.
함수를 생성하는 다음 두 가지 방법은 동일하지만 다음과 같은 점에 유의해야 합니다.
function funcName(){
 | 🎜>}
그러나 전자의 방법은 명명된 함수를 생성하고 후자는 명명되지 않은 함수를 생성하며 변수가 명명되지 않은 함수 함수를 가리키도록 합니다. 사용법에는 한 가지 차이점이 있습니다. 명명된 함수의 경우 호출된 후에 정의할 수 있지만 명명되지 않은 함수의 경우 호출하기 전에 정의해야 합니다. 예:

이 문은 func에 대해 정의되지 않은 오류를 생성하지만

은 올바르게 실행될 수 있으며 다음 문도 올바르게 실행될 수 있습니다.

자바스크립트는 해석형 언어이지만 함수 호출 시 전체 코드에 해당 함수 정의가 있는지 확인하는 것을 볼 수 있습니다. 이 함수 이름은 의 형태로만 정의할 수 있습니다. function funcName()은 익명 함수가 아니라 유효합니다.
함수 개체와 기타 내부 개체의 관계
함수 개체 외에도 Object, Array, Date, RegExp, Math, Error와 같은 많은 내부 개체가 있습니다. 이러한 이름은 실제로 유형을 나타내며 객체는 new 연산자를 통해 반환될 수 있습니다. 그러나 함수 객체는 다른 객체와 다릅니다. typeof를 사용하여 함수 객체의 유형을 가져오면 여전히 "function" 문자열을 반환하고, 배열 객체나 다른 객체의 typeof를 사용하면 "object" 문자열을 반환합니다. ". 다음 코드는 다양한 유형의 typeof를 보여줍니다.
alert(typeof(new Function()))
alert(typeof(Array)); Alert(typeof(Object));
alert(typeof(new Array()));
alert(typeof(new Date()))
alert(typeof(new Object())) ;
이 코드를 실행하면 처음 네 개의 문은 "function"을 표시하고 다음 세 개의 문은 "object"를 표시하는 것을 볼 수 있습니다. 새 함수가 실제로 함수를 반환하는 것을 볼 수 있습니다. 이것은 다른 개체와 매우 다릅니다. Array 및 Object와 같은 다른 유형은 new 연산자를 통해 일반 객체를 반환합니다. 함수 자체도 객체이지만 객체 생성자이기도 하다는 점에서 여전히 일반 객체와 다릅니다. 즉, 이전에 소개한 객체를 반환하는 새로운 함수를 만들 수 있습니다. typeof가 "function"을 반환하는 모든 객체는 함수 객체입니다. 이러한 객체를 생성자라고도 합니다. 따라서 모든 생성자는 객체이지만 모든 객체가 생성자는 아닙니다.
함수 자체도 객체이기 때문에 C, Java 등 객체지향 언어의 클래스 정의를 생각해보면 Function 유형의 역할, 즉 함수 객체 자체에 대한 일부 메서드와 속성을 정의할 수 있습니다. 함수 유형의 정의는 아래에서 확장되고 확장될 수 있습니다. method1 메소드가 추가되어 "function"을 표시하는 대화 상자가 나타납니다.
Function.prototype.method1=function(){
Alert("function")
}
function func1(a,b,c){
return a b c;
}
func1.method1()
func1.method1.method1(); 명령문: func1.method1.mehotd1(), 함수 객체 method1의 method1 메소드를 호출합니다. 다소 혼란스러워 보이지만 구문을 자세히 살펴보면 이것이 재귀적 정의라는 점을 분명히 알 수 있습니다. method1 자체도 함수이기 때문에 함수 개체의 속성과 메서드도 갖습니다. Function 유형에 대한 모든 메서드 확장에는 이러한 재귀 속성이 있습니다.
Function은 모든 함수 객체의 기초이고, Object는 모든 객체(함수 객체 포함)의 기초입니다. JavaScript에서는 모든 개체가 Object의 인스턴스입니다. 따라서 모든 개체가 몇 가지 공통 속성과 메서드를 갖도록 개체 유형을 수정할 수 있습니다.
Object.prototype( ){
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); > 경고(b);
for(var i=0;i 경고(인수[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의 경우 함수 이름은 함수 내에서 sum을 호출하는 것과 동일하므로 이를 잘 반영할 수 없습니다. 더 나은 접근 방식은 인수.callee 속성을 사용하는 것입니다.
var sum=function(n){
if(1==n)return 1
else return nargs.callee; (n-1 ; 프로토타입.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 객체에 대해 전달된 매개변수입니다.下面的代码说明了apply和call方法的工作方式：
//定义一个函数func1，具有属性p和方法A
function func1(){
 this.p="func1-";
 this.A=function(arg){
 alert(this.p+arg);
 }
}
//定义一个函数func2，具有属性p和方法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
obj2.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"); //显示func1-byB
可以看出，obj1的方法A被绑定到obj2运行后，整个函数A的运行环境就转移到了obj2，即this指针指向了obj2。同样obj2的函数B也可以绑定到obj1对象去运行。代码的最后4行显示了apply和call函数参数形式的区别。
与arguments的length属性不同，函数对象还有一个属性length，它表示函数定义时所指定参数的个数，而非调用时实际传递的参数个数。例如下面的代码将显示2：
function sum(a,b){
 return a+b;
}
alert(sum.length);

深入认识JavaScript中的this指针
this指针是面向对象程序设计中的一项重要概念，它表示当前运行的对象。在实现对象的方法时，可以使用this指针来获得该对象自身的引用。
和其他面向对象的语言不同，JavaScript中的this指针是一个动态的变量，一个方法内的this指针并不是始终指向定义该方法的对象的，在上一节讲函数的apply和call方法时已经有过这样的例子。为了方便理解，再来看下面的例子：
<script>  </script>
从代码的执行结果看，分别弹出对话框显示1和2。由此可见，getP函数仅定义了一次，在不同的场合运行，显示了不同的运行结果，这是有this指针的变化所决定的。在obj1的getP方法中，this就指向了obj1对象，而在obj2的getP方法中，this就指向了obj2对象，并通过this指针引用到了两个对象都具有的属性p。
由此可见，JavaScript中的this指针是一个动态变化的变量，它表明了当前运行该函数的对象。由this指针的性质，也可以更好的理解JavaScript中对象的本质：一个对象就是由一个或多个属性（方法）组成的集合。每个集合元素不是仅能属于一个集合，而是可以动态的属于多个集合。这样，一个方法（集合元素）由谁调用，this指针就指向谁。实际上，前面介绍的apply方法和call方法都是通过强制改变this指针的值来实现的，使this指针指向参数所指定的对象，从而达到将一个对象的方法作为另一个对象的方法运行。
每个对象集合的元素（即属性或方法）也是一个独立的部分，全局函数和作为一个对象方法定义的函数之间没有任何区别，因为可以把全局函数和变量看作为window对象的方法和属性。也可以使用new操作符来操作一个对象的方法来返回一个对象，这样一个对象的方法也就可以定义为类的形式，其中的this指针则会指向新创建的对象。在后面可以看到，这时对象名可以起到一个命名空间的作用，这是使用JavaScript进行面向对象程序设计的一个技巧。例如：
var namespace1=new Object();
namespace1.class1=function(){
 //初始化对象的代码
}
var obj1=new namespace1.class1();
这里就可以把namespace1看成一个命名空间。
由于对象属性（方法）的动态变化特性，一个对象的两个属性（方法）之间的互相引用，必须要通过this指针，而其他语言中，this关键字是可以省略的。如上面的例子中：
obj1.getP=function(){
 alert(this.p); //表面上this指针指向的是obj1
}
这里的this关键字是不可省略的，即不能写成alert(p)的形式。这将使得getP函数去引用上下文环境中的p变量，而不是obj1的属性。