函数长啥样？

把一些要重复使用的内容封装到函数内。

function foo(title) {console.log(title)
}
foo('title')
foo('dust')
foo('hello')

运行结果：

用对象把函数装起来

let user = {name: null,setUsername: function (name) {this.name = name},getUsername: function () {return this.name},
}
user.setUsername('dust')
console.log(user.getUsername())

运行结果：

简写的形式：

let user = {name: null,setUsername(name) {this.name = name},getUsername() {return this.name},
}

匿名函数与函数提升

没名字的函数：匿名函数
匿名函数是不会提升的，在函数前执行是不行的~

let foo = function () {console.log('hello')
}

有名字的函数：具名函数
虽然程序是从上到下解析的，但是它函数提升啦！
变量提升：你把它想象在全文最上方就好。
所以可以正常执行

show()
function show() {console.log('show')
}

运行结果：

箭头函数

function sum(...args) {return args.reduce((a, b) => {return a + b})
}
console.log(sum(1, 2, 3, 4, 5))

运行结果：

形参和实参

function sum(a, b, c) {//这里是形参console.log(c)return a + b
}
console.log(sum(1, 2)) //这里是实参

运行结果：

当实参多了的时候，会被忽略。
当形参多了的时候，会被定义但未赋值，所以是undefined

默认参数

解决实参缺少的问题

function sum2(a, b = 1) {return a + b
}
console.log(sum2(1))

运行结果：

函数作为参数

以setInterval为例

let i = 0
setInterval(() => {console.log(++i)
}, 1000)

功能：每秒输出+1的数
运行结果：

Arguments的使用

在js中，传入的参数可以在Arguments中看见（这点非常有意思喔）

function getSum(...args) {console.log(arguments)return args.reduce((a, b) => a + b)
}
console.log(getSum(1, 2, 3, 4, 5))

运行结果：

回调函数

test.html
回调函数在DOM操作里的体现
回调函数是一个函数在参数里，就是在其他函数里又调用了一个函数。

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title></head><body><button id="bt">hello</button></body><script>document.getElementById('bt').addEventListener('click', function () {alert(this.innerHTML)})</script>
</html>

this指针的改变

在map()里通过传入this以改变this的指向
不传入this的情况：

let Lesson = {site: 'hd',lists: ['js', 'css', 'mysql'],show: function () {return this.lists.map(function (value) {return `${this.site}-${value}`})},
}
console.log(Lesson.show())

运行结果：

由于没有传入外部的this，在lists里没有site这个属性，所以是undefined
如果我们传入this：

let Lesson = {site: 'hd',lists: ['js', 'css', 'mysql'],show: function () {return this.lists.map(function (value) {return `${this.site}-${value}`}, this)},
}
console.log(Lesson.show())

运行结果：

就成功将this指针指向了Lesson里的内容。

[JavaScript] 探索JS中的函数秘密相关推荐

JS中Promise函数then的奥秘探究
JS中Promise函数then的奥秘探究 Promise概述 Promise对象是CommonJS工作组提出的一种规范,目的是为异步操作提供统一接口. 那么,什么是Promises? 首先,它是一个 ...
JS中的函数,Array对象,for-in语句,with语句,自定义对象,Prototype
一)函数 A)JS中的函数的定义格式: function add(a,b) { var sum = a+b; document.write("两个数的和是:" + sum); // ...
JS中的函数声明和函数表达式
JS中的函数声明和函数表达式 1. 函数声明定义一个具有指定参数的函数函数声明提升, 函数声明在JS解析时进行函数提升,因此在同一个作用域内,不管函数声明在哪里定义,该函数都可以进行调用 hoist ...
Js中匿名函数的理解
目录 1.js中匿名函数的N种写法最常见的用法: 2.JavaScript 匿名函数及闭包 2.1 匿名函数 2.1.1 函数的定义 2.1.2 匿名函数的创建 2.2 闭包 2.3 举例 2.4 ...
JS OOP -02 深入认识JS中的函数
深入认识JS中的函数: 1.概述,认识函数对象 2.函数对象和其他内部对象的关系 3.将函数作为参数传递 4.传递给函数的隐含参数:arguments 5.函数的apply,call方法和length ...
java js中 function函数报错_浅析JS中对函数function的理解(基础篇)
正文:我们知道,在js中,函数实际上是一个对象,每个函数都是Function类型的实例,并且都与其他引用类型一样具有属性和方法.因此,函数名实际上是指向函数对象的指针,不与某个函数绑定.在常见的两种定 ...
js中trim函数_30天中的30个Excel函数：03 – TRIM
js中trim函数 Yesterday, in the 30XL30D challenge, we took a poke at the lazy brother-in-law function -- ...
谈谈JS中的函数劫持
说到劫持,第一反应可能是什么不好的东西.函数劫持并不邪恶,关键是看使用的人.虽然这个概念在前端领域使用较少,但是在安全领域.自定义业务等场景下还是有一定的使用价值的.所以,这一篇文章将会和大家一起去了 ...
JS中的函数概念和C语言的概念是类似的,c语言和JavaScript的区别有哪些？
c语言和JavaScript在语法结构上有很多相似(例如if条件语句.while循环.switch语句.do-while循环等),那么它们之间有什么不同?下面本篇文章就来给大家介绍一下c语言和Java ...

[JavaScript] 探索JS中的函数秘密

函数长啥样？

把一些要重复使用的内容封装到函数内。

用对象把函数装起来

匿名函数与函数提升

箭头函数

形参和实参

默认参数

函数作为参数

Arguments的使用

回调函数

this指针的改变

[JavaScript] 探索JS中的函数秘密相关推荐

最新文章

热门文章