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的环境,在没有学之 ...
随机推荐
- GitHub:Google
ylbtech-GitHub:Google 1.返回顶部 · horenso 探しやすいコードで漢字直接入力 Perl Apache-2.0 94710Updated on 19 Apr · ...
- ViewGroup的事件机制
根据View的事件机制,再添加在代码中添加一个自定义的LinearLayout,继承LinearLayout,然后复写了与事件分发机制有关的方法,日志输出 import android.content ...
- Json+Ajax相关
Ajax前戏之json: 1.什么是json? JSON(JavaScript Object Notation, JS 对象标记) 是一种轻量级的数据交换格式. 2.json对象和JavaScript ...
- 史上最全SVN 教程
以下博文引用<https://blog.csdn.net/u013067756/article/details/73302758>,再此仅供学习和参考. Svn是什么? SVN(全称Sub ...
- Python面向对象进阶和socket网络编程
写在前面 为什么坚持?想一想当初: 一.面向对象进阶 - 1.反射补充 - 通过字符串去操作一个对象的属性,称之为反射: - 示例1: class Chinese: def __init__(self ...
- free()后内存不释放问题 - 内存缓冲池技术(转)
起因 下面这段代码执行后,内存有增无减,增加了200M,iOS平台200M不能接受了 // STL 集合类 void test1() { list<int> mList; for (int ...
- 2019.12.24 【ABAP随笔】smartforms 打印及PDF转化
冬至已过,又临平安夜和圣诞,又是一年的末尾,闲暇时间需要静下心来温故而知新. 许久未碰打印,知识于脑子又有几分糊涂,遂整理些许知识,记录. 数据随便取于物料表 report Z_smartforms ...
- JSP 自定义标签的开发流程
1.编写一个实现Tag接口的标签处理器类 package cn.itcast.web.tag; import java.io.IOException; import javax.servlet.htt ...
- 利用python列出当前目录下的所有文件
问题 当一个目录下有很多文件夹或者文件,我们想分析各个文件的名字,这时就可以写一个函数,列出当前目录下所有文件名字. 代码 src_dir = r'./' # 源文件目录地址 def list_all ...
- pytorch基础问题
本文将自己在pytorch学习中遇见的各种问题整理起来,并且持续更新. 1:torch.Tensor和torch.tensor的区别 开始使用torch.tensor和torch.Tensor的时候发 ...