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

?

?

1，前言

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

1，call

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

語(yǔ)法：

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

1.1，例子

如下，控制臺(tái)會(huì)打印出：快看【張三】在奔跑

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

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

1.2，直接調(diào)用

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

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

1.3，將this指向另一個(gè)對(duì)象

此時(shí)this會(huì)綁定為被指向的對(duì)象，控制臺(tái)會(huì)打印出：快看【猛犸象】在奔跑

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)用一個(gè)具有給定this值的函數(shù)，以及以一個(gè)數(shù)組(或類(lèi)數(shù)組對(duì)象)的形式提供的參數(shù)。它的第一個(gè)參數(shù)是你需要指向的this目標(biāo)，后面的參數(shù)是你需要傳遞的數(shù)組參數(shù)，無(wú)參數(shù)可以不寫(xiě)。

語(yǔ)法：

function.apply(target, [argsArray])

2.1，例子

如下，控制臺(tái)會(huì)打印出：快看【張三】在奔跑

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

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

2.2，直接調(diào)用

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

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

2.3，將this指向另一個(gè)對(duì)象

此時(shí)this會(huì)綁定為被指向的對(duì)象，控制臺(tái)會(huì)打印出：快看【猛犸象】在奔跑

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)建一個(gè)新的函數(shù)，在bind()被調(diào)用時(shí)，這個(gè)新函數(shù)的this被指定為bind()的第一個(gè)參數(shù)，而其余參數(shù)將作為新函數(shù)的參數(shù)，供調(diào)用時(shí)使用。

語(yǔ)法：

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

3.1，例子

如下，控制臺(tái)會(huì)打印出：快看【張三】在奔跑

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

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

3.2，直接調(diào)用

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

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

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

3.3，將this指向另一個(gè)對(duì)象

此時(shí)this會(huì)綁定為被指向的對(duì)象，控制臺(tái)會(huì)打印出：快看【猛犸象】在奔跑

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指向被裝飾的方法，不影響原方法使用的同時(shí)，注入新的邏輯處理。

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("我是改寫(xiě)后的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()// 打印出：方法裝飾器、我是改寫(xiě)后的function、小紅

5，總結(jié)

5.1，相同點(diǎn)

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

5.2，不同點(diǎn)

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

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

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

公眾號(hào)

往期文章

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

個(gè)人主頁(yè)

• CSDN
• GitHub
• 簡(jiǎn)書(shū)
• 博客園
• 掘金