JS进阶笔记3

简介: JS进阶笔记3

2.4 函数


函数声明方法一:有名函数


function 函数名([参数列表]) {
  函数体;
  [return [表达式];]
}


函数声明方法二:函数表达式(匿名函数)


--不需要函数名
--常用于定义事件的回调函数
变量名 = function ([参数列表]) {
  函数体;
  [return [表达式];]
}


例:匿名函数作为回调函数


<script>
  let btns = document.querySelectorAll("button");
  btns.forEach(function (btn) {  // 匿名函数
    btn.addEventListener("click", function () {    // 匿名函数
      let bgColor = this.dataset.bgColor;
      bind = setTimeout(function () {     // 匿名函数
        console.log(bgColor);
        document.body.style.backgroundColor = bgColor;
      }, 1000, bgColor);
    });
  });
</script>


例:匿名函数作为表达式赋值给变量


// 定义匿名函数并作为表达式赋值给变量
var fn = function(name) {
  console.log(`Hello ${name}`); // 字符串模板
};
// 通过变量名调用匿名函数
fn('VUE');  // Hello VUE


函数参数:


  • 参数列表可选,不指定类型,传递时可接受任意类型数据,调用时如实参未指定,默认值为undefined


  • 从ES2015开始:可为参数指定默认值


image.png


函数中的this


  • JavaScript中的this通常指向当前对象
  • 当前对象指调用当前正在执行的函数(方法)的对象
  • 在全局环境中:
  • 非严格模式下,this指向window(浏览器环境)
  • 严格模式下,this为undefined
  • setTimeout和setInterval中延迟调用的方法都在全局环境中执行


定义函数方式三: Lambada 表达式


  • Lambada 表达式(箭头函数):比函数表达式更加简洁,不绑定this、arguments、super


  • 语法形式1:(参数1, 参数2, …, 参数N) => { 函数声明; }
var f = (num1, num2) => { 
  return num1*num2 
};
console.log(f(3, 4)); // 12
  • 箭头函数-语法形式2:(参数1, 参数2, …, 参数N) => 表达式(单一)
var f = (num1, num2) => num1*num2;
console.log(f(3, 4)); // 12
  • 箭头函数-语法形式3:单一参数 => {函数声明}
var f = num => num*num;
console.log(f(3)); // 9
  • 箭头函数-语法形式4:() => {函数声明}  // 无参数
var f = () => 'hello world';
console.log(f()); // hello world


常用内置函数


image.png

相关文章
|
1月前
|
JavaScript 前端开发 程序员
前端学习笔记——node.js
前端学习笔记——node.js
38 0
|
14天前
|
自然语言处理 JavaScript 前端开发
[JS]同事看了我做的this笔记,直摇头,坦言:我还是参考启发博文吧
本文介绍了JavaScript中`this`关键字的重要性和使用规则。作者回顾了早期笔记,总结了`this`指向的各种情况,并分享了最新的理解。文章强调了`this`在不同上下文中的指向,包括对象方法、全局函数、箭头函数等,并提供了改变`this`指向的方法。适合JavaScript开发者参考。
31 2
|
2月前
|
JavaScript 前端开发 Java
JavaScript笔记(回顾一,基础知识篇)
JavaScript基础知识点回顾,包括语言定义、ECMAScript规范、字面量、变量声明、操作符、关键字、注释、流程控制语句、数据类型、类型转换和引用数据类型等。
JavaScript笔记(回顾一,基础知识篇)
|
3月前
|
存储 缓存 自然语言处理
深入理解JS | 青训营笔记
深入理解JS | 青训营笔记
39 0
|
4月前
|
前端开发 JavaScript 安全
JavaScript进阶-JavaScript库与框架简介
【7月更文挑战第11天】JavaScript库和框架加速Web开发,但也带来挑战。选择适合项目、团队技能的库或框架,如React、Angular、Vue,是关键。保持依赖更新,注意性能优化,避免过度依赖。遵循最佳实践,确保安全性,如防XSS和CSRF。学习基础,结合代码示例(如React计数器组件),提升开发效率和应用质量。
58 1
|
4月前
|
缓存 JavaScript 前端开发
JavaScript进阶 - Web Workers与Service Worker
【7月更文挑战第4天】JavaScript的Web Workers和Service Worker增强了Web性能。Web Workers处理后台多线程,减轻主线程负担,但通信有开销,受同源策略限制。Service Worker则用于离线缓存和推送通知,需管理其生命周期、更新策略,并确保安全。两者都带来了挑战,但也极大提升了用户体验。通过理解和优化,开发者能构建更高效、安全的Web应用。
123 2
|
4月前
|
资源调度 JavaScript 前端开发
JavaScript进阶 - JavaScript库与框架简介
【7月更文挑战第5天】JavaScript库和框架构成了前端开发的核心,如jQuery简化DOM操作,Angular、React和Vue提供全面解决方案。选择时要明确需求,避免过度工程化和陡峭学习曲线。使用版本管理工具确保兼容性,持续学习以适应技术变化。示例展示了jQuery和React的简单应用。正确选择和使用这些工具,能提升开发效率并创造优秀Web应用。
49 2
|
4月前
|
缓存 前端开发 JavaScript
JavaScript进阶 - Web Workers与Service Worker
【7月更文挑战第10天】在Web开发中,Web Workers和Service Worker提升性能。Workers运行后台任务,防止界面冻结。Web Workers处理计算密集型任务,Service Worker则缓存资源实现离线支持。常见问题包括通信故障、资源限制、注册错误及缓存更新。通过示例代码展示了两者用法,并强调生命周期管理和错误处理的重要性。善用这些技术,可构建高性能的Web应用。
86 0
|
4月前
|
XML 前端开发 JavaScript
JavaScript进阶 - AJAX请求与Fetch API
【7月更文挑战第9天】JavaScript进阶:AJAX与Fetch API对比。AJAX用于异步数据交换,XMLHttpRequest API复杂,依赖回调。Fetch API是现代、基于Promise的解决方案,简化请求处理。示例:`fetch(&#39;url&#39;).then(r =&gt; r.json()).then(data =&gt; console.log(data)).catch(err =&gt; console.error(err))`。注意点包括检查HTTP状态、错误处理、CORS、Cookie和超时。Fetch提高了异步代码的可读性,但需留意潜在问题。
101 0
|
4月前
|
存储 JavaScript 前端开发
JavaScript进阶 - 浏览器存储:localStorage, sessionStorage, cookies
【7月更文挑战第8天】Web开发中的客户端存储技术,如`localStorage`, `sessionStorage`和`cookies`,用于保存用户设置和跟踪活动。`localStorage`持久化存储,`sessionStorage`随页面会话消失。两者提供基本的增删查改操作,但有大小限制和安全风险。`cookies`适合会话管理,可设置过期时间并能跨域。使用时注意存储量、安全性和跨域策略,选择适合场景的存储方式。
193 0