替换this：如果系统自动指定的this对象不是我们想要的，我们就可主动更换this指向的对象。

一、call()

在一次调用函数时，临时替换一次函数中的this为指定对象。

 `调用函数.call(替换this的对象, 实参值1,...)`

立刻调用一次点前的函数
自动将 “.” 前的函数中的this替换为指定的新对象，函数本次调用后，this恢复原样
还能向要调用的函数中传实参值

示例:
使用call，临时替换计算器函数中的this为指定员工对象

// 要调用的函数.call(替换this的对象，实参值列表)，立刻调用
var erya = {ename:'erya'};
function cal(money, extra) {console.log(`${this.ename}的工资为${money+extra}`);
}
cal.call(erya,10000,2000);

二、apply()

传递给参数的方式：数组形式
apply()会先打散数组为多个值，再传值

要调用的函数.apply(替换this的对象, 包含实参值的数组)

立刻调用.前的函数
替换.前的函数中的this为指定对象
先拆散数组为多个元素值，再分别传给函数的形参变量

示例:

var erya = {ename:'erya'};
function cal(money, extra1, extra2) {console.log(`${this.ename}的工资为${money+extra1+extra2}`);
}
var arr1 = [10000,100,2000];
cal.apply(erya, arr1);

三、bind()

创建函数副本，并永久绑定this

 var 新函数=原函数.bind(替换this的对象)

创建一个和原函数一模一样的新函数
永久替换新函数中的this为指定对象

如何使用新函数:
新函数(实参值,...)
bind()已经提前将指定对象替换了新函数中的this，则后续每次调用时，不需要再替换this了！

示例：

//有一个公共的计算器函数，计算每个人的总工资
//              底薪   奖金1   奖金2
function cal(base, bonus1, bonus2){console.log(`${this.ename}的总工资是:${base+bonus1+bonus2}`)
}var erya={ename:"erya"};
var erya1={ename:"erya1"};//erya要cal()计算自己每个月的薪资，每次call借用麻烦，所以买一个一模一样的自己专属的cal()函数。
var cal1=cal.bind(erya,10000);
cal2(1000,2000);
cal2(1000,1000);
//   erya1抢erya的函数
jisuan2.call(hmm,1000,2000);

四、总结:

只在一次调用函数时，临时替换一次this：call

既要替换一次this，又要拆散数组再传参：apply

创建新函数副本，并永久绑定this：bind

ES5（二）——替换this 之call()、apply()和bind()相关推荐

JavaScript中的call、apply、bind深入理解
一.函数的三种角色首先要先了解在函数本身会有一些自己的属性,比如: length:形参的个数: name:函数名: prototype:类的原型,在原型上定义的方法都是当前这个类的实例的公有方法: ...
手写call，apply和bind（分析三者的用法与区别）
它们有什么用及区别? 在阐述它们如何使用之前,我们有必要整理清楚this的用法,简单的说this是JavaScript语言的一个关键字,它是函数运行时,在函数体内部自动生成的一个对象,只能在函数体内部 ...
JavaScript/ES6 从this开始理解apply() call() bind()、 class 、箭头函数
一 this 关键字 1.1 概念 this 简单来说指的是属性或方法或全局的当前对象,始终会返回一个对象. 在全局上下文的执行环境中,this的值会指向全局变量,在浏览器中则引用windows对象: ...
【愣锤笔记】一篇小短文让你彻底搞懂this、call、apply和bind
跟我左手右手一起慢动作,右手左手慢动作重复.额-貌似哪里有点不对劲哎?让我想想,右手?左手?慢动作??重复???重播???不对不对,是左手call,右手apply,一起来bind this. 额,这都 ...
call、apply、bind的原理剖析及实现
序言不知其理,何以谈用,在这里简单记录一下个人对call.apply.bind的理解,并根据理解思路实现一下. 众所周知 call.apply.bind 的作用都是'改变'作用域,但是网上对这这'改 ...
apply call bind 简介
Function.prototype.call(thisArg [, arg1, arg2, ...]) call() 简述 call() 方法调用一个函数, 其具有一个指定的 this 值和分别地 ...
方法apply作用于对象sort时失败_浅析call、apply 与 bind
点击上方蓝色字体轻松关注前言经典模式题:call.apply 与 bind的区别.来吧,今天搞一搞. call(thisArgs [,args...]) 该方法可以传递一个thisArgs参数和一 ...
js之call,apply和bind的模拟实现
了解call,apply和bind对于看一些源码以及封装一些工具有很大的作用. 如果想要了解并熟练使用它..就必须知道他的基本的实现原理. 一,基本用法使用 let obj = {a: 18 }fu ...
理解js中的this指向以及call，apply，bind方法
<script> function a(){var user = "追梦子";console.log(this.user); //undefinedconsole.lo ...
记录call、apply、bind的源码
记录一下call.apply.bind的源码,然后从根本上明白其用法. 都知道call.apply与bind的用法,call(this,...arguments).apply(this,[argume ...

ES5（二）——替换this 之call()、apply()和bind()

一、call()

二、apply()

三、bind()

四、总结:

ES5（二）——替换this 之call()、apply()和bind()相关推荐

最新文章

热门文章