Loading [MathJax]/jax/output/CommonHTML/config.js
前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >js中的函数

js中的函数

原创
作者头像
李才哥
修改于 2020-08-17 02:18:38
修改于 2020-08-17 02:18:38
6.6K0
举报
文章被收录于专栏:李才哥李才哥

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>04_函数</title>

</head>

<body>

<!--

1. 什么是函数?

* 具有特定功能的n条语句的封装体

* 只有函数是可执行的, 其它类型的数据是不可执行的

* 函数也是对象

2. 为什么要用函数?

* 提高代码复用

* 便于阅读和交流

3. 如何定义函数?

* 函数声明

* 表达式

4. 如何调用(执行)函数?

* test()

* new test()

* obj.test()

* test.call/apply(obj)

-->

<script type="text/javascript">

function f1 () { // 函数声明

console.log('f1()')

}

var f2 = function () { // 表达式

console.log('f2()')

}

/*

编写程序实现以下功能需求:

1. 根据年龄输出对应的信息

2. 如果小于18, 输出: 未成年, 再等等!

3. 如果大于60, 输出: 算了吧!

4. 其它, 输出: 刚好!

*/

function showInfo (age) {

if(age<18) {

console.log('未成年, 再等等!')

} else if(age>60) {

console.log('算了吧!')

} else {

console.log('刚好!')

}

}

//调用

showInfo(17)

showInfo(22)

/*

函数也是对象

*/

function fn() {

}

console.log(fn instanceof Object) // 是Object类型的实例

console.log(fn.prototype) // 内部有属性

console.log(fn.call) // 内部有方法

fn.t1 = 'atguigu' // 可以添加属性

fn.t2 = function () { // 可以添加方法

console.log('t2() '+this.t1)

}

fn.t2()

</script>

</body>

</html>

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>05_回调函数</title>

</head>

<body>

<button id="btn">测试点击事件</button>

<!--

1. 什么函数才是回调函数?

* 你定义的

* 你没有直接调用

* 但最终它执行了(在特定条件或时刻)

2. 常见的回调函数?

* DOM事件函数

* 定时器函数

* ajax回调函数(后面学)

* 生命周期回调函数(后面学)

-->

<script type="text/javascript">

//1. DOM事件函数

var btn = document.getElementById('btn')

btn.onclick = function () {

alert(this.innerHTML)

}

//2. 定时器函数

setInterval(function () {

alert('到点啦!')

}, 2000)

</script>

</body>

