當前位置：首頁 > 前端技术 > javascript >内容正文

javascript

JavaScript高级之函数进阶

發布時間：2024/7/5 javascript 33 豆豆

生活随笔收集整理的這篇文章主要介紹了 JavaScript高级之函数进阶小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

1. 函數的定義和調用

1.1 函數的定義方式

函數聲明方式 function 關鍵字 (命名函數)

函數表達式 (匿名函數)

new Function()

Function 里面參數都必須是字符串格式

第三種方式執行效率低，也不方便書寫，因此較少使用

所有函數都是 Function 的實例(對象)

函數也屬于對象

1.2 函數的調用方式

普通函數

對象的方法

構造函數

綁定事件函數

定時器函數

立即執行函數

2. this

2.1 函數內 this 的指向

這些 this 的指向，是當我們調用函數的時候確定的。調用方式的不同決定了this 的指向不同
一般指向我們的調用者.

<!DOCTYPE html> <html><head><meta charset="utf-8"><title></title></head><body><button type="button">點擊</button><script type="text/javascript">// 1. 普通函數function fn() {// 普通函數的this 指向 windowconsole.log('普通函數this:' + this)}window.fn()fn()fn.call()// 2. 對象的方法var o = {sayHi: function() {// this指向的是對象oconsole.log('對象的方法this:' + this)}}o.sayHi()// 3. 構造函數function Star() {// this指向ldh這個實例對象console.log('構造函數this:' + this)}Star.prototype.sing = function() {// this指向ldh這個實例對象console.log('構造函數原型對象里面的this:' + this)}var ldh = new Star()ldh.sing()// 4. 綁定事件函數var btn = document.querySelector('button')btn.onclick = function() {// this指向的是函數的調用者 btn 這個按鈕對象console.log('綁定點擊事件函數里面的this:' + this)} // 點擊了按鈕就可以調用這個函數// 5. 定時器函數setInterval(function() {// 定時器里面的this 指向windowconsole.log('定時器的this:' + this)}, 1000) // 這個函數是定時器自動1秒鐘調用1次// 6. 立即執行函數里面的this指向window;(function() {console.log('立即執行函數的this:' + this)})();</script></body> </html>

JavaScript 為我們專門提供了一些函數方法來幫我們更優雅的處理函數內部 this 的指向問題，常用的有 bind()、call()、apply() 三種方法。

call 方法
call() 方法調用一個對象。簡單理解為調用函數的方式，但是它可以改變函數的 this 指向。

2. apply 方法
apply() 方法調用一個函數。簡單理解為調用函數的方式，但是它可以改變函數的 this 指向。

3. bind 方法
bind() 方法不會調用函數。但是能改變函數內部this 指向

<!DOCTYPE html> <html><head><meta charset="utf-8"><title></title></head><body><button>點擊</button><script type="text/javascript">// 改變函數內this的指向，js提供了三種方法 call() apply() bind()// 1. call()/* var o = {name: 'zep'}function fn(a, b) {console.log(this)console.log(a + b)}// fn.call()fn.call(o, 1, 2)// call 第一個可以調用函數，第二個可以改變函數內的this的指向// call 的主要作用可以實現繼承function Father(uname, age, sex) {this.uname = unamethis.age = agethis.sex = sex}function Son(uname, age, sex) {Father.call(this, uname, age, sex)}var son = new Son('劉德華', '男', 18)console.log(son) *//* // 2. apply() var o = {name: 'zep'}function fn(arr) {console.log(this)console.log(arr)}fn.apply(o, ['pink'])// 1. 第一也是可以調用函數，第二可以改變函數內部的this指向// 2. 但是它的參數必須是數組（偽數組）// 3. apply的主要應用，比如說我們可以利用apply 借助于數學內置對象求最大小值var arr = [1, 88, 5, 111, 99, 23]// Math.max()var max = Math.max.apply(Math, arr)console.log(max) */// 3. bind() 綁定 var o = {name: 'zep'}function fn(a, b) {console.log(this)console.log(a + b)}var f = fn.bind(o, 1, 2)f()// 1. 不會調用原來的函數可以改變原來函數內部的this指向// 2. 返回的是原函數改變this之后產生的新函數// 3. 如果有的函數我們不需要立即調用，但是又想改變這個函數內部的this指向，此時使用bind// 4. 我們有一個按鈕，當我們點擊了之后，就禁用這個按鈕， 3秒鐘之后開啟這個按鈕var btn = document.querySelector('button')/* btn.onclick = function() {// 這里的this 指向的是btn這個按鈕this.disabled = truevar that = thissetTimeout(function() {that.disabled = false // 定時取函數里面的this 指向的是window對象}, 3000)} */btn.onclick = function() {// 這里的this 指向的是btn這個按鈕this.disabled = true// var that = thissetTimeout(function() {// that.disabled = false // 定時取函數里面的this 指向的是window對象this.disabled = false // 通過bind()改變了定時器函數內部的this的指向，此時this指向的是btn這個對象}.bind(this), 3000) // 這個this指向的是btn這個對象}</script></body> </html>

