js入门(ES6)[五]---函数
代码哈士奇 129 2

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

什么是函数

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

基础函数

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

//调用函数
hello()

在这里插入图片描述

函数返回值return

返回一个值

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

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

在这里插入图片描述

中断函数的执行

如果不加return 是这样的

function hello() {
    console.log(1)

    console.log(2)
}
hello()

在这里插入图片描述

加return 执行了return 前面的

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

在这里插入图片描述 这里的return 什么都没有返回 如下

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

在这里插入图片描述

带参函数

一个带名参数

//传入参数 name
function hello(name) {
    console.log("hello " + name)
}

//相当然 让name = "小红"
hello("小红")

在这里插入图片描述

两个或多个参数

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

在这里插入图片描述

参数不确定怎么办?

不定参数

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

在这里插入图片描述

不定参数和带名参数一起

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

不定参数和一个带名参数

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

在这里插入图片描述

不定参数和多个带名参数

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

在这里插入图片描述

嵌套函数

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

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

function hello() {
    say()
}


hello()

在这里插入图片描述

对象内函数(方法)

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


hello.say()

在这里插入图片描述

箭头函数

基础写法

简化函数写法

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

hello()

在这里插入图片描述

带参数写法

一个参数

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

hello("小红")

在这里插入图片描述

两个或多个参数

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

hello("小红", 18)

在这里插入图片描述

不定参数

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


hello("小红", 18)

在这里插入图片描述

不定参数和带名参数一起

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

一个带名参数

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


hello(1234567890, "小红", 18)

在这里插入图片描述

多个带名参数

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


hello(1234567890, "太空", "小红", 18)

在这里插入图片描述

用法

先来看一个示例

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


helloOne.hello()
helloTwo.hello()

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

我们再来看下

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

在这里插入图片描述

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

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

在这里插入图片描述

预览图
评论区

索引目录