简单实现 call、apply、 bind
时间:2021-08-10
本文章向大家介绍简单实现 call、apply、 bind,主要包括简单实现 call、apply、 bind使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
call(),apply()
call() 方法调用一个函数, 其具有一个指定的 this 值和分别地提供的参数(参数的列表)。
call 和 apply 只是接收参数上的不同
用法(MDN)
fun.call(thisArg, arg1, arg2, ...)
thisArg
在 fun 函数运行时指定的 this 值。需要注意的是,指定的 this 值并不一定是该函数执行时真正的 this 值,如果这个函数处于 non-strict mode,则指定为 null 和 undefined 的 this 值会自动指向全局对象(浏览器中就是 window 对象),同时值为原始值(数字,字符串,布尔值)的 this 会指向该原始值的自动包装对象。
arg1, arg2, ...
指定的参数列表。
function greet() {
var reply = [this.animal, "typically sleep between", this.sleepDuration].join(
" "
);
console.log(reply);
}
var obj = {
animal: "cats",
sleepDuration: "12 and 16 hours",
};
greet.call(obj); // cats typically sleep between 12 and 16 hours
上面例子中当用 call 调用 greet 方法的时候,该方法的 this 值会绑定到 obj 对象。
我们来分析下 call 做了哪些事情:
- greet 函数执行了;
- greet 执行上下文中的 this 被改成了 obj
下面我们来动手实现一下:
const obj = {
name: "111",
fn: function () {
console.log(this.name);
},
};
// 我们知道fn中的this 就是调用它的obj
obj.fn();
// 在Function原型上添加我们的方法
Function.prototype.myCall = function (ctx, ...args) {
//这里用Symbol以免覆盖了属性
const key = Symbol("fn");
/**
* call的第一个参数如果为null和undefined时this值会自动指向全局对象(浏览器中就是window对象),
* 同时值为原始值(数字,字符串,布尔值)的this会指向该原始值的自动包装对象,原生的call会用Object包装一下。
*/
ctx = ctx ? Object(ctx) : window;
/**
* 这里的this就指向调用的调用call的函数,上例中就是greet
* 所以我们在实现的时候只要将call的第一个参数挂到greet中的某一个属性中去就可以了
*/
ctx[key] = this;
// 这里调用并将参数传给 this函数
const result = ctx[key](...args);
// 调用完成后将刚刚挂在的属性删除
delete ctx[key];
return result;
};
// 测试一下
greet.myCall(obj); // cats typically sleep between 12 and 16 hours
bind()
bind 和 call 的区别是 call 会被立即调用执行,而 bind 则返回的是一个改变了执行上下文的函数。
function greet() {
var reply = [this.animal, "typically sleep between", this.sleepDuration].join(
" "
);
console.log(reply);
}
var obj = {
animal: "cats",
sleepDuration: "12 and 16 hours",
};
greet.call(obj); // cats typically sleep between 12 and 16 hours
greet.bind(obj)(); // cats typically sleep between 12 and 16 hours
我们用 call 来实现
Function.prototype.myBind = function (ctx, ...args) {
const self = this;
// 返回一个函数
return function () {
// 用call去调用并返回结果
return self.call(ctx, ...args);
};
};
原文地址:https://www.cnblogs.com/jianjunx/p/15122883.html
- ASP.NET Core应用的错误处理[1]:三种呈现错误页面的方式
- python访问http的GET/POST
- 用openssl库RSA加密解密
- Kobject浅析
- ASP.NET Core应用的错误处理[2]:DeveloperExceptionPageMiddleware中间件如何呈现“开发者异常页面”
- RSA简介(二)——模幂算法
- 为虚拟机vCPU绑定物理CPU
- RSA简介(三)——寻找质数
- RSA简介(四)——求逆算法
- 平方根的C语言实现(三) ——最终程序实现
- ASP.NET Core应用的错误处理[3]:ExceptionHandlerMiddleware中间件如何呈现“定制化错误页面”
- 【视频】Es6新特性-Symbol
- shell编程/字库裁剪(3)——验证
- 特征选择(Feature Selection)引言
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 成都电信宽带获取IPV6地址全过程
- android studio 3.6.1导入项目报错提示无法下载classpath里的内容
- Linux VPS使用命令行快速查询百度网盘提取码
- Flutter 首页必用组件NestedScrollView的示例详解
- AUXPI:简单的API图床程序,支持上传到搜狗/新浪/SMMS等多个图床
- android使用TextView实现跑马灯效果
- Android 自定义 View 中使用 Spannable的实例详解
- Android实现扫描和生成二维码
- android自定义弹出框样式的实现方法
- Android实现手绘功能
- Android 实现秒转换成时分秒的方法
- Android实现简单用户注册案例
- Android原生视频播放VideoView的使用
- Android table布局开发实现简单计算器
- Android实现面包屑功能的代码(支持Fragment联动)