javascript 中 的apply，call 和 bind的区别

apply和call

在js中，apply和call都是用来改变函数 执行时上下文 的，也就是改变 this 的指向。
js中上下文分为定义时上下文，执行时上下文，且上下文this的指向是可以改变的。

举一个栗子?

new 一个人 叫nathan,为黄皮肤

function Preson (name) {  this.name = name}Preson.prototype.skinColor = 'yellow'Preson.prototype.say = function () {  console.log('Hello World, My name is ' + this.name + ' and my skin color is ' + this.skinColor)}let nathan = new Person('nathan')nathan.say() // Hello World, My name is nathan and my skin color is 'yellow'

当存在另一个黑人，需要从nathan的口中说出他的肤色

let mike = {  skinColor: 'black',  name: 'mike'}nathan.say.apply(mike) // Hello World, My name is mike and my skin color is blacknathan.say.call(mike) // Hello World, My name is mike and my skin color is blacknathan.say() // Hello World, My name is nathan and my skin color is yellow

可以看出 apply 和 call 都改变了 this 中的 ** skinColor** 和 name 对应的值，但是当我再使用 nathan 的 say() 方法时，nathan 说的还是和之前的结果是一样的
这样即可以形象的看作是，mike 让 nathan 说了话，而不是 mike 直接变成了 nathan

apply和call区别

两者的区别就是传参的方式不同

function Preson (name) {this.name = name}Preson.prototype.skinColor = 'yellow'Preson.prototype.say = function (old, sex) {  console.log('Hello World, My name is ' + this.name + ' and my skin color is ' + this.skinColor + '. I\'m a ' + sex + ' and I ' + old + 'years old')}let nathan = new Preson('nathan')nathan.say(12, 'boy')let mike = {  skinColor: 'black',  name: 'mike'}let detail = [20, 'girl']nathan.say.apply(mike, detail)nathan.say.call(mike, ...detail)

apply除了第一个传入的改变this内的参数之外，函数本身的参数使用数组的形式传入，而call则是按顺序传入

在toString()方法没有被重写的前提下：我写了以下的工具函数来判断数据类型，这里只写了判断数组的，还可以写String object

function isArray (data, type) {  let t = ''  if (arguments.length === 2) {    t = type.toLowerCase()  } else {    t = 'array'  }  if (t === 'array') {    if (!Array.isArray) {      Array.isArray = function (arg) {        return Object.prototype.toString.call(arg) === '[object Array]'      }    }    return ArrayisArray(data)  }}

bind

在函数后面链式使用bind()，第一个参数是改变函数内部的this为这个参数，后面的参数是在调用目标函数时，预先增加到绑定函数的参数

var module = {  x: 42,  getX: function(a) {    if (a) {        console.log(a);    }    return this.x;  }}var unboundGetX = module.getX;console.log(unboundGetX());// output: undefinedvar boundGetX = unboundGetX.bind(module, 'arg1');console.log(boundGetX());// ouput: arg1// output: 42

而后屡次绑定bind是无效的。

三者之间的区别

当你需要在函数改变上下文之后不是马上执行，在回调时执行，使用bind

apply和call会立即执行函数

我是看了 此人 的文章之后，按照自己的了解再次写的这篇文章，使自己记忆深刻，而后有少量话也做了简单的自己了解的义译，欢迎评论提错
peace~
author: nathan[图片上传中…(IMG_6061.JPG-daecac-1594702430431-0)]