JavaScript之function（上）简介

最新推荐文章于 2023-08-08 09:57:11 发布

意夏

最新推荐文章于 2023-08-08 09:57:11 发布

阅读量319

点赞数

分类专栏： javascript

本文链接：https://blog.csdn.net/weixin_45014444/article/details/104059268

版权

javascript 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

1. 函数的概念及作用
函数可以封装任意多条语句，而且可以在任何地方、任何时候调用执行。
函数实际上是对象。每个函数都是 Function 类型的实例对象，而且都与其他引用类型一样具有属性和方法。由于函数是对象，因此函数名实际上也是一个指向函数对象的指针（函数名等于函数体）。

（1）对象=属性+方法(主动，被动)

 document.write(window.alert);
    //输出方法名称。 function alert() { [native code] }

（2）函数：function
函数很重要：函数是生产方法的，功能体，反复使用。
函数是对象，也是对象的构造器。

（3）函数声明的基本结构
function 函数名(){ 调用函数时执行的代码块 }
如果只是声明了，不调用，可以当函数不存在。
调用函数：函数名()
如何获取body: document.body
innerHTML:读写元素对象里面的内容，包括标签。
读：读取内容
写：更改内容
innerHTML读取：

 alert(document.getElementById('ID名').innerHTML)
         alert(document.body.innerHTML);//读取body标签里面的内容。因为body在整个HTML文档中是惟一的，所以可以直接这么书写,其他标签不可以。

<body>
    <script>
        //读取元素对象里的内容，包括标签
        alert(document.body.innerHTML)
    </script>
</body>

浏览器展示：
读取body内的某个标签的内容：要注意因为某个标签不一定是惟一的，那么直接按照body的写法是错误的（ alert(document.p.innerHTML)），在浏览器不可能读出来，正确写法是给需要读取的标签，设ID名，然后利用getElementById(‘ID名’)读取该标签的内容，例如：获取p标签

<body>
    <p id="p1">你好！</p>
    <script>
        //读取元素对象里的内容，包括标签
        alert(document.getElementById('p1').innerHTML)
    </script>
</body>

浏览器效果

innerHTML写入：document.getElementById(‘ID名’).innerHTML=‘需要写入的内容’;
例：给body的p标签写入内容

浏览器效果：

var str = '<table border="1">';
        for (var i = 1; i <= 5; i++) {
            str += '<tr>';
            for (var j = 1; j <= 5; j++) {
                str += '<td>11111</td>';
            }
            str += '</tr>';
        }
        str += '</table>';（虽然写出了表格，但是没有写在浏览器输出的代码，所以在浏览器中不会显示所写的表格）

        document.body.innerHTML = str;（读出并书写在浏览器中）
        document.body.innerHTML += 123;（在上一行内容的基础上拼接上123）
        document.body.innerHTML += 456;（在上一行内容的基础上拼接上456）
        //浏览器一次性显示上述三行代码的最终结果，不会执行一条代码显示一个结果
         alert(document.body.innerHTML = str)（读出显示在alert信息框中，
                                                 只有纯粹的代码）
         alert(document.body.innerHTML += 123);（在上一行内容的基础上拼接上123，
                                             只不过按照程序执行顺序，先显示上一行结果，点击第二次才会显示拼接一条后的结果，跟alert有关）

2.函数的创建（声明式和赋值式）

ECMAScript 中的函数使用 function 关键字来声明，后跟一组参数以及函数体。
声明式：普通函数

function 函数名(){
调用函数执行的代码块
}

注()放的是参数
函数定义及调用：
例：

 function fn() {
            alert('123')
        }
        alert(fn)

浏览器效果：函数名等于函数体，故直接显示了整个函数体

赋值式：函数表达式:函数赋值给变量（匿名函数、自执行函数、事件处理函数）
赋值式和声明式两者的区别：变量前置访问的问题。
赋值式（函数赋值给变量）、自执行函数、事件处理函数都是匿名函数
（1）赋值式函数：函数赋值给变量，函数名就是被赋值的那个变量
创建：

var fn1=function(){
         alert(456);
     }

调用：函数名+括号
写在该函数体代码后面，fn1() ,能正常调用，显示结果；
但是写在该函数体代码前面，fn1（）就不能正常调用，会报错：fn1 is not a function，这是变量的特殊性性和程序的执行顺序导致的，要是在定义变量的代码前面输出该变量，那么会提示undefined，此处道理一样，提前调用赋值式函数，会报错该函数不是一个函数。
（2）自执行函数：声明和调用写在一起（只执行一次）
普通函数的定义及调用方法是：

 function fn() {
            alert('123')
        }
       fn()

