資訊專欄INFORMATION COLUMN
摘要：目錄，前言，，例子，直接調用，將指向另一個對象，傳遞參數，，例子，直接調用，將指向另一個對象，傳遞參數，合并數組，，例子，直接調用，將指向另一個對象，傳遞參數，中裝飾器使用，總結，相同點，不同點，前言，前言和在函數式編程時候非常有用，本
?
?
bind、call和apply在函數式編程時候非常有用，本文旨在記錄一下我遇到過的一些用法和知識點，也記錄一下在裝飾器中的用法。
call() 方法使用一個指定的this值和多帶帶給出的一個或多個參數來調用一個函數。它的第一個參數是你需要指向的this目標，后面的參數是你需要傳遞的參數，無參數可以不寫。
語法：
function.call(target, arg1, arg2, ...)
如下，控制臺會打印出：快看【張三】在奔跑
const Person = { Name: "張三", Run() { return `快看【${this.Name}】在奔跑` }}const Animal = { Name: "猛犸象"}console.log(Person.Run()) // 打印出：快看【張三】在奔跑
讓我們使用call改變下this指向
如果沒有傳遞第一個參數，this的值將會被綁定為全局對象，也就是window對象(瀏覽器環境)。由于在window上找不到this.Name這個屬性，控制臺會打印出：快看【undefined】在奔跑
console.log(Person.Run.call()) // 打印出：快看【undefined】在奔跑
此時this會綁定為被指向的對象，控制臺會打印出：快看【猛犸象】在奔跑
console.log(Person.Run.call(Animal)) // 打印出：快看【猛犸象】在奔跑
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"、快看【猛犸象】在奔跑
apply()方法調用一個具有給定this值的函數，以及以一個數組(或類數組對象)的形式提供的參數。它的第一個參數是你需要指向的this目標，后面的參數是你需要傳遞的數組參數，無參數可以不寫。
語法：
function.apply(target, [argsArray])
如下，控制臺會打印出：快看【張三】在奔跑
const Person = { Name: "張三", Run() { return `快看【${this.Name}】在奔跑` }}const Animal = { Name: "猛犸象"}console.log(Person.Run()) // 打印出：快看【張三】在奔跑
讓我們使用apply改變下this指向
如果沒有傳遞第一個參數，this的值將會被綁定為全局對象，也就是window對象(瀏覽器環境)。由于在window上找不到this.Name這個屬性，控制臺會打印出：快看【undefined】在奔跑
console.log(Person.Run.apply()) // 打印出：快看【undefined】在奔跑
此時this會綁定為被指向的對象，控制臺會打印出：快看【猛犸象】在奔跑
console.log(Person.Run.apply(Animal)) // 打印出：快看【猛犸象】在奔跑
const Person = { Name: "張三", Run(...arg) { console.log(arg) return `快看【${this.Name}】在奔跑` }}const Animal = { Name: "猛犸象"}console.log(Person.Run.apply(Animal, [10, "100"])) // 打印出：[10、"100"]、快看【猛犸象】在奔跑
let arr = ["a", "b"]let elements = [0, 1, 2]array.push.apply(arr, elements)console.log(arr) // ["a", "b", 0, 1, 2]
bind()方法創建一個新的函數，在bind()被調用時，這個新函數的this被指定為bind()的第一個參數，而其余參數將作為新函數的參數，供調用時使用。
語法：
function.bind(target, arg1, arg2, ...)
如下，控制臺會打印出：快看【張三】在奔跑
const Person = { Name: "張三", Run() { return `快看【${this.Name}】在奔跑` }}const Animal = { Name: "猛犸象"}console.log(Person.Run()) // 打印出：快看【張三】在奔跑
讓我們使用apply改變下this指向
如果沒有傳遞第一個參數，this的值將會被綁定為全局對象，也就是window對象(瀏覽器環境)。由于在window上找不到this.Name這個屬性，控制臺會打印出：快看【undefined】在奔跑
注意：bind返回的是一個方法，需要加上()執行才行
console.log(Person.Run.bind()()) // 打印出：快看【undefined】在奔跑
此時this會綁定為被指向的對象，控制臺會打印出：快看【猛犸象】在奔跑
console.log(Person.Run.bind(Animal)()) // 打印出：快看【猛犸象】在奔跑
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" 快看【猛犸象】在奔跑
使用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、小紅
this指向bind返回的是一個函數，需要加上()來執行apply傳遞參數需要數組的形式如果看了覺得有幫助的，我是@鵬多多，歡迎 點贊 關注 評論；END
PS：在本頁按F12，在console中輸入document.querySelectorAll(".diggit")[0].click()，有驚喜哦
公眾號
往期文章
個人主頁
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/124137.html
摘要：面向對象編程對象的原生方法分成兩類自身的方法靜態方法和的實例方法。的靜態方法方法與，參數是對象，返回一個數組，數組的值是改對象自身的所有屬性名區別在于返回可枚舉的屬性，返回不可枚舉的屬性值。 面向對象編程 Objects對象的原生方法分成兩類：Object自身的方法(靜態方法)和Object的實例方法。注意Object是JavaScript的原生對象，所有的其他對象都是繼承自Objec...
摘要：在中，裝飾器一般用來修飾函數，實現公共功能，達到代碼復用的目的。智能裝飾器上節介紹的寫法，嵌套層次較多，如果每個類似的裝飾器都用這種方法實現，還是比較費勁的腦子不夠用，也比較容易出錯。假設有一個智能裝飾器，修飾裝飾器，便可獲得同樣的能力。 在Python中，裝飾器一般用來修飾函數，實現公共功能，達到代碼復用的目的。在函數定義前加上@xxxx，然后函數就注入了某些行為，很神奇！然而，這只...
摘要：那么，它到底是如何工作的呢讓我們從一種更簡單的實現開始實際上這種實現代碼更短，并且更易讀是函數原型中的一個函數，它調用函數，使用第一個參數作為參數，并傳遞剩余參數作為被調用函數的參數。 原文：The Most Clever Line of JavaScript 作者：Seva Zaikov 原文 最近 一個朋友 發給我一段非常有趣的 JavaScript 代碼，是他在某個 開源庫中...
摘要：理解文章中已經比較全面的分析了在中的指向問題，用一句話來總結就是的指向一定是在執行時決定的，指向被調用函數的對象。與和直接執行原函數不同的是，返回的是一個新函數。這個新函數包裹了原函數，并且綁定了的指向為傳入的。 理解 JavaScript this 文章中已經比較全面的分析了 this 在 JavaScript 中的指向問題，用一句話來總結就是：this 的指向一定是在執行時決定的，...
摘要：裝飾者模式裝飾者模式就是動態的給類或對象增加功能的設計模式。下的實現里的裝飾器目前處在建議征集的第二階段，不被瀏覽器所支持，如果想要提前使用這個新特性就需要，等工具進行轉譯。這里介紹下的用法。 1.1、裝飾者模式 裝飾者模式就是動態的給類或對象增加功能的設計模式。在程序運行時動態的給一個具備基礎功能的類或對象添加新的功能，并且不會改變會破壞基礎類和對象的功能。先提煉出產品的最小可用產品...
閱讀 3813·2023-04-25 19:07
閱讀 3561·2021-11-22 12:02
閱讀 3143·2021-10-12 10:11
閱讀 3915·2021-09-03 10:49
閱讀 2894·2019-08-30 13:21
閱讀 3007·2019-08-30 11:14
閱讀 2093·2019-08-29 15:40
閱讀 2878·2019-08-28 18:29
