前言
面向工作的深入解析
什么是函數(shù)
由一個或者多個語句組成的用來處理特定任務(wù)的程序，相對獨(dú)立，聽起來很像是函數(shù)吧，但是函數(shù)只是子程序的一種類型。
子程序分為三種：函數(shù)、過程、方法
函數(shù)是其中一種，剩下兩種分別是過程和方法
函數(shù)
最顯著的特點(diǎn)就是具有返回值，那么可能會有人說了，我在js中寫一個函數(shù)我不return不就沒有返回值了嗎，但實(shí)際上你不return，js會自動幫你return undefined，也就是說在js中函數(shù)必定有返回值
過程
過程實(shí)際上就是沒有返回值的函數(shù)，又因?yàn)樵趈s中不存在沒有返回值的函數(shù)，因此js中不存在過程
在js中只有函數(shù)和方法
在js當(dāng)中只有函數(shù)和方法，沒有過程這個概念！因?yàn)閖s所有的函數(shù)都有返回值！??！
看如下的代碼：
function fn() { //函數(shù)
console.log('x');
}
const a = fn() //undefined
var obj = {
fn: fn //方法
}
函數(shù)和過程的區(qū)別
如果一個子程序有返回值他就是函數(shù)，如果這個子程序沒有返回值，就叫做過程，它就是走一個過程，沒有任何的返回
方法
與函數(shù)、過程的區(qū)別就是，方法一般存在于類和對象中(可能也是因?yàn)檫@樣，Java朋友總是和我杠說我把方法讀成函數(shù)了)
在對象或者類中
如果一個子程序存在一個對象或者一個類中，它就叫做方法。
函數(shù)的返回值由什么確定？
前面說到在js中，函數(shù)永遠(yuǎn)都有返回值，那么函數(shù)的返回值又是由什么去確定的呢?
影響因素
-
調(diào)用時輸入的參數(shù) params -
定義時的環(huán)境env
let x = 'x'
let a = '1'
function f1(x) {
return x + a
}
{
let a = '2'
f1('x') //輸出的結(jié)果是什么？
}
解析：在上面的聲明中 ，聲明了f1這個函數(shù)的作用就是返回 x+a 的值。下面的括號中的就是一個獨(dú)立的作用域。在這個作用域中，傳入一個 x ，調(diào)用這個f1函數(shù)，這里面的x是 'x' ,但是這里的a是誰？是下面的2呢？還是上面的1？
在上面說過函數(shù)的影響因素，其中x是參數(shù)，所以這個x是可以確定的，就是f1傳入的參數(shù)，但是這里面的a不確定，因此就看因素2，判斷這個a是什么環(huán)境的，這里面的a是聲明的那邊，因此a的值是1 最后的結(jié)果就是return x+1 結(jié)果就是x1。因?yàn)閒1調(diào)用時候內(nèi)部沒有變量a，應(yīng)該取外部的a，那么外部的a最近的就是let a = '2'了。
下面在加上一個 a=3呢?
let x = 'x'
let a = '1'
function f1(x) {
return x + a
}
a='3'；
{
let a = '2'
f1('x') //輸出的結(jié)果是什么？
}
結(jié)果就是x3
道理同上，不同的是在執(zhí)行到下面的塊作用域的時候，a由1 變成了a=3
再比如加上a=4呢
let x = 'x'
let a = '1'
function f1(x) {
return x + a
}
a='3'；
{
let a = '2'外面的變量，那么這個函數(shù) + 這些變量 = 閉包
f1('x') //輸出的結(jié)果是什么？
}
a='4'
結(jié)果還是x3，為什么？因?yàn)閳?zhí)行完塊作用域的時候，a=4 還沒有執(zhí)行。
看另一個題目
let x = 'x'
let a = '1'
function f1(c) {
c()
}
{
let a = '2'
function f2() {
console.log(x + a);
}
f1(f2) //打印什么？？？
}
解析：
這里面的函數(shù)f1 就是接受一個函數(shù)調(diào)用一個函數(shù)。然后下面就是獨(dú)立的塊作用域，這里面的函數(shù)f2 就是打印x+a，最后一句語句f1(f2),將f2作為參數(shù)傳到f1里面，這時候f2 調(diào)用了，之后打印出來的x+a的值是多少？
函數(shù)f2里面沒有傳進(jìn)來參數(shù)，所以x和a都不是參數(shù)，那么這時候看函數(shù)的影響因素就是定義了。這時候根據(jù)上下文來看 x就是x，a就是這個作用域當(dāng)中的2，最后的結(jié)果就是x2
閉包
-
閉包的定義
- 如果在函數(shù)里面可以訪問到外面的變量，那么這個函數(shù)+這些變量=閉包
- 閉包問題本質(zhì)上是作用域問題
閉包+時間
這道題的答案讓人很費(fèi)解，結(jié)果就是6個6，知道為什么嗎？？？
for (var i = 0; i < 6; i++) {
setTimeout(() => {
console.log(i) //箭頭函數(shù)訪問了 i
})
}
因?yàn)?個函數(shù)共用一個 i
修改，將var改為let
for (let i = 0; i < 6; i++) {
setTimeout(() => {
console.log(i) //箭頭函數(shù)訪問了 i
})
}
為每個函數(shù)分配一個 i ，打印0 1 2 3 4 5
這道題類似于
let x = 'x'
let a = '1'
function f1(x) {
return x + a
}
f1()
a='3'；
如果這道題搞不清楚就想想 刻舟求劍。
另一種寫法，使用立即執(zhí)行函數(shù)
for (var i = 0; i < 6; i++) {
!function (j) {
setTimeout(() => {
console.log(j) //箭頭函數(shù)訪問了 i
})
}(i)
}
為什么這樣可以解決，因?yàn)槊恳粋€函數(shù)都是一個獨(dú)立的作用域。
結(jié)論
閉包的特點(diǎn)
- 能讓一個函數(shù)維持住一個變量
- 但不能維持這個變量的值
- 尤其是變量的值會變化的時候
function f1() {
const obj = {a: 1};
return function f2() {
return obj
}
}
const b = f1()();
console.log(b); // 輸出的結(jié)果為: { a: 1 }
-
優(yōu)缺點(diǎn)：
- 優(yōu)點(diǎn): 可以在外部對函數(shù)內(nèi)部的變量進(jìn)行訪問
-缺點(diǎn): 返回出來的變量，例如上面例子中的{ a: 1 }，是被保留在內(nèi)存中的，如果不及時清空的話會造成內(nèi)存泄漏和性能問題。
- 優(yōu)點(diǎn): 可以在外部對函數(shù)內(nèi)部的變量進(jìn)行訪問
對象是窮人的閉包
- 對象也可以來維持住一個變量
- 如果一門語言不支持閉包，你可以用對象代理
閉包是窮人的對象
- 如果一門語言不支持對象，你可以用閉包代理
如何理解上面的話
var obj = {
i: 0,
function() {
console.log(this.i)
}
}
const handle = function () {
var i = 0;
return function () {
console.log(i)
}
}
雖然這上面的兩段代碼用到的技術(shù)不一樣，一個是對象屬性，一個是函數(shù)里面的閉包，然后為同一個函數(shù)，但是它們都做到了同一個目的，就是把一個變量給維持住，不讓其他的人直接操作。當(dāng)然這個也可以操作，我們可以通過私有的來操作
所以上面的這兩段代碼就表示了，如果一個語言不支持閉包，怎么辦就用對象來操作。
反過來也亦然。
看下面的代碼，如果要產(chǎn)生兩個屬性 age 和 name ，但是只能有函數(shù)，不能有對象，怎么做？
function createPerson(age, name) {
return function (key) {
if (key === 'name') return name;
if (key === 'age') return age;
}
}
var person = createPerson(18, '小紅');
person('name'); //小紅
person('age'); //18
所以這就是解釋了什么叫做閉包是窮人的對象，就是你發(fā)現(xiàn)一個語言沒有對象，就可以用閉包來實(shí)現(xiàn)代替對象。
