Ashun's 技術駅 Ashun's 技術駅
首页
  • 前端文章

    • JavaScript
  • 学习笔记

    • 《JavaScript教程》
    • 《JavaScript高级程序设计》
    • 《ES6 教程》
    • 《Vue》
    • 《React》
    • 《TypeScript 从零实现 axios》
    • 《Git》
    • TypeScript
    • JS设计模式总结
  • HTML
  • CSS
  • Vue
  • 现代web布局
  • React
  • 技术文档
  • GitHub技巧
  • Nodejs
  • 博客搭建
  • 技术资源
  • 第一阶段

    • HTML
  • 第二阶段

    • JavaScript
  • 第三阶段

    • Vue
  • 第四阶段

    • 实战项目
  • 每周测试

    • 每周
  • 其他

    • Vue引入UI框架
    • Web前端面试
    • Vue3-resource
  • 学习
  • 面试
  • 心情杂货
  • 实用技巧
  • 福利资源
  • 友情链接
关于
收藏
  • 分类
  • 标签
  • 归档
GitHub (opens new window)

Ashun

前端界的小学生
首页
  • 前端文章

    • JavaScript
  • 学习笔记

    • 《JavaScript教程》
    • 《JavaScript高级程序设计》
    • 《ES6 教程》
    • 《Vue》
    • 《React》
    • 《TypeScript 从零实现 axios》
    • 《Git》
    • TypeScript
    • JS设计模式总结
  • HTML
  • CSS
  • Vue
  • 现代web布局
  • React
  • 技术文档
  • GitHub技巧
  • Nodejs
  • 博客搭建
  • 技术资源
  • 第一阶段

    • HTML
  • 第二阶段

    • JavaScript
  • 第三阶段

    • Vue
  • 第四阶段

    • 实战项目
  • 每周测试

    • 每周
  • 其他

    • Vue引入UI框架
    • Web前端面试
    • Vue3-resource
  • 学习
  • 面试
  • 心情杂货
  • 实用技巧
  • 福利资源
  • 友情链接
关于
收藏
  • 分类
  • 标签
  • 归档
GitHub (opens new window)
  • 01变量
  • 02常量
  • 03js数据类型
  • 04运算、判断、条件
  • 05数字类型
  • 06字符串
  • 07布尔值
  • 08空值
  • 09未定义
  • 10唯一值
  • 11对象
  • 13数组
  • 14函数
    • 函数
    • 函数的创建方式
      • 1、一个叫fn的函数
      • 2、一个函数然后赋值给fn
      • 3、一个匿名函数
      • 4、一个匿名函数
    • 函数的属性
      • 属性
      • 属性转数组
    • 关键字
    • 函数复用性
    • 作用域
      • 1、没有声明就是上面的a
      • 2、声明之后跟上面的a没有关系
    • 闭包特性
      • 加强记忆、
  • 15日期对象
  • 16正则表达式
  • 17异常错误对象
  • 18BOM 浏览器对象模型
  • 19DOM文档对象模型
  • 20json
  • 21Ajax
  • 22jQuery
  • 23函数进阶
  • 24面向对象
  • 《javascript(es5)》
ashun
2022-02-14
目录

14函数

# 函数

# 函数的创建方式

长方形的面积 = 长 * 宽 //形式参数

50 = 10 * 5 //实际参数

function fn(形参){执行的内容}
1

# 1、一个叫fn的函数

function fn(a, b) {
    console.log(a * b);
}
fn(10, 5) //50=10*5
1
2
3
4

# 2、一个函数然后赋值给fn

var fn = function (a, b) {
    console.log(a * b);
}
fn(10, 5) //50=10*5
1
2
3
4

# 3、一个匿名函数

(function (a, b) {
    console.log(a * b);
})(10, 5) //50=10*5
1
2
3

# 4、一个匿名函数

!function (a, b) {
    console.log(a * b);
}(10, 5) //50=10*5
1
2
3

# 函数的属性

# 属性

