JavaScript 函数

JS函数全解析

最新推荐文章于 2024-07-04 18:25:41 发布

原创最新推荐文章于 2024-07-04 18:25:41 发布 · 244 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript

前端同时被 2 个专栏收录

80 篇文章

订阅专栏

JavaScript

25 篇文章

订阅专栏

函数的定义方式

基本方式

语法：
function 函数名(参数1，参数2，…){ 要执行的代码（函数体） };

	function sum1(a, b){
           alert(a + b);
    };
    sum1(2, 3);//函数调用

字面量方式

语法：
var 变量名 = function (参数1，参数2，…){ 要执行的代码（函数体） };

   var sum2 = function(a, b){
       alert(a + b);
   }
   sum2(3, 3);//函数调用

构造函数方式

语法：
var 变量名 = new Function (参数1，参数2，…，“要执行的代码（函数体）”);

   var sum3 = new Function("a", "b", "alert(a + b)");
   sum3(5, 5);//函数调用

函数返回值

返回执行结果，不会在页面中显示，需要用变量来接收
函数遇到return，会立刻返回结果，并中止函数

    function sum(a, b){
       return a + b; //返回执行结果，不会在页面中显示，需要用变量来接收

	   var c = a + b + 10;//函数遇到上面return，会立刻返回结果，并中止函数，所以后面的代码不会执行
	   return c;
     }
     var a = sum(2, 3);
     alert(a);

函数中调用函数

将函数作为另一个函数的参数
引用了函数的返回值作为另一个函数的参数


  function Test5(a){
      return a*a;
  }
  function Test6(b, func){
      return b + func;
  }
  //引用了函数的返回值作为另一个函数的参数
  alert(Test6(10, Test5(10)));

匿名函数

匿名函数就是没有函数名的函数；单独的匿名函数是无法运行和调用的

第一种匿名函数：函数没有函数名，而是直接赋值给一个变量，通过变量调用函数

注意：函数的调用语句，必须放在函数声明语句之后

	var NiMing1 = function(){
         alert("匿名函数1")
     }
     NiMing1();

第二种匿名函数：

自调用

  (function(){
      alert("匿名函数2");
  })();

当事件发生时调用

  window.onload = function(){
      alert("匿名函数3");
  }

函数中调用

  setTimeout(function(){
      alert("匿名函数4");
  }, 3000);

回调函数

回调函数：（callback函数）函数B作为参数传递到另一个函数A中，函数A执行函数B。

函数A叫做主函数，函数B叫做回调函数

   function A(a){
       a();
   };
   function B(){
       alert("我是B函数，传给A函数后叫做回调函数")
   }

   A(B);

递归函数

递归函数：就是函数自己调用自己

注意：递归函数必须有跳出条件，否则就是死循环

   var i = 0;
   function dg(){
       alert("从前有座山，山上有座庙，庙里有个老和尚给小和尚讲故事，讲的是：");
       i++;
       if(i<5){
           dg();
       };
   };
   dg();

全局函数

全局函数：js自带的函数，将常用的一些功能封装起来，可用于所有内建的JavaScript对象；全局函数又叫顶层函数、系统函数、内置函数

Number()：转换成数值类型
String()：转换成字符串类型
Boolean()：转换成布尔类型
parseInt()：将字符串转换为整型

函数的内部属性

函数内部，有两个特殊的对象：arguments和this

arguments

arguments.length：返回函数的实参个数
函数运行时不会验证传递给函数的参数个数是否等于函数定义的参数个数。开发者定义的函数都可以接受任意个数的参数（最多可接受255个），而不会引发任何错误。任何遗漏的参数都会以undefined传递给函数，多余的函数将忽略

   //arguments.length检测函数的参数个数
   function func(x, y){
       alert(arguments.length);
       //获取指定的参数
       alert(arguments[0]);
   }
   func(12);

this

this是JavaScript语言的一个关键字，它代表函数运行时，自动生成的一个内部对象；随着函数使用场合的不同，this的值会发生变化，但是有一个总的原则，那就是this指的是，调用函数的那个对象

