JS中bind、call和apply的作用以及在TS裝飾器中的用法

happyfish 發(fā)布于2021-11-22 12:02 / 3600人閱讀

摘要：目錄，前言，，例子，直接調(diào)用，將指向另一個對象，傳遞參數(shù)，，例子，直接調(diào)用，將指向另一個對象，傳遞參數(shù)，合并數(shù)組，，例子，直接調(diào)用，將指向另一個對象，傳遞參數(shù)，中裝飾器使用，總結(jié)，相同點，不同點，前言，前言和在函數(shù)式編程時候非常有用，本

1，前言
1，call
- 1.1，例子
- 1.2，直接調(diào)用
- 1.3，將this指向另一個對象
- 1.4，傳遞參數(shù)
2，apply
- 2.1，例子
- 2.2，直接調(diào)用
- 2.3，將this指向另一個對象
- 2.4，傳遞參數(shù)
- 2.5，合并數(shù)組
3，bind
- 3.1，例子
- 3.2，直接調(diào)用
- 3.3，將this指向另一個對象
- 3.4，傳遞參數(shù)
4，TypeScript中裝飾器使用
5，總結(jié)
- 5.1，相同點
- 5.2，不同點

1，前言

bind、call和apply在函數(shù)式編程時候非常有用，本文旨在記錄一下我遇到過的一些用法和知識點，也記錄一下在裝飾器中的用法。

1，call

call() 方法使用一個指定的this值和多帶帶給出的一個或多個參數(shù)來調(diào)用一個函數(shù)。它的第一個參數(shù)是你需要指向的this目標，后面的參數(shù)是你需要傳遞的參數(shù)，無參數(shù)可以不寫。

語法：

function.call(target, arg1, arg2, ...)

1.1，例子

如下，控制臺會打印出：快看【張三】在奔跑

const Person = {  Name: "張三",  Run() {    return `快看【${this.Name}】在奔跑`  }}const Animal = {  Name: "猛犸象"}console.log(Person.Run()) // 打印出：快看【張三】在奔跑

讓我們使用call改變下this指向

1.2，直接調(diào)用

如果沒有傳遞第一個參數(shù)，this的值將會被綁定為全局對象，也就是window對象(瀏覽器環(huán)境)。由于在window上找不到this.Name這個屬性，控制臺會打印出：快看【undefined】在奔跑

console.log(Person.Run.call()) // 打印出：快看【undefined】在奔跑

1.3，將this指向另一個對象

此時this會綁定為被指向的對象，控制臺會打印出：快看【猛犸象】在奔跑

console.log(Person.Run.call(Animal)) // 打印出：快看【猛犸象】在奔跑

1.4，傳遞參數(shù)

const Person = {  Name: "張三",  Run(param1, param2) {    console.log(param1)    console.log(param2)    return `快看【${this.Name}】在奔跑`  }}const Animal = {  Name: "猛犸象"}console.log(Person.Run.call(Animal, 10, "100")) // 打印出：10、"100"、快看【猛犸象】在奔跑

2，apply

apply()方法調(diào)用一個具有給定this值的函數(shù)，以及以一個數(shù)組(或類數(shù)組對象)的形式提供的參數(shù)。它的第一個參數(shù)是你需要指向的this目標，后面的參數(shù)是你需要傳遞的數(shù)組參數(shù)，無參數(shù)可以不寫。

語法：

function.apply(target, [argsArray])

2.1，例子

如下，控制臺會打印出：快看【張三】在奔跑

const Person = {  Name: "張三",  Run() {    return `快看【${this.Name}】在奔跑`  }}const Animal = {  Name: "猛犸象"}console.log(Person.Run()) // 打印出：快看【張三】在奔跑

讓我們使用apply改變下this指向

2.2，直接調(diào)用

console.log(Person.Run.apply()) // 打印出：快看【undefined】在奔跑

2.3，將this指向另一個對象

此時this會綁定為被指向的對象，控制臺會打印出：快看【猛犸象】在奔跑

console.log(Person.Run.apply(Animal)) // 打印出：快看【猛犸象】在奔跑

2.4，傳遞參數(shù)

const Person = {  Name: "張三",  Run(...arg) {    console.log(arg)    return `快看【${this.Name}】在奔跑`  }}const Animal = {  Name: "猛犸象"}console.log(Person.Run.apply(Animal, [10, "100"])) // 打印出：[10、"100"]、快看【猛犸象】在奔跑

2.5，合并數(shù)組

let arr = ["a", "b"]let elements = [0, 1, 2]array.push.apply(arr, elements)console.log(arr) // ["a", "b", 0, 1, 2]

3，bind

bind()方法創(chuàng)建一個新的函數(shù)，在bind()被調(diào)用時，這個新函數(shù)的this被指定為bind()的第一個參數(shù)，而其余參數(shù)將作為新函數(shù)的參數(shù)，供調(diào)用時使用。