因为函数名等于函数体，故第四行代码的fn函数名可以改为1~3行的函数体，故可改为

 function fn() {
            alert('123')
        }()

但是这样写不符合语法规范，与此同时函数名fn不起作用了，故可以删除，为了符合语法规范，需要将function fn() {alert(‘123’) }变为一个整体，可以在前面加上！或者用（）将其包含起来，故可得自执行函数的创建方法
创建

(function (形参){
   alert(123);
})(实参);

 !function (形参){
 alert(123);
 }(实参);

例：

(function(a) {
            alert(a);
        })(3);//输出结果为3

（3）事件处理函数：将函数给事件
 function a() {
            alert('ok')
        
        }
        alert(a())//调用函数，先出现OK，后出现undefined，出现undefined的原因
        //第二行代码后面有：return：undefined，（返回值），没有写
    document.onclick = a(); //直接调用函数，不受是否点击的影响。
     document.onclick=a;//将函数绑定给点击事件，点击后调用函数，

因为函数名等于函数体，根据第八行代码，可得事件处理函数事件创建方法
创建：

document.onclick=function(){
  alert('ok');
};

3.参数的声明

函数的参数包括形参和实参，形参出现在函数定义中，在整个函数体内都可以使用，离开该函数则不能使用。而实参则出现在主调函数中，进入被调函数后，实参变量也不能使用。

//形参出现在函数定义
        function fn(a,b){//形参：形式上存在 a,b   var a=3,b=4;
            alert(a+b);
        }

        //实参则出现在主调函数中
        fn(3,4);//实参：实际的参数，具体的值。

  function sum(a,a,b,c){//函数的形参理解成函数内部的变量。
   alert(a+a+b+c);//2+2+3+4=11
   }
    sum(1,2,3,4);
    //var=1;
    //var=2;(覆盖var=1,所以a的值是2)
    //var=3;
    //var=4;

实参个数多余形参个数

  function sum(a, b, c) {
            alert(a + b + c)//输出6
        }
        sum(1, 2, 3, 4)(形参只设置了三个，实参设置了四个，但是没有办法全部接受，只接受1,2,3)

实参个数小于形参个数

function sum(a, b, c, d) {
            alert(a + b + c + d)//输出NaN，原因是d是个变量，
                             //未定义的变量输出为undefined,6+undefined的输出结果是NaN
        }
        sum(1, 2, 3)

函数不介意传递进来多少参数，也不会因为参数不统一而错误。实际上，函数体内可以通过arguments 对象来接收传递进来的参数。
实际上，函数体内可以通过arguments 对象来接收传递进来的参数。
arguments对象:理解成实参。
arguments.length:参数的长度。
通过下标(编号)来获取实参的值。下标从0开始。放在中括号里面
arguments[i]:参数的每一个值。
注意：形参相当于定义在函数内部的变量，是形式上存在（即声明了没赋值）。而实参是具体的值，实参将值传递给形参。
函数的返回值
函数都有一条return语句，return语句导致函数停止执行，并返回它的表达式的值给调用者。如果return语句没有相关的表达式（如果函数没有return），则返回undefined。返回值返回给调用者，虽然结果已经存在，但是不将结果打印出来（下面4,5,6行都是打印结果），那么结果无法显示。
结果返回给调用者，再函数外打印：

  function sum(a, b) {
            return a + b;
        }
        alert(sum(1, 3))//4
        document.write(sum(1, 3))//4
        console.log(sum(1, 3))//4

函数没有return：

   function sum(a, b) {
            alert(a + b);
        }
        alert(sum(1, 3))//先输出4，再输出undefined，原因是函数没有return，就会返回undefined

return语句导致函数停止执行：

function fn(){
   return 'hello';//导致函数停止执行
 alert('hehe');//不会执行
 }

意夏

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript之function（上）简介

1. 函数的概念及作用函数可以封装任意多条语句，而且可以在任何地方、任何时候调用执行。函数实际上是对象。每个函数都是 Function 类型的实例对象，而且都与其他引用类型一样具有属性和方法。由于函数是对象，因此函数名实际上也是一个指向函数对象的指针（函数名等于函数体）。（1）对象=属性+方法(主动，被动) document.write(window.alert); //输出方...
复制链接

扫一扫