有趣的this以及apply,call,bind方法
看this指向谁,要看执行时而非定义时(箭头函数除外)。函数没有绑定在对象上调用,非'strict'模式下,this指向window,否则为undefined
改变this指向的方法
1. apply,立即执行
调用方法 fun.apply('想让this指向谁'[,arr]);
参数以数组形式传入
举个栗子(非严格模式):
function fun (params1, params2, params3) {
console.log('this:', this); console.log('name:', this.name);
console.log('入参:', params1, params2, params3);
}
let obj = {
name: 'LQW'
}
fun();
fun.apply(obj, [1, 2, 3]);
结果:
this: Window {postMessage: ƒ, blur: ƒ, focus: ƒ, close: ƒ, frames: Window, …}
name:
入参: undefined undefined undefined
this: {name: "LQW"}
name: LQW
入参: 1 2 3
2. call,立即执行
调用方法 fun.call('想让this指向谁'[,param1,param2,param3…]);
与apply的入参不同,功能一样
举个栗子(非严格模式):
function fun (params1, params2, params3) {
console.log('this:', this);
console.log('name:', this.name);
console.log('入参:', params1, params2, params3);
}
let obj = {
name: 'LQW'
}
fun();
fun.call(obj, 1, 2, 3); 结果:
this: Window {postMessage: ƒ, blur: ƒ, focus: ƒ, close: ƒ, frames: Window, …}
name:
入参: undefined undefined undefined
this: {name: "LQW"}
name: LQW
入参: 1 2 3
3.bind,返回一个函数,需要再次调用,bind是javascript高版本的方法,使用时需注意浏览器兼容性
调用方法 fun.bind('想让this指向谁'[,param1,param2,param3…]);
与call入参相同,bind方法是apply和call的升级版
function fun (params1, params2, params3) {
console.log('this:', this);
console.log('name:', this.name);
console.log('入参:', params1, params2, params3);
}
let obj = {
name: 'LQW'
}
fun();
fun.bind(obj, 1, 2, 3)(); 结果:
this: Window {postMessage: ƒ, blur: ƒ, focus: ƒ, close: ƒ, frames: Window, …}
name:
入参: undefined undefined undefined
this: {name: "LQW"}
name: LQW
入参: 1 2 3
有趣的this以及apply,call,bind方法的更多相关文章
- 理解JS中的call、apply、bind方法(*****************************************************************)
在JavaScript中,call.apply和bind是Function对象自带的三个方法,这三个方法的主要作用是改变函数中的this指向. call.apply.bind方法的共同点和区别:app ...
- Javascript中call,apply,bind方法的详解与总结
在 javascript之 this 关键字详解 文章中,谈及了如下内容,做一个简单的回顾: 1.this对象的涵义就是指向当前对象中的属性和方法. 2.this指向的可变性.当在全局作用域时,thi ...
- JS中的call、apply、bind方法
JS中的call.apply.bind方法 一.call()和apply()方法 1.方法定义 call方法: 语法:call([thisObj[,arg1[, arg2[, [,.argN]]] ...
- 重写apply, call, bind方法
重写apply, call, bind方法 //原生JavaScript封装apply方法,第四版 Function.prototype.applyFour = function(context) { ...
- 简单模拟实现javascript中的call、apply、bind方法
目录 引子 隐式丢失 硬绑定 实现及原理分析 总体实现(纯净版/没有注释) 写在最后 引子 读完<你不知道的JavaScript--上卷>中关于this的介绍和深入的章节后,对于this的 ...
- JS中的call、apply、bind方法详解
bind 是返回对应函数,便于稍后调用:apply .call 则是立即调用 . apply.call 在 javascript 中,call 和 apply 都是为了改变某个函数运行时的上下文(co ...
- javascript中函数的call,apply及bind方法
call 方法调用一个对象的一个方法,以另一个对象替换当前对象.call([thisObj[,arg1[, arg2[, [,.argN]]]]])参数thisObj可选项.将被用作当前对象的对象. ...
- js中的call()、apply()和bind()方法的区别
call(thisObj,param1,param2....)方法:调用一个对象的方法,用另外的对象去替换当前对象. 下面给出一个例子: function add(a,b){ return a+b; ...
- 继承:call、apply、bind方法
javascript 中,call 和 apply 都是为了改变某个函数运行时的上下文(context)而存在的,换句话说,就是为了改变函数体内部 this 的指向. call,apply,bind这 ...
随机推荐
- mybits like查询写法
1.mysql :LIKE CONCAT('%',#{empname},'%' ) 或者 LIKE CONCAT('%',‘${empname}’,'%' ) 2.oracle:LIKE '%'||# ...
- Centos 7.x 搭建 Zabbix3.4
前提要安装了LAMP(官方推荐环境) LNMP也可以 一.安装.配置Zabbix3.4 1:安装zabbix_RPM包 rpm -i https://repo.zabbix.com/zabbix/3. ...
- python模块之hmac
# hmac模块使用步骤: # hmac模块模块的使用步骤与hashlib模块的使用步骤基本一致,只是在第1步获取hmac对象时,只能使用hmac.new()函数, # 因为hmac模块没有提供与具体 ...
- python虚拟环境四
python虚拟环境管理器 我们在使用python虚拟环境的时候,最好安装一个虚拟环境管理器,这样我们就能很方便的管理python的 虚拟环境,而python的虚拟环境管理工具包就是virtualen ...
- 【aspnetcore】让aspnetcore支持less文件
第一步:新建文件 CustomerFileExtensionContentTypeProvider namespace xxx { public class CustomerFileExtension ...
- Lock简介
digest synchronized已经提供了锁的功能,而且还是Java的内置特性,那为什么还要出现lock呢? 用一句话来讲就是——synchronized可以实现同步,但太死板了它的同步机制:l ...
- STM32使用注意事项
一 IO引脚: 1.1 PC13~PC15作为IO输出的限制,PC13/PC15输出最大2MHZ,负载2PF,驱动电流不超过3mA,所以不能用来驱动LED. 2 输出的引脚是否可以用来读引脚: cas ...
- aspectj xml
1.接口和类 1.1 ISomeService 接口 public interface ISomeService { public void doSome(); public void dade(); ...
- C#入门笔记2 变量
变量关系到数据的存储,一个供程序操作的存储区的名字,每一个变量都一个特定的类型,类型决定变量的内存大小和布局. 注:必须一定要先声明,赋值后,才能使用. 变量声明 三种声明方式: 1.先声明,后赋值. ...
- DrawTool画笔之纹理笔
先上图: 今天我们要实现的是DrawTool画笔集合中的一种纹理笔,很多人可能对纹理笔概念还比较生疏,其实如果你接触过类似一些教育行业交互式白板的话,对纹理笔并不会感到陌生,纹理笔我们可以简单的理解为 ...