function fn() {
    console.log(arguments);
}
fn(1, 2, 3, 4, 5)//[1, 2, 3, 4, 5, callee: ƒ, Symbol(Symbol.iterator): ƒ]
1
2
3
4

# 属性转数组

function fn() {
    console.log([...arguments]);
}
fn(1, 2, 3, 4, 5)//[1, 2, 3, 4, 5]
1
2
3
4

# 关键字

function fn(a, b) {
    console.log(this)//当前所在的作用域对象window
    return//返回值
}
fn(1, 2)
// {window: Window, self: Window, document: document, name: "", location: Location, …}
1
2
3
4
5
6
function fn(a, b) {
    return a * b
}
console.log(fn(10, 5)); //50=10*5
1
2
3
4

# 函数复用性

function fn(a, b) {
    return a * b
}
fn(10, 5)
fn(20, 10)
1
2
3
4
5

# 作用域

局部作用域可以访问全局作用域

但是全局作用域正常情况下访问不了局部作用域

例如:你在外面想看别人家洗澡是看不到了。哪里面的人就可以看的了外咯

var a = 1//在函数外声明的变量称为全局作用域

function fn(){
	var a = 2//在函数里面声明的变量称为局部作用域
}
1
2
3
4
5
var a = 1//全局变量
function fn() {
    console.log(a);//可以打印
}
fn()


function fn() {
    var a = 1//局部变量
    }
fn()
console.log(a);//不可以打印

// 总结:函数里面可以访问函数外面,但是反过来不行
1
2
3
4
5
6
7
8
9
10
11
12
13
14

# 1、没有声明就是上面的a

var a = 1
function fn1() {
    a = 2 //没有声明就是上面的a
}
fn1()
console.log(a);//2
1
2
3
4
5
6

# 2、声明之后跟上面的a没有关系

var a = 1
function fn1() {
    var a = 2//声明之后跟上面的a没有关系
    }
fn1()
console.log(a);//1
1
2
3
4
5
6
var a = 1
function fn1() {
    console.log(a);//undefined
    var a = 2
    console.log(a);//2
}
fn1()
console.log(a);//1
1
2
3
4
5
6
7
8

# 闭包特性

函数闭包

闭包可以访问其他函数的作用域的数据,这个函数就被称为闭包

闭包实际上并没有让变量累加,累加靠的是垃圾回收机机制没有回收变量数据

闭包有什么用

1、获取局部变量的值

2、避免全局变量污染

3、用来做类的私有属性

function fn() {
    var a = 1;
    return function fn2() {
        //这个是闭包
        console.log(++a);
    };
}
var afn = fn();
afn(); //2
afn(); //3
1
2
3
4
5
6
7
8
9
10

# 加强记忆、

function fn() {
    var a = 1
    return function fn2() {//这个是闭包
        var b = 1
        return function fn3() {//这个是闭包
            console.log(++b);
        }
    }
}
var afn = fn()() //实际这里就多加的括号
afn()//2
afn()//3
1
2
3
4
5
6
7
8
9
10
11
12
//闭包
//闭包在使用的时候,能暂时性的存储数据到内存里面,如果是低版本浏览器(ie5-ie7)
//就会出现内存泄漏问题,导致越来越卡,而新版本的浏览器比如chrome就不会有这种问题
function fn(){
  let a = 1
  function fn2(){
    return ++a
  }
  return fn2
}
let f = fn()
console.log(f())//2
console.log(f())//3
console.log(f())//4
1
2
3
4
5
6
7
8
9
10
11
12
13
14
编辑 (opens new window)
上次更新: 2022/04/24, 13:33:34
13数组
15日期对象

← 13数组 15日期对象→

最近更新
01
课件-react路由-V6
01-22
02
课件-国际化
01-22
03
课件-redux-toolkit
01-22
更多文章>
Theme by Vdoing | Copyright © 2019-2024 Evan Xu | MIT License
  • 跟随系统
  • 浅色模式
  • 深色模式
  • 阅读模式