2.2 call apply bind 總結

相同點:
都可以改變函數內部的this指向.

區別點:

call 和 apply 會調用函數, 并且改變函數內部this指向.

call 和 apply 傳遞的參數不一樣, call 傳遞參數 aru1, aru2…形式 apply 必須數組形式[arg]

bind 不會調用函數, 可以改變函數內部this指向.

主要應用場景:

call 經常做繼承.

apply 經常跟數組有關系. 比如借助于數學對象實現數組最大值最小值

bind 不調用函數,但是還想改變this指向. 比如改變定時器內部的this指向.

3. 嚴格模式

3.1 什么是嚴格模式

JavaScript 除了提供正常模式外，還提供了嚴格模式（strict mode）。ES5 的嚴格模式是采用具有限制性 JavaScript 變體的一種方式，即在嚴格的條件下運行 JS 代碼。
嚴格模式在 IE10 以上版本的瀏覽器中才會被支持，舊版本瀏覽器中會被忽略。
嚴格模式對正常的 JavaScript 語義做了一些更改：
消除了 Javascript 語法的一些不合理、不嚴謹之處，減少了一些怪異行為。
消除代碼運行的一些不安全之處，保證代碼運行的安全。
提高編譯器效率，增加運行速度。
禁用了在 ECMAScript 的未來版本中可能會定義的一些語法，為未來新版本的 Javascript 做好鋪墊。比如一些保留字如：class, enum, export, extends, import, super 不能做變量名

3.2 開啟嚴格模式

嚴格模式可以應用到整個腳本或個別函數中。因此在使用時，我們可以將嚴格模式分為為腳本開啟嚴格模式和為函數開啟嚴格模式兩種情況。

為腳本開啟嚴格模式
為整個腳本文件開啟嚴格模式，需要在所有語句之前放一個特定語句“use strict”;（或‘use strict’;）。

有的 script 基本是嚴格模式，有的 script 腳本是正常模式，這樣不利于文件合并，所以可以將整個腳本文件放在一個立即執行的匿名函數之中。這樣獨立創建一個作用域而不影響其他 script 腳本文件。

為函數開啟嚴格模式
要給某個函數開啟嚴格模式，需要把“use strict”; (或 ‘use strict’; ) 聲明放在函數體所有語句之前。

3.3 嚴格模式中的變化

嚴格模式對 Javascript 的語法和行為，都做了一些改變。

1. 變量規定

在正常模式中，如果一個變量沒有聲明就賦值，默認是全局變量。嚴格模式禁止這種用法，變量都必須先用var 命令聲明，然后再使用。

嚴禁刪除已經聲明變量。例如，delete x; 語法是錯誤的。

2. 嚴格模式下 this 指向問題

以前在全局作用域函數中的 this 指向 window 對象。

嚴格模式下全局作用域中函數中的 this 是 undefined。

以前構造函數時不加 new也可以調用,當普通函數，this 指向全局對象

嚴格模式下,如果構造函數不加new調用, this 指向的是undefined 如果給他賦值則會報錯

new 實例化的構造函數指向創建的對象實例。

定時器 this 還是指向 window 。

事件、對象還是指向調用者。

3. 函數變化

函數不能有重名的參數。

函數必須聲明在頂層.新版本的 JavaScript 會引入“塊級作用域”（ ES6 中已引入）。為了與新版本接軌，不允許在非函數的代碼塊內聲明函數。

更多嚴格模式要求參考：https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Strict_mode

4. 高階函數

高階函數是對其他函數進行操作的函數，它接收函數作為參數或將函數作為返回值輸出。

此時fn 就是一個高階函數
函數也是一種數據類型，同樣可以作為參數，傳遞給另外一個參數使用。最典型的就是作為回調函數。
同理函數也可以作為返回值傳遞回來

5. 閉包

5.1 變量作用域

變量根據作用域的不同分為兩種：全局變量和局部變量。

函數內部可以使用全局變量。

函數外部不可以使用局部變量。

當函數執行完畢，本作用域內的局部變量會銷毀。

5.2 什么是閉包

