JavaScript之函数

Posted 2021-02-01 静心*尽力

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了JavaScript之函数相关的知识，希望对你有一定的参考价值。

一.函数初认识

1.函数类型
function(){} -->匿名函数
function 函数名(){}-->命名函数
2.函数不调用就不会执行
3.函数的调用方式
①.事件调用
②.直接调用

二.函数调用的两种方式

第一种事件调用之:通过匿名函数进行事件调用

li[i].onclick=function()

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>函数的两种调用方式</title>
</head>
<body>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
    </ul>
</body>
</html>
<script type="text/javascript">
  var li=document.getElementsByTagName(\'li\');
  for(var i=0;i<li.length;i++){
      li[i].onclick=function(){
          alert(\'阔落要加冰,学习要走心\');
      }    
  }
</script>

点击效果:

第一种时间调用之:通过命名函数进行事件调用:

li[i].onclick=onclickMe;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>函数的两种调用方式</title>
</head>
<body>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
    </ul>
</body>
</html>
<script type="text/javascript">
  var li=document.getElementsByTagName(\'li\');
  for(var i=0;i<li.length;i++){
     li[i].onclick=onclickMe;
     function onclickMe(){
         alert(\'阔落要加冰,学习要走心\');
     }
  }
</script>

点击效果:

第二种直接调用:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>函数的两种调用方式</title>
</head>
<body>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
    </ul>
</body>
</html>
<script type="text/javascript">
  var li=document.getElementsByTagName(\'li\');
  for(var i=0;i<li.length;i++){
    li[i].onclick=onclickMe();
  }
  function onclickMe(){
         alert(\'阔落要加冰,爱我要走心\');
     }
</script>

效果(直接出现三次显示,无需点击,这就是直接调用,只要格式正确,直接执行函数体代码):

以上是关于JavaScript之函数的主要内容，如果未能解决你的问题，请参考以下文章

如何将此 JavaScript 代码片段翻译成 Parenscript？

我的Android进阶之旅NDK开发之在C++代码中使用Android Log打印日志，打印出C++的函数耗时以及代码片段耗时详情

10个JavaScript代码片段，使你更加容易前端开发。

前端面试题之手写promise

jQ选择器学习片段（JavaScript 部分对应）