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 black nathan.say.call(mike) // Hello World, My name is mike and my skin color is black nathan.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: undefined var 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)]

本文章由javascript技术分享原创和收集