語法：

function.bind(target, arg1, arg2, ...)

3.1，例子

如下，控制臺會打印出：快看【張三】在奔跑

const Person = {  Name: "張三",  Run() {    return `快看【${this.Name}】在奔跑`  }}const Animal = {  Name: "猛犸象"}console.log(Person.Run()) // 打印出：快看【張三】在奔跑

讓我們使用apply改變下this指向

3.2，直接調(diào)用

注意：bind返回的是一個方法，需要加上()執(zhí)行才行

console.log(Person.Run.bind()()) // 打印出：快看【undefined】在奔跑

3.3，將this指向另一個對象

此時this會綁定為被指向的對象，控制臺會打印出：快看【猛犸象】在奔跑

console.log(Person.Run.bind(Animal)()) // 打印出：快看【猛犸象】在奔跑

3.4，傳遞參數(shù)

const Person = {  Name: "張三",  Run(param1, param2) {    console.log(param1)    console.log(param2)    return `快看【${this.Name}】在奔跑`  }}const Animal = {  Name: "猛犸象"}console.log(Person.Run.bind(Animal, 996, "100")()) // 打印出：996 "100" 快看【猛犸象】在奔跑

4，TypeScript中裝飾器使用

使用bind或者apply或者call，可以將方法裝飾器中的this指向被裝飾的方法，不影響原方法使用的同時，注入新的邏輯處理。

function GetHttp(param: string) {  return function (target: any, Name: any, desc: any): void {  	console.log(target) // 原型    console.log(Name) // 方法名    console.log(desc) // 方法描述 desc.value即是該方法    const ev = desc.value    desc.value = function(): void {      console.log("我是改寫后的function")      ev.call(this)    }  }}class HttpGet {  name: string  constructor(name: string) {    this.name = name  }  @GetHttp("方法裝飾器")  request(): void {    console.log(this.name)  }}const HttpObj = new HttpGet("小紅")HttpObj.request()// 打印出：方法裝飾器、我是改寫后的function、小紅

5，總結(jié)

5.1，相同點

都可以通過指定第一個參數(shù)，改變this指向
都可以傳遞參數(shù)

5.2，不同點

bind返回的是一個函數(shù)，需要加上()來執(zhí)行
apply傳遞參數(shù)需要數(shù)組的形式

如果看了覺得有幫助的，我是@鵬多多，歡迎點贊關(guān)注評論；END

PS：在本頁按F12，在console中輸入document.querySelectorAll(".diggit")[0].click()，有驚喜哦

公眾號

往期文章

助你上手Vue3全家桶之Vue-Router4教程
助你上手Vue3全家桶之Vue3教程
助你上手Vue3全家桶之VueX4教程
使用nvm管理node.js版本以及更換npm淘寶鏡像源
超詳細！Vue-Router手把手教程
vue中利用.env文件存儲全局環(huán)境變量，以及配置vue啟動和打包命令
微信小程序?qū)崿F(xiàn)搜索關(guān)鍵詞高亮
超詳細！Vue的九種通信方式
超詳細！Vuex手把手教程

個人主頁

CSDN
GitHub
簡書
博客園
掘金

接受失敗，但不選擇放棄！

GPU云服務(wù)器云服務(wù)器 JS中bind、call和apply的作 js中的call和apply apply與call的區(qū)別在linux中的作用

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/124137.html

相關(guān)文章

前端_JavaScript_面向?qū)ο缶幊?/b>

摘要：面向?qū)ο缶幊虒ο蟮脑椒ǚ殖蓛深愖陨淼姆椒o態(tài)方法和的實例方法。的靜態(tài)方法方法與，參數(shù)是對象，返回一個數(shù)組，數(shù)組的值是改對象自身的所有屬性名區(qū)別在于返回可枚舉的屬性，返回不可枚舉的屬性值。面向?qū)ο缶幊?Objects對象的原生方法分成兩類：Object自身的方法(靜態(tài)方法)和Object的實例方法。注意Object是JavaScript的原生對象，所有的其他對象都是繼承自O(shè)bjec...

Blackjun 2019-08-23 15:15 評論0 收藏0

Python裝飾器高級用法

摘要：在中，裝飾器一般用來修飾函數(shù)，實現(xiàn)公共功能，達到代碼復用的目的。智能裝飾器上節(jié)介紹的寫法，嵌套層次較多，如果每個類似的裝飾器都用這種方法實現(xiàn)，還是比較費勁的腦子不夠用，也比較容易出錯。假設(shè)有一個智能裝飾器，修飾裝飾器，便可獲得同樣的能力。在Python中，裝飾器一般用來修飾函數(shù)，實現(xiàn)公共功能，達到代碼復用的目的。在函數(shù)定義前加上@xxxx，然后函數(shù)就注入了某些行為，很神奇！然而，這只...

