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的环境,在没有学之 ...
随机推荐
- setHasFixedSize(true)的意义 (转)
RecyclerView setHasFixedSize(true)的意义 2017年07月07日 16:23:04 阅读数:6831 <span style="font-size:1 ...
- 简易的美图秀秀利用别人的so库
在实际开发中,有时候时间短,任务量大,可以查看类似的apk,将行apk反编译,通过看源码分析,用里面的JNI代码! 本案例中用了美图秀秀的JNI.java和jni.so链接库 项目中调用别人写的c代码 ...
- 数据库CASE 函数 时间用法
select * from warehouse_trade_detail whereb_createtime>= cast('2016-01-01' as date) and b_createt ...
- [NodeJS] 优缺点及适用场景
概述: NodeJS宣称其目标是“旨在提供一种简单的构建可伸缩网络程序的方法”,那么它的出现是为了解决什么问题呢,它有什么优缺点以及它适用于什么场景呢? 本文就个人使用经验对这些问题进行探讨. 一. ...
- spring boot系列(一)spring boot 初识
什么是spring boot Spring Boot是由Pivotal团队提供的全新框架,其设计目的是用来简化新Spring应用的初始搭建以及开发过程.该框架使用了特定的方式来进行配置,从而使开发人员 ...
- SAS数据挖掘实战篇【一】
SAS数据挖掘实战篇[一] 1数据挖掘简介 1.1数据挖掘的产生 需求是一切技术之母,管理和计算机技术的发展,促使数据挖掘技术的诞生.随着世界信息技术的迅猛发展,信息量也呈几何指数增长,如何从巨量.复 ...
- BOM Summary P268-P269
The Browser Object Model(BOM) is based on the window object, which represents the browser window and ...
- Botanical Dimensions:借助第九代智能英特尔® 酷睿™ 处理器实现独特沉浸式体验
本文介绍位于洛杉矶的互动体验设计工作室 Master of Shapes (MOS) 打造 Botanical Dimensions 时所做出的技术努力.在这种互动式多世界体验中,参与者将穿越丛林,寻 ...
- LeetCode.1078-两词出现后的单词(Occurrences After Bigram)
这是小川的第392次更新,第422篇原创 01 看题和准备 今天介绍的是LeetCode算法题中Easy级别的第254题(顺位题号是1078).给出单词first和单词second,以"fi ...
- spring @valid 注解
用于验证注解是否符合要求,直接加在变量之前,在变量中添加验证信息的要求,当不符合要求时就会在方法中返回message 的错误提示信息. @PostMapping public User create ...