推荐菜鸟es6教程 https://www.runoob.com/w3cnote/es6-function.html 本文中也穿插讲了 对象 如果不懂 请移步 js入门(ES6)[四]—对象
函数
- 什么是函数
- 基础函数
- 函数返回值return
-
- 返回一个值
- 中断函数的执行
- 带参函数
-
- 一个带名参数
- 两个或多个参数
- 不定参数
- 不定参数和带名参数一起
-
- 不定参数和一个带名参数
- 不定参数和多个带名参数
- 嵌套函数
- 对象内函数(方法)
- 箭头函数
-
- 基础写法
- 带参数写法
-
- 一个参数
- 两个或多个参数
- 不定参数
- 不定参数和带名参数一起
-
- 一个带名参数
- 多个带名参数
- 用法
什么是函数
其实就是把一些操作封装起来 方便多次使用 一般大公司会要求 函数不得超过 几行 超过就要再写个函数嵌套
基础函数
代码语言:javascript复制//写一个名为 hello的函数
function hello(){
console.log("hello world!")
}
//调用函数
hello()
函数返回值return
返回一个值
这个值 可以接收 可以把方法看作一个值
代码语言:javascript复制function hello() {
return "hello !"
}
var str = hello()
console.log(hello())
console.log(str)
中断函数的执行
如果不加return 是这样的
代码语言:javascript复制function hello() {
console.log(1)
console.log(2)
}
hello()
加return 执行了return 前面的
代码语言:javascript复制function hello() {
console.log(1)
return;
console.log(2)
}
hello()
这里的return 什么都没有返回 如下
代码语言:javascript复制function hello() {
return;
}
console.log(hello())
带参函数
一个带名参数
代码语言:javascript复制//传入参数 name
function hello(name) {
console.log("hello " name)
}
//相当然 让name = "小红"
hello("小红")
两个或多个参数
代码语言:javascript复制//传入参数 name old
function hello(name, old) {
console.log("hello " name "我今年" old)
}
//相当然 让name = "小红" old=18
hello("小红", 18)
参数不确定怎么办?
不定参数
代码语言:javascript复制// 不定参数 相当于传入的参数 传给theFun组成数组
function hello(...theFun) {
console.log(theFun)
console.log("hello " theFun[0] "我今年" theFun[1])
}
//相当然 让theFun[0] = "小红" theFun[1]=18
hello("小红", 18)
不定参数和带名参数一起
不定参数必须放最后一位 不定参数只能有一个 不然会报错
不定参数和一个带名参数
代码语言:javascript复制function hello(phone, ...theFun) {
console.log(theFun, phone)
console.log("hello " theFun[0] "我今年" theFun[1] "我手机号" phone)
}
hello(12345678900, "小红", 18)
不定参数和多个带名参数
代码语言:javascript复制function hello(phone, address, ...theFun) {
console.log(theFun, phone, address)
console.log("hello " theFun[0] "我今年" theFun[1] "我手机号" phone "住址" address)
}
hello(12345678900, "太空", "小红", 18)
嵌套函数
在一个函数中 调用另外一个函数
代码语言:javascript复制function say() {
console.log("hello")
}
function hello() {
say()
}
hello()
对象内函数(方法)
代码语言:javascript复制var hello = {
"say": function() {
console.log("hello")
}
}
hello.say()
箭头函数
基础写法
简化函数写法
代码语言:javascript复制var hello = () => {
console.log("hello")
}
hello()
带参数写法
一个参数
代码语言:javascript复制var hello = name => {
console.log("hello" name)
}
hello("小红")
两个或多个参数
代码语言:javascript复制var hello = (name, old) => {
console.log("hello" name "old" old)
}
hello("小红", 18)
不定参数
代码语言:javascript复制var hello = (...theFun) => {
console.log(theFun)
console.log("hello" theFun[0] "old" theFun[1])
}
hello("小红", 18)
不定参数和带名参数一起
不定参数必须放最后一位 不定参数只能有一个 不然会报错
一个带名参数
代码语言:javascript复制var hello = (phone, ...theFun) => {
console.log(theFun)
console.log("hello" theFun[0] "old" theFun[1] "phone" phone)
}
hello(1234567890, "小红", 18)
多个带名参数
代码语言:javascript复制var hello = (phone, address, ...theFun) => {
console.log(theFun)
console.log("hello" theFun[0] "old" theFun[1] "phone" phone "address" address)
}
hello(1234567890, "太空", "小红", 18)
用法
先来看一个示例
代码语言:javascript复制var helloOne = {
"a": 1,
"hello": function() {
console.log(this)
}
}
var helloTwo = {
"a": 1,
hello: () => {
console.log(this)
}
}
helloOne.hello()
helloTwo.hello()
可以发现 他们的this是不一样的 一个指向自己 一个指向 window
我们再来看下
代码语言:javascript复制var a = 2;
var helloOne = {
"a": 1,
"hello": function() {
console.log(this.a)
}
}
var helloTwo = {
"a": 1,
hello: () => {
console.log(this.a)
}
}
helloOne.hello()
helloTwo.hello()
代码语言:javascript复制console.log(this)
var helloOne = {
"a": 1,
"hello": function() {
console.log(this)
}
}
var helloTwo = {
"a": 1,
hello: () => {
console.log(this)
}
}
helloOne.hello()
helloTwo.hello()
可以发现 箭头函数内部的this是和外部的this一样的 都是window
所以 箭头函数使用场景 使用在想要调用 外部参数的时候
而非箭头函数想要引用外部参数怎么办呢
使用一个参数引用this
代码语言:javascript复制var a = 2;
let vm = this;
var helloOne = {
"a": 1,
"hello": function() {
console.log(vm.a)
}
}
var helloTwo = {
"a": 1,
hello: () => {
console.log(this.a)
}
}
helloOne.hello()
helloTwo.hello()
代码语言:javascript复制