AlphaWallet 2019-07-31 10:06 評論0 收藏0

魔幻語言 JavaScript 系列之 call、bind 以及上下文

摘要：那么，它到底是如何工作的呢讓我們從一種更簡單的實現(xiàn)開始實際上這種實現(xiàn)代碼更短，并且更易讀是函數(shù)原型中的一個函數(shù)，它調(diào)用函數(shù)，使用第一個參數(shù)作為參數(shù)，并傳遞剩余參數(shù)作為被調(diào)用函數(shù)的參數(shù)。原文：The Most Clever Line of JavaScript 作者：Seva Zaikov 原文最近一個朋友發(fā)給我一段非常有趣的 JavaScript 代碼，是他在某個開源庫中...

cuieney 2019-08-21 17:32 評論0 收藏0

理解 JavaScript call()/apply()/bind()

摘要：理解文章中已經(jīng)比較全面的分析了在中的指向問題，用一句話來總結(jié)就是的指向一定是在執(zhí)行時決定的，指向被調(diào)用函數(shù)的對象。與和直接執(zhí)行原函數(shù)不同的是，返回的是一個新函數(shù)。這個新函數(shù)包裹了原函數(shù)，并且綁定了的指向為傳入的。理解 JavaScript this 文章中已經(jīng)比較全面的分析了 this 在 JavaScript 中的指向問題，用一句話來總結(jié)就是：this 的指向一定是在執(zhí)行時決定的，...

duan199226 2019-08-23 14:27 評論0 收藏0

TS下的裝飾者模式(Decorator)

摘要：裝飾者模式裝飾者模式就是動態(tài)的給類或?qū)ο笤黾庸δ艿脑O(shè)計模式。下的實現(xiàn)里的裝飾器目前處在建議征集的第二階段，不被瀏覽器所支持，如果想要提前使用這個新特性就需要，等工具進行轉(zhuǎn)譯。這里介紹下的用法。 1.1、裝飾者模式裝飾者模式就是動態(tài)的給類或?qū)ο笤黾庸δ艿脑O(shè)計模式。在程序運行時動態(tài)的給一個具備基礎(chǔ)功能的類或?qū)ο筇砑有碌墓δ?，并且不會改變會破壞基礎(chǔ)類和對象的功能。先提煉出產(chǎn)品的最小可用產(chǎn)品...

SolomonXie 2019-08-23 12:18 評論0 收藏0

發(fā)表評論

登陸后可評論

0條評論

happyfish

男|高級講師

我要關(guān)注我要私信

TA的文章
閱讀更多

tensorflow降低版本

閱讀 3843·2023-04-25 19:07

JS中bind、call和apply的作用以及在TS裝飾器中的用法

閱讀 3601·2021-11-22 12:02

誰說“程序員離開電腦就是廢物？我身邊這位大兄弟表示不服！真事

閱讀 3164·2021-10-12 10:11

速云：香港HGC/香港HKT VPS;4核/4GB內(nèi)存/50GB SSD空間/不限流量/500Mbp

閱讀 3978·2021-09-03 10:49

關(guān)于Web移動端rem單位的那些坑

閱讀 2921·2019-08-30 13:21

H5移動端適配IphoneX等機型

閱讀 3039·2019-08-30 11:14

前端每日實戰(zhàn)：49# 視頻演示如何用純 CSS 創(chuàng)作一支誘人的冰棍

閱讀 2120·2019-08-29 15:40

CSS之各種居中

閱讀 2899·2019-08-28 18:29

最新活動

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！

JS中bind、call和apply的作用以及在TS裝飾器中的用法

1，前言

1，call

1.1，例子

1.2，直接調(diào)用

1.3，將this指向另一個對象

1.4，傳遞參數(shù)

2，apply

2.1，例子

2.2，直接調(diào)用

2.3，將this指向另一個對象

2.4，傳遞參數(shù)

2.5，合并數(shù)組

3，bind

3.1，例子

3.2，直接調(diào)用

3.3，將this指向另一個對象

3.4，傳遞參數(shù)

4，TypeScript中裝飾器使用

5，總結(jié)

5.1，相同點

5.2，不同點

相關(guān)文章

發(fā)表評論

0條評論

男|高級講師

TA的文章

最新活動

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！

1，前言

1，call

1.2，直接調(diào)用

1.3，將this指向另一個對象

1.4，傳遞參數(shù)

2.1，例子

2.2，直接調(diào)用

2.3，將this指向另一個對象

2.4，傳遞參數(shù)

3，bind

3.2，直接調(diào)用

3.3，將this指向另一個對象

3.4，傳遞參數(shù)

4，TypeScript中裝飾器使用

5.2，不同點