注意：this跟函数在哪里定义没有半毛钱关系，函数在哪里调用才决定了this到底引用的是啥。也就是说this跟函数的定义没有关系，跟函数的执行有很大的关系。所以，记住“函数在哪里调用才决定了this到底引用的是啥”

在函数外部使用this，this就指的是window对象
函数内部调用
用new来调用
作为某个对象的方法调用，这时this就指这个上级对象
事件监听函数中的this

    <div id="div1" style="width: 100px; height: 100px; background-color: red;">111</div>
    <script>
        //1、在函数外部调用this，指的是window对象
        // alert(this); //两者相等
        // alert(window);

        //全局变量可以看做是window对象的属性
        var x = 1;
        // alert(window.x);
        // alert(this.x);

        // 2、函数内部调用
        function func(){
            var x = 0;
            alert(x);//这里的x为0
            alert(this.x);//这里的x为1，this为window对象
        }
        // func();

        //3、通过new来调用，name绑定的将是新创建的对象
        function func2(){
            this.x = 100;
            // alert(this.x);//这里this.x为100
        }
        var obj = new func2();
        // alert(x);//这里的x为1
        // alert(obj.x);//这里的x为100

        //4、作为某个对象的方法调用
        function func3(){
            alert(this.x);
        }
        var obj2 = {};
        obj2.x = 90;
        obj2.m = func3;
        // obj2.m();

        //5、事件监听函数中的this
        var div1 = document.getElementById("div1");
        div1.onclick = function(){
            // alert(div1.innerHTML);
            alert(this.innerHTML);//this指向的是div元素对象
        }
    </script>

函数的属性和方法

每个函数都包含两个属性：length和prototype
每个函数都包含两个非继承而来的方法：apply()和call()

length：返回函数的形参个数

   <script>
       //length:当前函数形参个数
       function func(a, b, c){
           alert(func.length);//形参个数
           alert(arguments.length);//实参个数
       }
       func();
   </script>

apply()和call()
1、这两个方法都是在特定的作用域中调用函数，实际上等于设置函数体内this对象的值
2、apply()：接受两个参数；一个是函数运行的作用域，另一个参数为数组（可以是数组实例，也可以是arguments对象）
3、call()：第一个参数同上，其余的参数都是传递参数，传递给函数的参数需要逐个列举出来
4、apply和call通常用来扩充函数运行的作用域而非单纯的传递参数

    <script>
        function sum(num1, num2){
            return num1 + num2;
        }
        function applySum1(a, b){
            // alert(this);//作用域为this，表示作用在当前函数下
            return sum.apply(this, [a, b]);
        }
        function applySum2(a, b){
            return sum.apply(this, arguments);//传入arguments对象
        }
        // alert(sum(10, 20));
        // alert(applySum1(20, 30));
        // alert(applySum2(30, 40));

        // 对于apply、call二者而言，作用完全一样，只是接收参数的方式不太一样
        function callSum(x, y){
            return sum.call(this, x, y);//传入的是具体参数
        }
        // alert(callSum(40, 50));

        //扩充函数作用域
        var color = "red";
        var o = {"color": "blue"};
        function sayColor(){
            alert(this.color);
        }
        sayColor();
        sayColor.call(this);
        sayColor.call(window);

        sayColor.call(o);
    </script>

变量和作用域

基本类型和引用类型

基本类型：undefined、NULL、Boolean、Number、String

这些类型分别在内存中占有固定的大小空间，例如：数值型占八个字节、布尔值为一个字节。他们的值保存在栈空间，我们通过按值来访问

引用类型：对象、数组、函数

1、引用类型内存中占有的空间不固定，但是内存地址大小是固定的，因此存储的实际上是数据的内存地址
在变量复制时，基本类型复制的是值的本身，而引用类型复制的是地址

    <script>
        var man1 = "OliGit";
        var man2 = man1;
        // alert(man1 + "\n" + man2);
        man2 = "Jooze";
        // alert(man1 + "\n" + man2);
    </script>
    <script>
        var person = new Object();
        person.name = "OliGit";
        var person2 = person;
        // alert(person2.name + "\n" + person.name);
        person2.name = "Jooze";
        alert(person2.name + "\n" + person.name);
    </script>

