JavaScript 核心基础——(四)函数基础

1. 概念

  • 函数也是一个对象,具有其他对象所有的功能
  • typeof fn 会返回 function

2. 声明方式

2.1 声明式函数

语法:

javascript 复制代码
function fn() {
    // code here..
}

2.2 赋值式函数(函数表达式)

语法:

javascript 复制代码
var fn = function() {
    // code here..
}

2.3 箭头函数

语法:

javascript 复制代码
const fn = () => {
    // code here..
}

3. 三种函数调用上的区别

  • 声明式函数:调用可以在定义之前或定义之后

    javascript 复制代码
    // 可以调用
    fn() // >> ''我是 fn 函数''
    // 声明式函数
    function fn() {
        console.log('我是 fn 函数')
    }
    // 可以调用
    fn() // >> ''我是 fn 函数''
  • 赋值函数:调用只能在定义之后调用,定义之前就调用会报错

    javascript 复制代码
    fn7(); // err: Uncaught ReferenceError: Cannot access 'fn7' before initialization
    const fn7 = function() {
        console.log('fn7');
    }
    fn7();
  • 箭头函数:调用只能在定义之后调用,定义之前就调用会报错

    javascript 复制代码
    fn6(); // err: Uncaught ReferenceError: Cannot access 'fn6' before initialization
    const fn6 = () => {
        console.log('fn6');
    }
    fn6();

4. 函数参数默认值

语法:

javascript 复制代码
const fn = (a = 10, b = 20, c = 30) => {
    // code here..
}

5. 返回值

  • 如果 return 后面不跟任何值或者直接不写 return,则函数最终会返回 undefined

  • 箭头函数的返回值可以直接写在箭头后,如果直接在箭头后设置对象字面量为返回值时,对象字面量必须用 () 括起来

    javascript 复制代码
    const sum = (a, b) => a + b;
    const fn = () => ({name: "孙悟空"});

6. 立即执行函数

  • 在开发中应该尽力那个减少在全局作用域中编写代码,因此我们编写的代码要尽量编写到局部作用域
  • 如果希望可以创建一个只执行一次的匿名函数,可以使用立即执行函数语法
javascript 复制代码
(function() {
    let a = 10;
    console.log(111);
}());

7. this

  • 函数在执行时,JS 解析器每次都会传递进一个隐含的参数 this
  • this 会指向一个对象,this 所指向的对象会根据函数调用方式的不同而不同
    • 以函数形式调用时,this 指向的是 window
    • 以方法的形式调用时,this 指向的是调用方法的对象

8. 箭头函数的 this

  • 特殊语法:
    • 多个参数:(a, b) => {}
    • 值返回一个对象的函数:() => ({name: 'tom', age})
  • 箭头函数没有自己的 this,它的 this 有外层作用域决定
  • 箭头函数的 this 和它的调用方式有关
javascript 复制代码
function fn() {
    console.log("fn -->", this)
}
const fn2 = () => {
    console.log("fn2 -->", this) // 总是window
}
// fn() // window
// fn2() // window
obj = {
    name:"孙悟空",
    fn, // fn:fn
    fn2,
    sayHello(){
        console.log(this.name)
        // function t(){
        // console.log("t -->", this)
        // }
        // t()

        const t2 = () => {
            console.log("t2 -->", this)
        }
        t2()
    }
}

// obj.fn() // obj
// obj.fn2() // window
obj.sayHello()

9. 严格模式

JS 运行代码的模式有两种:正常模式和严格模式

  • 默认情况下代码都运行在正常模式中,在正常模式下,语法检查并不严格,原则是能不报错就尽量不报错
  • 严格模式禁止了一些语法,更容易报错,但也会提升性能
  • 在开发中应该尽量使用严格模式
相关推荐
止观止5 分钟前
深入探索 pnpm:高效磁盘利用与灵活的包管理解决方案
前端·pnpm·前端工程化·包管理器
whale fall5 分钟前
npm install安装的node_modules是什么
前端·npm·node.js
烛阴11 分钟前
简单入门Python装饰器
前端·python
袁煦丞1 小时前
数据库设计神器DrawDB:cpolar内网穿透实验室第595个成功挑战
前端·程序员·远程工作
天天扭码1 小时前
从图片到语音:我是如何用两大模型API打造沉浸式英语学习工具的
前端·人工智能·github
鱼樱前端2 小时前
今天介绍下最新更新的Vite7
前端·vue.js
coder_pig3 小时前
跟🤡杰哥一起学Flutter (三十四、玩转Flutter手势✋)
前端·flutter·harmonyos
万少3 小时前
01-自然壁纸实战教程-免费开放啦
前端
独立开阀者_FwtCoder3 小时前
【Augment】 Augment技巧之 Rewrite Prompt(重写提示) 有神奇的魔法
前端·javascript·github
yuki_uix3 小时前
AI辅助网页设计:从图片到代码的实践探索
前端