[JavaScript] 探索JS中的函数秘密
生活随笔
收集整理的這篇文章主要介紹了
[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 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里的內容。
總結
以上是生活随笔為你收集整理的[JavaScript] 探索JS中的函数秘密的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 厕所装修多少钱啊？
- 下一篇： [JS] 事件冒泡，阻止事件冒泡，事件的