js中的匿名函数和非匿名函数

一、js中的匿名函数

匿名函数顾名思义就是没有名称的函数,例如:

var me = function(){alert(1)}
me()

其中function()就是一个没有函数名的函数
我们可以将这个匿名函数赋值给一个变量me,然后通过me()来调用这个匿名函数,输出结果就是1

值得注意的是,为变量命名时不要使用关键字,例如这里不要用 var name,否则就不能显示结果,而且无法轻易找出问题,因为js也不报错,我在变量和方法命名这块踩了不少坑。
在js中我们会经常用到匿名函数,例如:

<button id="btn" >弹出</button>
<script>
document.getElementById("btn").onclick = function(){
    alert(666)
}
</script>

这样就把匿名函数function()赋值给了id为btn的这个节点元素,通过为btn这个元素绑定onclick点击事件,我们点击btn对应的弹出按钮,就可以在网页上显示666了
document是什么?其实它是网页的节点,我们可以通过右键检视chrome浏览器的网页,选择console,然后输入:

console.log(document)

来查看console日志,可以看到ducoment的显示结果如下:


实际上document是整个网页上的元素内容,我们可以通过getElementById,getElementsByName(),getElementsByTagName()来查询指定的元素
其中:

  • getElementById是通过id查找元素,这个元素是唯一的
  • getElementsByName()是通过name来查找元素,它返回的是一个元素数组,而不是一个元素,这是因为 HTML 表单中的一些元素通常具有相同的name ,如图:
  • getElementsByTagName()方法可返回带有指定标签名的元素的集合,并且返回元素的顺序是它们在文档中的顺序。例如可以查找table标签元素,div标签元素,它返回的也是数组。如果把特殊字符串 "*" 传递给 getElementsByTagName() 方法,它将返回文档中所有元素的列表,元素排列的顺序就是它们在文档中的顺序。

二、js中的非匿名函数

非匿名函数就是有函数名的函数,例如:

<script>
function letter(a,b,c){
    alert(a)
    alert(b)
    alert(c)
}
letter(1,2,3)

</script>

通过向letter函数中依次传入参数1,2,3然后网页就会输出对应的结果1,2,3

如果我们想把上面的点击按钮弹出666的功能改用非匿名函数,可以这样写:

<button onclick = "btn()">弹出</button>
<script>
function btn(){
    alert(666)
}
</script>

建立btn()函数,并且为其对应的html元素绑定onclick事件即可

三、参考资料:

1.HTML DOM Document 对象--w3school

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 一、JS前言 (1)认识JS 也许你已经了解HTML标记(也称为结构),知道了CSS样式(也称为表示),会使用HT...
    凛0_0阅读 2,798评论 0 8
  • 第3章 基本概念 3.1 语法 3.2 关键字和保留字 3.3 变量 3.4 数据类型 5种简单数据类型:Unde...
    RickCole阅读 5,162评论 0 21
  • 今天的任务:训练规划:07+12 train+test的数据一起送进去训练 : 07test 12t...
    卷卷卷子阅读 138评论 0 0
  • 我是你的爷爷,你可曾想起了我~ 愿做你的大佬,支配着你。我的乖孙 爱是这么简单,喂你一个生鸡蛋 ...
    卍智光阅读 139评论 0 2
  • 四年时间,不长也不短,回头看有过的这四年,只是因为你------题记 懵懵懂懂看走过的四年,那时的年少轻狂,如今的...
    乐籽阅读 229评论 0 1