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

javascript

JS 高级（继承、函数）

發布時間：2024/1/18 javascript 34 豆豆

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

JS 高級

繼承

構造函數繼承

拷貝繼承（for - in）

另一種繼承方式：原型繼承

函數

函數進階 - 函數的定義方式

函數聲明
- // 函數的定義方式：聲明式function foo() {}
函數表達式
- // 字面量方式：表達式var foo = function () {};
函數聲明與函數表達式的區別
- 函數聲明必須要有名字
- 函數聲明會函數提升，在預解析創建就已創建，聲明前后都可以調用
- 函數表達式類似于變量賦值
- 函數表達式可以沒有名字，例如匿名函數
- 函數表達式沒有變量提升，在執行階段創建，必須在表達式執行之后才可以調用
  <script>// 函數的定義方式：聲明式變量提升function foo() {}// 字面量方式：表達式// 沒有變量提升// foo() 會報錯var foo = function () {};</script>

函數進階 - 函數的調用方式

普通函數
構造函數
對象方法

函數進階 - 函數內 this 指向的不同場景

函數的調用方式決定了 “this” 指向的不同：

調用方式非嚴格模式備注

普通函數調用	window	嚴格模式下是 undefined
構造函數調用	實例對象	原型方法中 this 也是實例對象
對象方法調用	該方法所屬對象	緊挨著的對象
事件綁定方法	綁定事件對象
定時器函數	window

<body><button id="btn">按鈕</button></body><script>// 普通函數function foo() {console.log(this); // window}foo();// 構造函數function Person() {console.log(this); // 指向實例對象 Person}var p = new Person();var obj = {name: "張三",age: 30,sayHi: function () {console.log(this); // obj 張三},grilFriend: {name: "小紅",talk: function () {console.log(this); // grilFriend 小紅},},};// console.log(obj);obj.sayHi();obj.grilFriend.talk();document.getElementById("btn").onclick = function () {console.log(this); // <button id="btn">按鈕</button>};// 定時器函數setTimeout(function () {console.log(this); // window}, 2000);</script>

函數進階 - call、apply、bind

了解了函數 this 指向的不同場景之后
我們知道有些情況下我們為了使用某種特定環境的 this 引用，這時候我們就需要采用一些特殊手段來處理了，例如我們經常在定時器外部備份 this 引用，然后在定時器函數內部使用外部 this 的引用
然而實際上對于這種做法我們的 JavaScript 為我們專門提供了一些函數方法用來幫我們更優雅的處理函數內部 this 指向問題。

call

call()方法調用一個函數，其具有一個指定的 this 值和分別提供的參數（參數的列表）。
注意：該方法的作用和 apply() 方法類似，只有一個區別，就是 call() 方法接受的是若干個參數的列表，而 apply()方法接受的是一個包含多個參數的數組。
語法：fun.call(thisArg,arg1,arg2)
參數：
- thisArg
  - 在 fun 函數運行時指定的 this 值
  - 如果指定了 null 或者 undefined 則內部 this 指向 window
- arg1,arg2,...
  - 指定的參數列表

apply

apply()方法調用一個函數，其具有一個指定的this值，以及作為一個數組（或類似數組的對象）提供的參數
注意：該方法的作用和call()方法類型，只有一個區別，就是call()方法接受的是若干個參數的列表，而apply()方法接受的是一個包含多個參數的數組
語法：fun.apply(thisArg,[argsArray])
參數：
- thisArg
- argsArray
apply()與call()非常相似，不同之處在于提供參數的方式
apply()使用參數數組而不是一組參數列表
例如：fun.apply(this,['eat','bananas'])
<script>var obj = {name: "admin",};function foo(a, b) {console.log(a + b); // 30console.log(this.name); // admin this指向了obj}foo.apply(obj, [10, 20]);// call 和 apply 很相似，只是在傳遞參數的時候一個是列表，一個是數組</script>

bind

bind()函數會創建一個新函數（稱為綁定函數），新函數與被調函數（綁定函數的目標函數）具有相同的函數體
當目標函數被調用時this值綁定到bind()的第一個參數，該參數不能被重新。綁定函數被調用時，bind()也接受預設的參數提供給原函數
一個綁定函數也能使用 new 操作符創建對象：這種行為就像把原函數當成構造器。提供的this值被忽略，同時調用時的參數被提供給模擬函數
語法：fun.bind(thisArg,arg1,arg2)()
參數：
- thisAry
  - 當綁定函數被調用時，該參數會作為原函數運行時的this指向。當使用 new 操作符調用綁定函數時，該參數無效
- arg1,arg2,...
  - 當綁定函數被調用時，這些參數將置于實參之前傳遞給被綁定的方法
<script>var obj = {name: "admin",};function foo(a, b, c, d) {console.log(a + b); // 30console.log(this.name); // admin this指向了objconsole.log(c, d); // 30 40}// 最后一個括號表示調用// 會將兩個括號中的參數進行合并全部傳遞foo.bind(obj, 10, 20)(30, 40);</script>

小結：

call 和 apply 特性一樣
- 都是用來調用函數，而且是立即調用
- 但是可以在調用函數的同時，通過第一個參數指定函數內部this的指向
- call 調用的時候，參數必須是以參數列表的形式進行傳遞，也就是逗號分割的方式依次傳遞即可
- apply 調用的時候，參數必須是一個數組，然后在執行的時候，會將數組內部的元素一個一個拿出來，與形參一一對應進行傳遞
- 如果一個參數指定了 null 或者 undefined 則內部 this 指向 window
bind
- 可以用來指定內部 this 的指向，然后生成一個改變了 this 指向的新的函數
- 它和 call、apply 最大的區別是：bind 不會調用
- bind 支持傳遞參數，它的傳遞方式比較特殊，一個有兩個位置可以傳遞
  - 在 bind 的同時，以參數列表的形式進行傳遞
  - 在調用的時候，以參數列表的形式進行傳遞
- bind 傳遞參數的時候以傳遞的參數為準還是以調用的時候傳遞的參數為準
  - bind 的時候傳遞的參數和調用的時候的參數會合并到一起，傳遞到函數內部

函數的其他成員

arguments
- 實參集合
length
- 形參的個數
name
- 函數的名稱

高級函數

函數可以作為參數
函數可以作為返回值

函數閉包

一個函數對其周圍狀態的引用捆綁在一起（或者說函數被引用包圍），這樣的組合就是閉包（closure）
也就是說，閉包讓你可以在一個內存函數中訪問到其外層函數的作用域。在 JavaScript 中，每當創建一個函數，閉包就會在函數創建的同時被創建出來

作用域

全局作用域
函數作用域
沒有塊級作用域

作用域鏈

內層作用域可以訪問外層作用域，反之不行

總結

以上是生活随笔為你收集整理的JS 高级（继承、函数）的全部內容，希望文章能夠幫你解決所遇到的問題。

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