call,apply,bind的理解
call,apply,bind均是用于改变this指向。
三者相似之处:
1:都是用于改变函数的this指向。
2:第一个参数都是this要指向的对象。
3:都可以通过后面的参数进行对方法的传参。
let obj = {
address: '北京',
age: 18
}
let address = '上海'
var age = 20
let fn = function(name,sex){
console.log('address',this.address)
console.log('age',this.age)
console.log('name',name)
console.log('sex',sex)
}
fn()

在图中可以看到只有age是有值的,直接调用fn方法,this默认指向为window。
address因为是let声明出来的变量,会产生一个做个作用域,所以fn同样是取不到address,只可以取到age。
使用call:

apply:

bind:

call跟apply的相同点:改变this指向后会对函数进行调用。
call跟apply的区别:后续参数call是一个一个传入,apply是将所有参数放到一个数组中进行传递。
bind跟apply跟call的不同:改变this指向后,并不会主动度函数进行调用,需要再手动调用函数。
传参方式有两种:1、跟call相同,将后续参数依次传入。
2、在调用时进行参数的传递
注意点:在严格模式下,即“use strict”
function fn() {
console.log(this);
}
fn()// 普通模式下this是window,在严格模式下this是undefined
fn.call(); // 普通模式下this是window,在严格模式下this是undefined
fn.call(null); // 普通模式下this是window,在严格模式下this是null
fn.call(undefined); // 普通模式下this是window,在严格模式下this是undefined
call的实现原理,实现一个自己的call方法。
明确call做了哪些事情。
1.改变了this指向
2.传递了要传递的参数
3.主动调用了方法
Function.prototype.myCall = function(...arg){
let obj = [...arg][0] || window//将this要指向的对象赋值给一个新对象
obj.fn = this//给新对象添加新的属性fn为要改变this指向的方法,实现了this的改变,obj.fn的this指向的便是obj了
let result = obj.fn(...[...arg].slice(1))//实现主动调用,并将参数传递
delete obj.fn//删除fn属性,防止破坏原有对象
return result //若方法有返回值将返回值return出去
}
call的经典例子:
function fn1() {
console.log(1);
}
function fn2() {
console.log(2);
}
fn1.call(fn2); //
fn1.call.call(fn2); //
fn1.call(fn2); 因为并没有涉及到this所以打印的仍然是1
fn1.call.call(fn2)
fn1.call.call(fn2)//将fn1.call看做要被该边this指向的函数,结合自己实现的call函数
function(...arg){
let obj = [...arg][0] || window//将this要指向的对象赋值给一个新对象
obj.fn = this//给新对象添加新的属性fn为要改变this指向的方法,实现了this的改变,obj.fn的this指向的便是obj了
let result = obj.fn(...[...arg].slice(1))//实现主动调用,并将参数传递
delete obj.fn//删除fn属性,防止破坏原有对象
return result //若方法有返回值将返回值return出去
}.call(fn2)//将里面的this改为fn2,可以看到实际执行的就是fn2函数
call,apply,bind的理解的更多相关文章
- call,apply,bind的理解
2020-03-19 call,apply,bind的理解 先说区别call, apply基本上没什么不一样,唯一不一样的地方是传参方式不同 但是bind和call,apply有区别.bind是重新绑 ...
- 理解 JavaScript call()/apply()/bind()
理解 JavaScript this 文章中已经比较全面的分析了 this 在 JavaScript 中的指向问题,用一句话来总结就是:this 的指向一定是在执行时决定的,指向被调用函数的对象.当然 ...
- 学习前端的菜鸡对JS的call,apply,bind的通俗易懂理解
call,apply,bind 在JavaScript中,call.apply和bind是Function对象自带的三个方法,都是为了改变函数体内部 this 的指向. a ...
- call,apply,bind的用法
关于call,apply,bind这三个函数的用法,是学习javascript这门语言无法越过的知识点.下边我就来好好总结一下它们三者各自的用法,及常见的应用场景. 首先看call这个函数,可以理解成 ...
- JavaScript中call,apply,bind方法的总结。
why?call,apply,bind干什么的?为什么要学这个? 一般用来指定this的环境,在没有学之前,通常会有这些问题. var a = { user:"追梦子", fn:f ...
- call(),apply(),bind()与回调
1.call(),apply(),bind()方法 JavaScript 中通过call或者apply用来代替另一个对象调用一个方法,将一个函数的对象上下文从初始的上下文改变为由 thisObj 指定 ...
- javascript-this,call,apply,bind简述2
上节我们一起研究了this这个小兄弟,得出一个结论,this指向调用this所在函数(或作用域)的那个对象或作用域.不太理解的朋友可以看看上节的内容,这次我们主要探讨一下call(),apply(), ...
- call,apply,bind方法的总结
why?call,apply,bind干什么的?为什么要学这个? 一般用来指定this的环境,在没有学之前,通常会有这些问题. var a = { user:"追梦子", fn:f ...
- JavaScript中call,apply,bind方法的总结
原文链接:http://www.cnblogs.com/pssp/p/5215621.html why?call,apply,bind干什么的?为什么要学这个? 一般用来指定this的环境,在没有学之 ...
随机推荐
- FinalShell Mac OS版,Linux版安装及教程(Mac下的xshell)
用户QQ群 342045988 Mac版安装路径/Applications/finalshelldata Linux版安装路径/usr/lib/finalshelldata 注意:1.FinalShe ...
- 九、封装登录POST请求、登录后POST请求以及GET请求
一.封装登录后POST请求以及GET请求 /** * 全局运行时环境参数管理器 */ public static Map<String, String> BASE_GLOBAL_MAP; ...
- 深入理解AlexNet网络
原文地址:https://blog.csdn.net/luoluonuoyasuolong/article/details/81750190 AlexNet论文:<ImageNet Classi ...
- Popover 弹出框
基础用法 Popover 的属性与 Tooltip 很类似,它们都是基于Vue-popper开发的,因此对于重复属性,请参考 Tooltip 的文档,在此文档中不做详尽解释. 设置索引ref,在按钮中 ...
- laydate中设置动态改变max与min值的方法
参考网址: 原网址:https://blog.csdn.net/cherry_11qianqian/article/details/82259704 改进的网址:https://blog.csdn.n ...
- POJO是什么,javabean是什么,以及POJO与javabean的区别
POJO(Plain Ordinary Java Object)简单的Java对象,实际就是普通JavaBeans,是为了避免和EJB混淆所创造的简称.使用POJO名称是为了避免和EJB混淆起来, 而 ...
- class文件访问标志
class文件中用两个字节共16位代表访问标志(access flags),用于表明该类或接口被访问时能提供的一些信息: 标志名称 标志值 含义 ACC_PUBLIC 0x00 01 是否为Publi ...
- electron-vue小试身手
最近一个项目(vue)需求是用硬件来触发web端页面显示以及效果的切换,客户的硬件设备只支持用tcp协议通讯,而我们的前端呢是用不了tcp的,众所周知在浏览器端,我们只能用http/https协议(a ...
- 记:倍福(CP2611 Control Panel)了解
型号:CP2611 Control Panel Multitouch 11 为啥选型?嗯!因为不了解,了解了,作为只运行.net客户端窗体程序,谁会选用他,不是说他不好,反而相反,他是很优秀的嵌入式集 ...
- app测试自动化之混合APP(之前的三篇为原生APP的操作)
混合开发的App中,经常会有内嵌的H5页面:定位方法与原生APP不同,需要上下文切换 #获取所有上下文contexts=dr.contextsprint(contexts)#打印当前上下文(有点问题应 ...