閉包（closure）指有權訪問另一個函數作用域中變量的函數。 ----- JavaScript 高級程序設計
簡單理解就是，一個作用域可以訪問另外一個函數內部的局部變量。

5.3 在 chrome 中調試閉包

打開瀏覽器，按 F12 鍵啟動 chrome 調試工具。

設置斷點。

找到 Scope 選項（Scope 作用域的意思）。

當我們重新刷新頁面，會進入斷點調試，Scope 里面會有兩個參數（global 全局作用域、local 局部作用域）。

當執行到 fn2() 時，Scope 里面會多一個 Closure 參數，這就表明產生了閉包。

5.4 閉包的作用

5.5 閉包案例

循環注冊點擊事件。

2. 循環中的 setTimeout()。

計算打車價格。

5.6 閉包總結

閉包是什么？
閉包是一個函數（一個作用域可以訪問另外一個函數的局部變量）

閉包的作用是什么？
延伸變量的作用范圍

6. 遞歸

6.1 什么是遞歸？

如果一個函數在內部可以調用其本身，那么這個函數就是遞歸函數。
簡單理解:函數內部自己調用自己, 這個函數就是遞歸函數
遞歸函數的作用和循環效果一樣
由于遞歸很容易發生“棧溢出”錯誤（stack overflow），所以必須要加退出條件 return。

6.2 利用遞歸求數學題

求 1 * 2 *3 … * n 階乘。

求斐波那契數列。

根據id返回對應的數據對象

6.3 利用遞歸求:根據id返回對應的數據對象

6.4 淺拷貝和深拷貝

淺拷貝只是拷貝一層, 更深層次對象級別的只拷貝引用.
深拷貝拷貝多層, 每一級別的數據都會拷貝.
Object.assign(target, …sources) es6 新增方法可以淺拷貝

<!DOCTYPE html> <html><head><meta charset="utf-8"><title></title></head><body><script type="text/javascript">// 淺拷貝只是拷貝一層, 更深層次對象級別的只拷貝引用.// 深拷貝拷貝多層, 每一級別的數據都會拷貝var obj = {id: 1,name: 'zep',msg: {age: 18}}var o = {}// 淺拷貝實現方式1：/* for(var k in obj) {// k 是屬性名， obj[k]是屬性值o[k] = obj[k]}console.log(o)o.msg.age = 20console.log(obj) */console.log('-------------------')// 淺拷貝實現方式2：Object.assign(o, obj) // 把obj拷貝給oconsole.log(o)o.msg.age = 20o.name = 'zzzz'console.log(obj)</script></body> </html>

淺拷貝中：修改拷貝之后的對象 o，也會影響到obj對象，因為淺拷貝只是拷貝一層, 更深層次對象級別的只拷貝引用

<!DOCTYPE html> <html><head><meta charset="utf-8"><title></title></head><body><script type="text/javascript">// 淺拷貝只是拷貝一層, 更深層次對象級別的只拷貝引用.// 深拷貝拷貝多層, 每一級別的數據都會拷貝// var obj = {// id: 1,// name: 'zep',// msg: {// age: 18// },// color: ['pink', 'red', 'blue']// }// var o = {}// 淺拷貝實現方式1：/* for(var k in obj) {// k 是屬性名， obj[k]是屬性值o[k] = obj[k]}console.log(o)o.msg.age = 20console.log(obj) */console.log('-------------------')// 淺拷貝實現方式2：/* Object.assign(o, obj) // 把obj拷貝給oconsole.log(o)o.msg.age = 20o.name = 'zzzz'console.log(obj) */console.log('-------------------')// 深拷貝var obj = {id: 1,name: 'zep',msg: {age: 18},color: ['pink', 'red', 'blue']}var o = {}// 封裝函數function deepCopy(newobj, oldobj) {for(var k in oldobj) {// 判斷屬性值屬于哪種數據類型// 1. 獲取屬性值 oldobj[k]var item = oldobj[k]// 2. 判斷這個值是否是數組if(item instanceof Array) {newobj[k] = []deepCopy(newobj[k], item)}else if(item instanceof Object) {// 3. 判斷這個值是否是對象newobj[k] = {}deepCopy(newobj[k], item)}else {// 4. 屬于簡單數據類型newobj[k] = item}}}deepCopy(o, obj)console.log(o)for(var e in obj.color) {console.log(obj.color[e])}</script></body> </html>

總結

以上是生活随笔為你收集整理的JavaScript高级之函数进阶的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇：四、数据预处理——处理连续型特征：二值化
下一篇： JS高级——JSON、数据存储学习笔记