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

2021-10-25 11:29:51 浏览数 (1)

推荐菜鸟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复制

0 人点赞