> 웹 프론트엔드 > JS 튜토리얼 > JavaScript 함수 함수 유형 소개

JavaScript 함수 함수 유형 소개

高洛峰
풀어 주다: 2017-01-04 16:13:31
원래의
1805명이 탐색했습니다.

// JS에서 Function(함수) 유형은 실제로 객체입니다. 각 함수는 Function 유형의 인스턴스이며 다른 참조 유형과 동일한 속성 및 메서드를 갖습니다. 함수는 객체이므로 함수 이름은 실제로 함수 객체에 대한 포인터입니다.

함수를 선언하는 한 가지 방법

두 함수를 값으로 ​​
1.函数声明方式
  function box(num1,num2){
    return num1+num2;
  }
 
2.函数表达式定义函数
  var box = function(num1,num2){  // 通过变量box即可引用函数;
    return num1+num2;
  };                  // 注意函数末尾有一个分号,就像声明其他变量时一样;
  var another = box;         // 使用不带圆括号的函数名是访问函数指针;而非调用函数;
    console.log(another(10,10));  
3.使用Function构造函数
  var box = new Function('num1','num2','return num1+num2');
// 第三种方式不推荐,这种语法会导致解析两次代码(第一次解析常规JS代码,第二次解析传入构造函数中的字符串),从而影响性能;
// 可以通过这种语法来理解"函数是对象,函数名是指针"的概念;
로그인 후 복사

3가지 함수 내부 속성
// JS中的函数名本身就是变量,所以函数也可以作为值来使用;
// 也就是说,不仅可以像传参数一样把一个函数传递给另一个函数,而且可以将一个函数作为另一个函数的结果返回;
  function box(sumFunction,num){    // 无论第一个参数传递进来的是什么函数,
    return sumFunction(num);     // 它都会返回执行第一参数后的结果;
  }
  function sum(num){
    return num+10;
  }
  // 传递函数到另一个函数里;
    // 要访问函数的指针不执行函数的话,须去掉函数名后的圆括号;
  var result = box(sum,10);      // =>20;
로그인 후 복사

4가지 함수 속성 및 메소드
// 函数内部有两个特殊的对象:arguments和this;
 
// 1.arguments:是一个类数组对象,包含着传入函数中的所有参数,主要用途是保存函数参数;
// arguments这个对象还有一个名叫callee的属性,该属性是一个指针,指向拥有这个arguments对象的函数;
  function box(num){
    if(num<=1){
      return 1;
    }else{
      return num*arguments.callee(num-1);  // 使用arguments.callee来执行box本身;
    }
  }
 
// 2.this:引用的是函数据以操作的对象,或者说函数调用语句所处的作用域;
// 当在全局作用域调用函数时,this对象引用的就是window;
  window.color = "red";
  alert(this.color);        // 打印全局的color;=>red;
  var box = {
    color:&#39;blue&#39;,
    sayColor:function(){
      alert(this.color);    // 打印局部的color;=>blue;
    }
  };
로그인 후 복사

5가지 요약
// JS中的函数是对象,因此函数也有属性和方法;包含length和prototype;
 
// length属性:表示函数希望接收到命名参数的个数;
  function box(name,age){
    alert(name+age);
  }
  alert(box.length);        // 2s
 
// prototype属性:它是保存所有实例方法的真正所在,也就是原型;
// prototype包含两个方法:apply()和call(),每个函数都包含这两个非继承而来的方法;
// 这两个方法的用途都在特定的作用域中调用函数,实际上等于设置函数体内this对象的值;
  var color = &#39;red&#39;;
  var box = {
    color = &#39;blue&#39;;
  }
  function sayColor({
    alert(this.color);
  });
  sayColor();           // 作用域在window;
  sayColor.call(this);      // 作用域在window;
  sayColor.call(window);     // 作用域在window;
  sayColor.call(box);       // 作用域在box,对象冒充;=>red;
// 使用call(box)方法的时候,sayColor()方法的运行环境已经变成了box对象里了;
// 使用call()或apply()来扩充作用域的最大好处,就是对象不需要与方法发生任何耦合关系;
// 耦合:相互关联的意思,扩展和维护会发生连锁反应;
// 也就是说,box对象和sayColor()方法之间不会有多余的关联操作,比如:box.sayColor = sayColor;
 
  function Animal(){  
    this.name = "Animal";  
    this.showName = function(){  
      alert(this.name);  
    }  
  }  
  function Cat(){  
    this.name = "Cat";  
  }  
  var animal = new Animal();  
  var cat = new Cat();  
  //通过call或apply方法,将原本属于Animal对象的showName()方法交给对象cat来使用。  
  //输入结果为"Cat"  
  animal.showName.call(cat,",");  
  //animal.showName.apply(cat,[]);
로그인 후 복사
1 // 함수는 실제로 Function 유형의 인스턴스이므로 함수는 객체이기도 합니다.

2 // 함수 객체 때문에 함수에는 동작을 향상하는 데 사용할 수 있는 메서드도 있습니다. 🎜>
더보기 다양한 JavaScript Function 함수 유형 도입 관련 글은 PHP 중국어 홈페이지를 주목해주세요!


관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