js入门(ES6)[五]---函数

╰+攻爆jí腚メ 2022-11-02 00:54 181阅读 0赞

> 推荐菜鸟es6教程  
> [https://www.runoob.com/w3cnote/es6-function.html][https_www.runoob.com_w3cnote_es6-function.html]  
> 本文中也穿插讲了 对象 如果不懂 请移步 [js入门(ES6)\[四\]—对象][js_ES6]

### 函数 ###

*  什么是函数
 *  基础函数
 *  函数返回值return
 *   *  返回一个值
     *  中断函数的执行
 *  带参函数
 *   *  一个带名参数
     *  两个或多个参数
     *  不定参数
     *  不定参数和带名参数一起
     *   *  不定参数和一个带名参数
         *  不定参数和多个带名参数
 *  嵌套函数
 *  对象内函数(方法)
 *  箭头函数
 *   *  基础写法
     *  带参数写法
     *   *  一个参数
         *  两个或多个参数
         *  不定参数
         *  不定参数和带名参数一起
         *   *  一个带名参数
             *  多个带名参数
     *  用法

# 什么是函数 #

其实就是把一些操作封装起来 方便多次使用 一般大公司会要求 函数不得超过 几行 超过就要再写个函数嵌套

# 基础函数 #

//写一个名为 hello的函数
    function hello(){ 
    	console.log("hello world!")
    }
    
    //调用函数
    hello()

![在这里插入图片描述][20210224213644409.png]

# 函数返回值return #

## 返回一个值 ##

这个值 可以接收 可以把方法看作一个值

function hello() { 
    	return "hello !"
    }
    var str = hello()
    console.log(hello())
    console.log(str)

![在这里插入图片描述][20210225154438814.png]

## 中断函数的执行 ##

如果不加return 是这样的

function hello() { 
    	console.log(1)
    
    	console.log(2)
    }
    hello()

![在这里插入图片描述][2021022515473451.png]

加return 执行了return 前面的

function hello() { 
    	console.log(1)
    	return;
    	console.log(2)
    }
    hello()

![在这里插入图片描述][20210225154828605.png]  
这里的return 什么都没有返回 如下

function hello() { 
    	return;
    }
    console.log(hello())

![在这里插入图片描述][20210225154927605.png]

# 带参函数 #

## 一个带名参数 ##

//传入参数 name
    function hello(name) { 
    	console.log("hello " + name)
    }
    
    //相当然 让name = "小红"
    hello("小红")

![在这里插入图片描述][20210224213941804.png]

## 两个或多个参数 ##

//传入参数 name old
    function hello(name, old) { 
    	console.log("hello " + name + "我今年" + old)
    }
    //相当然 让name = "小红" old=18
    hello("小红", 18)

![在这里插入图片描述][20210224214056616.png]

参数不确定怎么办？

## 不定参数 ##

// 不定参数 相当于传入的参数 传给theFun组成数组
    function hello(...theFun) { 
    	console.log(theFun)
    	console.log("hello " + theFun[0] + "我今年" + theFun[1])
    }
    //相当然 让theFun[0] = "小红" theFun[1]=18
    hello("小红", 18)

![在这里插入图片描述][2021022421464787.png]

## 不定参数和带名参数一起 ##

不定参数必须放最后一位 不定参数只能有一个 不然会报错  
![在这里插入图片描述][20210224215725758.png]

### 不定参数和一个带名参数 ###

function hello(phone, ...theFun) { 
    	console.log(theFun, phone)
    	console.log("hello " + theFun[0] + "我今年" + theFun[1] + "我手机号" + phone)
    }
    hello(12345678900, "小红", 18)

![在这里插入图片描述][20210224215612218.png]

### 不定参数和多个带名参数 ###

function hello(phone, address, ...theFun) { 
    	console.log(theFun, phone, address)
    	console.log("hello " + theFun[0] + "我今年" + theFun[1] + "我手机号" + phone + "住址" + address)
    }
    hello(12345678900, "太空", "小红", 18)

![在这里插入图片描述][20210224215936814.png]

# 嵌套函数 #

在一个函数中 调用另外一个函数

function say() { 
    	console.log("hello")
    }
    
    function hello() { 
    	say()
    }
    
    
    hello()

![在这里插入图片描述][20210225151654643.png]

# 对象内函数(方法) #

var hello = { 
    	"say": function() { 
    		console.log("hello")
    	}
    }
    
    
    hello.say()

![在这里插入图片描述][20210225151823975.png]

# 箭头函数 #

## 基础写法 ##

简化函数写法

var hello = () => { 
    	console.log("hello")
    }
    
    hello()

![在这里插入图片描述][20210224220245627.png]

## 带参数写法 ##

### 一个参数 ###

var hello = name => { 
    	console.log("hello" + name)
    }
    
    hello("小红")

![在这里插入图片描述][20210224220414626.png]

### 两个或多个参数 ###

var hello = (name, old) => { 
    	console.log("hello" + name + "old" + old)
    }
    
    hello("小红", 18)

![在这里插入图片描述][20210224220459834.png]

### 不定参数 ###

var hello = (...theFun) => { 
    	console.log(theFun)
    	console.log("hello" + theFun[0] + "old" + theFun[1])
    }
    
    
    hello("小红", 18)

![在这里插入图片描述][20210224220741268.png]

### 不定参数和带名参数一起 ###

不定参数必须放最后一位 不定参数只能有一个 不然会报错  
![在这里插入图片描述][20210224215725758.png]

#### 一个带名参数 ####

var hello = (phone, ...theFun) => { 
    	console.log(theFun)
    	console.log("hello" + theFun[0] + "old" + theFun[1] + "phone" + phone)
    }
    
    
    hello(1234567890, "小红", 18)

![在这里插入图片描述][20210224220830875.png]

#### 多个带名参数 ####

var hello = (phone, address, ...theFun) => { 
    	console.log(theFun)
    	console.log("hello" + theFun[0] + "old" + theFun[1] + "phone" + phone + "address" + address)
    }
    
    
    hello(1234567890, "太空", "小红", 18)

![在这里插入图片描述][20210224220919799.png]

## 用法 ##

先来看一个示例

var helloOne = { 
    	"a": 1,
    	"hello": function() { 
    		console.log(this)
    	}
    }
    var helloTwo = { 
    	"a": 1,
    	hello: () => { 
    		console.log(this)
    	}
    }
    
    
    helloOne.hello()
    helloTwo.hello()

可以发现 他们的this是不一样的 一个指向自己 一个指向 window  
![在这里插入图片描述][20210224221837560.png]

我们再来看下

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()

![在这里插入图片描述][20210224222200117.png]

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  
![在这里插入图片描述][20210224221951718.png]

所以 箭头函数使用场景 使用在想要调用 外部参数的时候

而非箭头函数想要引用外部参数怎么办呢  
使用一个参数引用this

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()

![在这里插入图片描述][20210224222323473.png]

[https_www.runoob.com_w3cnote_es6-function.html]: https://www.runoob.com/w3cnote/es6-function.html
[js_ES6]: https://dmhsq.blog.csdn.net/article/details/114045537
[20210224213644409.png]: /images/20221024/77de743c72784b24bd734a02be93004a.png
[20210225154438814.png]: /images/20221024/6f4a735d42c84bd392bdb2bb537892db.png
[2021022515473451.png]: /images/20221024/d30fe179ba0341c49b263981856d00d5.png
[20210225154828605.png]: /images/20221024/b50e5fef177445cebe07da99b5db07f0.png
[20210225154927605.png]: /images/20221024/4732c4fd6ffe4710886cd72b77f00805.png
[20210224213941804.png]: /images/20221024/68927de8e9bc413b8f203136c7f46b11.png
[20210224214056616.png]: /images/20221024/450a5c65bc204e5fa334e5bcc11ab439.png
[2021022421464787.png]: /images/20221024/8d6848ae7770416a97aec716c3c213fc.png
[20210224215725758.png]: /images/20221024/5bbe6ca8ef03406d8514586949481fc1.png
[20210224215612218.png]: /images/20221024/3e647d6cf544427485ebc0e54178e0ef.png
[20210224215936814.png]: /images/20221024/f76c22e02b01459caa52097d73ae0558.png
[20210225151654643.png]: /images/20221024/a7d7317b55e547f19f84e14801725f73.png
[20210225151823975.png]: /images/20221024/04c007bae2274292afaa319f00eb96a3.png
[20210224220245627.png]: /images/20221024/b7451680869b45e2bf62bb625f431e41.png
[20210224220414626.png]: /images/20221024/ecff67af167d471da58daa489fe2d48a.png
[20210224220459834.png]: /images/20221024/865d498d740d449eb758b5dc83f5de04.png
[20210224220741268.png]: /images/20221024/816b8123b4d24618a06fe9bd88f59f54.png
[20210224220830875.png]: /images/20221024/b64004076c2a41e696b5bc4af14af718.png
[20210224220919799.png]: /images/20221024/3d3fab1c9563424abdf7fb25e09474a5.png
[20210224221837560.png]: /images/20221024/e2af722d056641409b1b42a42936f303.png
[20210224222200117.png]: /images/20221024/92cde712b2384ab9b4fc60a71858f7c9.png
[20210224221951718.png]: /images/20221024/6d2c0115a04a413db1fcc13e1ef62e95.png
[20210224222323473.png]: /images/20221024/d85f7b52fd11436aa74d6af0e35d4568.png