看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方法的更多相关文章

  1. 理解JS中的call、apply、bind方法(*****************************************************************)

    在JavaScript中,call.apply和bind是Function对象自带的三个方法,这三个方法的主要作用是改变函数中的this指向. call.apply.bind方法的共同点和区别:app ...

  2. Javascript中call,apply,bind方法的详解与总结

    在 javascript之 this 关键字详解 文章中,谈及了如下内容,做一个简单的回顾: 1.this对象的涵义就是指向当前对象中的属性和方法. 2.this指向的可变性.当在全局作用域时,thi ...

  3. JS中的call、apply、bind方法

    JS中的call.apply.bind方法 一.call()和apply()方法 1.方法定义 call方法: 语法:call([thisObj[,arg1[, arg2[,   [,.argN]]] ...

  4. 重写apply, call, bind方法

    重写apply, call, bind方法 //原生JavaScript封装apply方法,第四版 Function.prototype.applyFour = function(context) { ...

  5. 简单模拟实现javascript中的call、apply、bind方法

    目录 引子 隐式丢失 硬绑定 实现及原理分析 总体实现(纯净版/没有注释) 写在最后 引子 读完<你不知道的JavaScript--上卷>中关于this的介绍和深入的章节后,对于this的 ...

  6. JS中的call、apply、bind方法详解

    bind 是返回对应函数,便于稍后调用:apply .call 则是立即调用 . apply.call 在 javascript 中,call 和 apply 都是为了改变某个函数运行时的上下文(co ...

  7. javascript中函数的call,apply及bind方法

    call 方法调用一个对象的一个方法,以另一个对象替换当前对象.call([thisObj[,arg1[, arg2[,  [,.argN]]]]])参数thisObj可选项.将被用作当前对象的对象. ...

  8. js中的call()、apply()和bind()方法的区别

    call(thisObj,param1,param2....)方法:调用一个对象的方法,用另外的对象去替换当前对象. 下面给出一个例子: function add(a,b){ return a+b; ...

  9. 继承:call、apply、bind方法

    javascript 中,call 和 apply 都是为了改变某个函数运行时的上下文(context)而存在的,换句话说,就是为了改变函数体内部 this 的指向. call,apply,bind这 ...

随机推荐

  1. css 的继承性

    目录 css 的继承性是什么? 父元素的属性那些可以被子元素继承,哪些不能呢? css 的继承性是什么? 在面向对象语言都会存在继承的概念,在面向对象语言中,继承的特点:继承了父类的属性和方法. 那么 ...

  2. NEERC2017:L - Laminar Family

    传送门 很容易想到,离线按路径长度从大到小排个序,用树链剖分加颗支持区间cover的线段树就好了 代码: #include<cstdio> #include<iostream> ...

  3. SVN有任何胜过git的地方吗?

    SVN有任何胜过git的地方吗? 好的技术问题通常会引出技术专家们依据经验得出的深层次的观点.但对于这样的问题的答案也很容易演变成完全基于个人喜好的情绪倾泄,而不是根据事实.标准和具体的专业知识.就比 ...

  4. @PathVariable注解的使用

    带占位符的 URL 是 Spring3.0 新增的功能,该功能在SpringMVC 向 REST 目标挺进发展过程中具有里程碑的意义. 通过 @PathVariable 可以将 URL 中占位符参数绑 ...

  5. python模块之struct

    # #********struct模块********# # 1.按照指定格式将Python数据转换为字符串,该字符串为字节流,如网络传输时, # 不能传输int,此时先将int转化为字节流,然后再发 ...

  6. python 基础(十一) pickle 序列化

    一.pickle序列化的操作 使用说明:可以将数据 转换成2进制 写入到文件中 或者之间返回 做到将数据原样写入 原样取出 import pickle (1) dump 写入文件中 pickle.du ...

  7. log4j打印错误日志输出 利用sql取出的值放在list集合中,集合中的字段类型为映射类类型

    public ServiceResult<List<KefuDetail>> MaxRespondtime(Date startDate,Date endDate, Strin ...

  8. 74HC14D(6反向施密特触发器)

    74HC14D:6反向施密特触发器:延迟特性,反向特性,整形特点. 施密特触发器是具有特殊功能的非门,当加在它的输入端A的电压逐渐上升到某个值时(正阈值电压),输出端Y会突然从高电平跳到低电平,而当输 ...

  9. 牛客网Java刷题知识点之Java为什么不能支持多继承,但可以用接口来间接实现多继承

    不多说,直接上干货! java只支持单继承,这是由于安全性的考虑,如果子类继承的多个父类里面有相同的方法或者属性,子类将不知道具体要继承哪个,而接口可以多实现,是因为接口只定义方法,而没有具体的逻辑实 ...

  10. 05.Javascript——入门函数

    //定义函数的方法1 function abs(x) { if (x >= 0) { return x; } else { return -x; } } 上述abs()函数的定义如下: func ...