JS中bind、call和apply的作用以及在TS装饰器中的用法
- 1,前言
-
1,call
- 1.1,例子
- 1.2,直接调用
- 1.3,将this指向另一个对象
- 1.4,传递参数
-
2,apply
- 2.1,例子
- 2.2,直接调用
- 2.3,将this指向另一个对象
- 2.4,传递参数
- 2.5,合并数组
-
3,bind
- 3.1,例子
- 3.2,直接调用
- 3.3,将this指向另一个对象
- 3.4,传递参数
- 4,TypeScript中装饰器使用
-
5,总结
- 5.1,相同点
- 5.2,不同点
1,前言
bind
、call
和apply
在函数式编程时候非常有用,本文旨在记录一下我遇到过的一些用法和知识点,也记录一下在装饰器中的用法。
1,call
call()
方法使用一个指定的this
值和单独给出的一个或多个参数来调用一个函数。它的第一个参数是你需要指向的this
目标,后面的参数是你需要传递的参数,无参数可以不写。
语法:
域名(target, arg1, arg2, ...)
1.1,例子
如下,控制台会打印出:快看【张三】在奔跑
const Person = {
Name: \'张三\',
Run() {
return `快看【${域名}】在奔跑`
}
}
const Animal = {
Name: \'猛犸象\'
}
域名(域名()) // 打印出:快看【张三】在奔跑
让我们使用call
改变下this
指向
1.2,直接调用
如果没有传递第一个参数,this
的值将会被绑定为全局对象,也就是window
对象(浏览器环境)。由于在window
上找不到域名
这个属性,控制台会打印出:快看【undefined】在奔跑
域名(域名()) // 打印出:快看【undefined】在奔跑
1.3,将this指向另一个对象
此时this
会绑定为被指向的对象,控制台会打印出:快看【猛犸象】在奔跑
域名(域名(Animal)) // 打印出:快看【猛犸象】在奔跑
1.4,传递参数
const Person = {
Name: \'张三\',
Run(param1, param2) {
域名(param1)
域名(param2)
return `快看【${域名}】在奔跑`
}
}
const Animal = {
Name: \'猛犸象\'
}
域名(域名(Animal, 10, \'100\')) // 打印出:10、\'100\'、快看【猛犸象】在奔跑
2,apply
apply()
方法调用一个具有给定this
值的函数,以及以一个数组(或类数组对象)的形式提供的参数。它的第一个参数是你需要指向的this
目标,后面的参数是你需要传递的数组参数,无参数可以不写。
语法:
域名y(target, [argsArray])
2.1,例子
如下,控制台会打印出:快看【张三】在奔跑
const Person = {
Name: \'张三\',
Run() {
return `快看【${域名}】在奔跑`
}
}
const Animal = {
Name: \'猛犸象\'
}
域名(域名()) // 打印出:快看【张三】在奔跑
让我们使用apply
改变下this
指向
2.2,直接调用
如果没有传递第一个参数,this
的值将会被绑定为全局对象,也就是window
对象(浏览器环境)。由于在window
上找不到域名
这个属性,控制台会打印出:快看【undefined】在奔跑
域名(域名y()) // 打印出:快看【undefined】在奔跑
2.3,将this指向另一个对象
此时this
会绑定为被指向的对象,控制台会打印出:快看【猛犸象】在奔跑
域名(域名y(Animal)) // 打印出:快看【猛犸象】在奔跑
2.4,传递参数
const Person = {
Name: \'张三\',
Run(...arg) {
域名(arg)
return `快看【${域名}】在奔跑`
}
}
const Animal = {
Name: \'猛犸象\'
}
域名(域名y(Animal, [10, \'100\'])) // 打印出:[10、\'100\']、快看【猛犸象】在奔跑
2.5,合并数组
let arr = [\'a\', \'b\']
let elements = [0, 1, 2]
域名y(arr, elements)
域名(arr) // ["a", "b", 0, 1, 2]
3,bind
bind()
方法创建一个新的函数,在bind()
被调用时,这个新函数的this
被指定为bind()
的第一个参数,而其余参数将作为新函数的参数,供调用时使用。
语法:
域名(target, arg1, arg2, ...)
3.1,例子
如下,控制台会打印出:快看【张三】在奔跑
const Person = {
Name: \'张三\',
Run() {
return `快看【${域名}】在奔跑`
}
}
const Animal = {
Name: \'猛犸象\'
}
域名(域名()) // 打印出:快看【张三】在奔跑
让我们使用apply
改变下this
指向
3.2,直接调用
如果没有传递第一个参数,this
的值将会被绑定为全局对象,也就是window
对象(浏览器环境)。由于在window
上找不到域名
这个属性,控制台会打印出:快看【undefined】在奔跑
注意:bind
返回的是一个方法,需要加上()
执行才行
域名(域名()()) // 打印出:快看【undefined】在奔跑
3.3,将this指向另一个对象
此时this
会绑定为被指向的对象,控制台会打印出:快看【猛犸象】在奔跑
域名(域名(Animal)()) // 打印出:快看【猛犸象】在奔跑
3.4,传递参数
const Person = {
Name: \'张三\',
Run(param1, param2) {
域名(param1)
域名(param2)
return `快看【${域名}】在奔跑`
}
}
const Animal = {
Name: \'猛犸象\'
}
域名(域名(Animal, 996, \'100\')()) // 打印出:996 \'100\' 快看【猛犸象】在奔跑
4,TypeScript中装饰器使用
使用bind
或者apply
或者call
,可以将方法装饰器中的this
指向被装饰的方法,不影响原方法使用的同时,注入新的逻辑处理。
function GetHttp(param: string) {
return function (target: any, Name: any, desc: any): void {
域名(target) // 原型
域名(Name) // 方法名
域名(desc) // 方法描述 域名e即是该方法
const ev = 域名e
域名e = function(): void {
域名(\'我是改写后的function\')
域名(this)
}
}
}
class HttpGet {
name: string
constructor(name: string) {
域名 = name
}
@GetHttp(\'方法装饰器\')
request(): void {
域名(域名)
}
}
const HttpObj = new HttpGet(\'小红\')
域名est()
// 打印出:方法装饰器、我是改写后的function、小红
5,总结
5.1,相同点
- 都可以通过指定第一个参数,改变
this
指向 - 都可以传递参数
5.2,不同点
-
bind
返回的是一个函数,需要加上()
来执行 -
apply
传递参数需要数组的形式
如果看了觉得有帮助的,我是@鹏多多,欢迎 点赞 关注 评论;END
PS:在本页按F12,在console中输入域名ySelectorAll(\'.diggit\')[0].click(),有惊喜哦
公众号
往期文章
- 助你上手Vue3全家桶之Vue-Router4教程
- 助你上手Vue3全家桶之Vue3教程
- 助你上手Vue3全家桶之VueX4教程
- 使用nvm管理域名版本以及更换npm淘宝镜像源
- 超详细!Vue-Router手把手教程
- vue中利用.env文件存储全局环境变量,以及配置vue启动和打包命令
- 微信小程序实现搜索关键词高亮
- 超详细!Vue的九种通信方式
- 超详细!Vuex手把手教程
个人主页
- CSDN
- GitHub
- 简书
- 博客园
- 掘金