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

最新推荐文章于 2024-04-18 09:55:29 发布

CN-Dust

最新推荐文章于 2024-04-18 09:55:29 发布

阅读量117

点赞数

分类专栏： js 前端学习文章标签： javascript node.js html5

本文链接：https://blog.csdn.net/qq_36286039/article/details/120470138

版权

前端学习同时被 2 个专栏收录

83 篇文章 1 订阅

订阅专栏

26 篇文章 0 订阅

订阅专栏

函数长啥样？

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

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里的内容。

CN-Dust

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
[JavaScript] 探索JS中的函数秘密

函数长啥样？把一些要重复使用的内容封装到函数内。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 thi
复制链接

扫一扫