函数的参数都是按值传递的

    <script>
        var num = 100;
        function func(num){
            num += 100;
            return num;
        }
        var result = func(100);
        alert(result);
        alert(num);//num为100
    </script>

执行环境及作用域

执行环境定义了变量或函数有权访问其他数据
全局执行环境是最外围的执行环境，在web浏览器中，全局执行环境是window对象，因此，所有的全局变量和函数都是作为window的属性和方法创建的
变量没有在函数内声明或者声明的时候没有带var就是全局变量，拥有全局作用域，window对象的所有属性拥有全局作用域；在代码任何地方都可以访问，函数内部声明并且以var修饰的变量就是局部变量，只能在函数体内使用，函数的参数虽然没有使用var，但仍然是局部变量
内部环境可以访问所有的外部环境，但是外部环境不能访问内部环境中的任何变量和函数
在变量的查询中，访问局部变量要比全局变量块

<script>
        var name = "OliGit";//定义全局变量
        // alert(name);
        // alert(window.name);//全局变量，最外围，属于window属性

        function setName(){
            return "Jooze";
        }
        // alert(setName());
        // alert(window.setName());//全局函数，最外围，属于window方法
    </script>
    <script>
        var name = "OLIGIT"; //定义全局变量
        function setName2(){
            // var name = "JOOZE"; //定义局部变量
            name = "JOOZE2"; //去掉var变成全局变量
            // alert(name);
        }
        setName2();
        alert(name);
    </script>
    <script>
    function setName3(){
        var name = "OliGit";
        function setYear(){
            var age = 21;
            //验证内部环境可以访问外部环境
            var str = name + age + "岁了";
            return str;
        }
        // alert(setYear());//验证内部环境可以访问外部环境
        // alert(age);//验证外部环境访问内部环境
    }
    setName3()
</script>

全局函数

全局函数和属性可用于所有内建的JavaScript对象，全局函数又叫顶层函数或系统函数

parseInt()：可解析一个字符串，并返回一个整数
parseFloat()：可解析一个字符串，并返回一个浮点数
isNaN()：用于检查其参数是否是非数字值
String()：把对象的值转换为字符串
Number()：把对象的值转换为数字
eval()：可计算某个字符串，并执行其中的JavaScript代码

1、该方法只接受字符串作为参数，要计算的字符串中必须含有要计算的JavaScript表达式或要执行的语句

    var str = "x = 10; y = 20; alert(x + y);"
    alert(str);
    eval(str);

escape()：对字符串进行编码
1、返回值：已编码的string的副本。其中某些字符被替换成了十六进制的转义序列
2、该方法不会对ASCII字母和数字进行编码，也不会对下面这些ASCII标点符号进行编码：* @ - _ + . / 其他所有的字符都会被转义序列替换
unescape()：对由escape()编码的字符串进行解码

encodeURI()：把字符串编码为URI

URI：Uniform Resource Identifier，统一资源标识符

decodeURI()：解码某个编码的URI
decodeURIComponent()：解码一个编码的URI组件
encodeURIComponent()：把字符串编码为URI组件
三种编码方式的区别
1、escape不编码字符有69个：、+、-、.、/、@、、0-9、a-z、A-Z
2、encodeURI不编码字符有82个：！、#、$、&、’、(、）、，、：、；、=、？、~、 * 、+、-、.、/、@、、0-9、a-z、A-Z（主要用于页面跳转的时候）
3、encodeURIComponent不编码有71个：！、’、（、）、~、、+、-、.、/、@、_、0-9、a-z、A-Z（一般用来传递参数）
isFinite()：检查某个值是否为无穷大的数
1、Infinity：无穷大（系统定义常量）
2、-Infinity：无穷小（系统定义常量）

如果number是有限数字（或可转换为有限数字），那么返回true。否则，如果number是NaN（非数字），或者是正负无穷大的数，则返回false