</html>

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
这次把 javascript 闭包给你讲的明明白白
就是因为你的left写在了click回调函数里面。因为每点击一次就会创建一块function空间,里面left变量去定时改变style,每改变一次style.left就会导致一次回流从而再渲染一次。每次点击left初始值为1,上一次的已经为+了很多次,上上次的已经为+了非常多次。渲染的时候你就会看到一会1px一会很多px的鬼畜情况,也就是动画抖动(渲染一次抖动一次)。
砖业洋__
2023/05/06
4220
这次把 javascript 闭包给你讲的明明白白
【JavaScript基础】Js的定时器(你想看的原理也在哟)
本章是经历第二次翻新,时过一年,再看自己的文章,觉得需要做点什么,它得丰富一点!篇幅半页或者一页,自己都感觉有点对不住自己。为了对得住自己,加了原理解析和案例。知其然与所以然。
玖柒的小窝
2021/11/02
9180
javaScript 函数节流
什么是javascript函数节流?从其字面意思可以大概猜到是一种为提升函数调用执行性能的一种方法。javascript函数节流就是针对调用频率高的函数,通过设置定时器,使其在执行后间隔一段时间,才进行下一次的执行,避免重复频繁的调用导致的浏览器性能以及ajax重复调用问题。 函数节流的经典应用场景:onresize,scroll,mousemove ,mousehover等事件回调函数的无间断执行。其主要实现思路就是通过setTimeout定时器,通过设置缓冲时间,在第一次调用时,创建定时器,并在定时时间
用户1097444
2022/06/29
4960
javaScript 函数节流
javascript 基础_JavaScript高级编程
1.分类: -基本类型 -String:任意字符串 -Number:任意的数字 -boolean: true/false -undefined:未定义 -null:空
全栈程序员站长
2022/09/24
1.6K0
javascript 基础_JavaScript高级编程
JavaSprict函数
盛透侧视攻城狮
2024/10/21
640
ES6教程-字符串,函数的参数,了解函数的arguments对象,js面向对象,设计模式-单例模式,解构赋值
主要讲解了ES6对字符串的拓展,包括includes,startsWith和endsWith,另外增加了字符串模板。
达达前端
2019/07/03
7690
ES6教程-字符串,函数的参数,了解函数的arguments对象,js面向对象,设计模式-单例模式,解构赋值
JS函数(号称最全最详解包括es6)
第一绝: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head
贵哥的编程之路
2020/10/30
4360
JS函数(号称最全最详解包括es6)
【ES6+】003-ES6新特性:简化对象和函数写法、箭头函数
ES6 允许在大括号里面,直接写入变量和函数,作为对象的属性和方法。这样的书写更加简洁;
訾博ZiBo
2025/01/06
1140
【ES6+】003-ES6新特性:简化对象和函数写法、箭头函数
JS基础第三课(定时器篇)
(1)概念:回调函数其实是一个参数,将这个函数作为参数传到别的函数里面,回调函数是最后执行的
申小兮
2023/04/14
2.1K0
JS基础第三课(定时器篇)
SpringBoot的4中常见入参形式错误解析
SpringBoot前后端接口对接工作时,经常遇到请求500,400等问题,马虎大意经常导致时间浪费,为此总结了4个常见的复杂请求类型,以此为戒。
JavaDog程序狗
2024/10/14
1330
SpringBoot的4中常见入参形式错误解析
ES6 | 前端必备技能:变量的数据解构赋值
本文参考地址:变量的解构赋值 - ECMAScript 6入门 (ruanyifeng.com)
倾盖
2022/08/16
2130
ES6技术
JavaScript之前是LiveScript,具体的资料,大家自己查一下百度。网景公司的语言,这个公司为了把自己的公司语言,走出美国,迈向世界。把自己的语言提交给了ECMA。
张哥编程
2024/12/19
1040
ES6技术
前端面试中常考的源码实现
如果一个函数作为一个对象的属性,那么通过对象的.运算符调用此函数,this就是此对象
心谭博客
2020/04/20
3640
JavaScript学习总结(三)——闭包、IIFE、原型、函数与对象
一、闭包(Closure) 1.1、闭包相关的问题 请在页面中放10个div,每个div中放入字母a-j,当点击每一个div时显示索引号,如第1个div显示0,第10个显示9;方法:找到所有的div,
张果
2018/01/04
1.6K0
JavaScript学习总结(三)——闭包、IIFE、原型、函数与对象
JS中call apply bind的用法
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </hea
贵哥的编程之路
2020/10/28
3K0
自定义工具函数库(三)
开开心心收工?有点问题,如果对象中有循环引用,即”你中有我,我中有你”的话,就会导致形成死循环,会导致无法跑出结果,直到超出最大调用堆栈大小
赤蓝紫
2023/03/11
1.1K0
第24天:js-函数变量声明提升
一、函数声明 1、自定义函数 function fun1(){ alert("我是自定义函数"); } fun2();//函数不调用,自己不执行 2、直接量声明 var fun2=function(){ alert("直接量声明"); } fun2(); 3、利用Function关键字声明 var fun3=new Function("var a=10;b=20;alert(a+b)"); fun3();
半指温柔乐
2018/09/11
1.9K0
javaScript 函数节流
IMWeb前端团队
2018/01/08
9480
javaScript 函数节流
JavaScript 函数
函数可以把具有相同或相似逻辑的代码“包裹”起来,通过函数调用执行这些被“包裹”的代码逻辑,这么做的优势是有利于精简代码方便复用。
用户9615083
2023/02/28
7850
JavaScript 函数
第61天:json遍历和封装运动框架(多个属性)
 var json = {width:200,height:300,left:50} console.log(json.width); for(var k in json) { console.log(k);   // k 遍历的是json  可以得到的是  属性 console.log(json[k]);  // json[k]  得到 是属性的  值 }
半指温柔乐
2018/09/11
6450
第61天:json遍历和封装运动框架(多个属性)
相关推荐
这次把 javascript 闭包给你讲的明明白白
更多 >
领券
💥开发者 MCP广场重磅上线!
精选全网热门MCP server,让你的AI更好用 🚀
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档