JavaScript 中 call()、apply()、bind() 的用法

- 日理万妓 2022-09-07 09:59 178阅读 0赞

先看明白下面：

window.name = '亚索'
    function getName(){ 
    	console.log(this.name)
    }
    getName()//亚索

比较一下这两者`this`的差别，第一个打印里面的`this`指向`obj`，第二个全局声明的`shows()`函数`this`是`window`；

> 在回调函数中，我们可以使用箭头函数（）=> \{\} ，因为箭头函数不绑定this，永远和上一个封闭函数中的this保持一致！

**call()、apply()、bind() 都是用来重定义 this 这个对象的！**

window.name = '劫'
    const hero = { 
    	heroName: "影流之主",
    	age: 18,
    	show: function() { 
    		console.log(this.name + "->" + this.age)
    	},
    	show2: () => { 
    		console.log(this.name + "->" + this.age)
    	}
    }
    const hero_dema = { 
    	name: "德玛西亚之力",
    	age: 99
    }
    hero.show.call(hero_dema)//德玛西亚之力->99
    hero.show.apply(hero_dema)//德玛西亚之力->99
    hero.show.bind(hero_dema)()//德玛西亚之力->99
    // hero.show2.call(hero_dema)//劫->undefined
    // hero.show2.apply(hero_dema)//劫->undefined
    // hero.show2.bind(hero_dema)()//劫->undefined

`bind`返回的是一个新的函数，你必须调用它才会被执行。

const hero = { 
    	heroName: "影流之主",
    	age: 18,
    	show: function(from, to) { 
    		console.log(this.name + "->" + this.age + "->" + from + "->" + to)
    	},
    	show2: (from, to) => { 
    		console.log(this.name + "->" + this.age + "->" + from + "->" + to)
    	}
    }
    const hero_dema = { 
    	name: "德玛西亚之力",
    	age: 99
    }
    hero.show.call(hero_dema,'Paris','London') //德玛西亚之力->99->Paris->London
    hero.show.apply(hero_dema,['Paris','London']) //德玛西亚之力->99->Paris->London
    hero.show.bind(hero_dema,'Paris','London')() //德玛西亚之力->99->Paris->London

从上面三个结果不难看出：

`call()`、`bind()`、 `apply()`这三个函数的第一个参数都是`this`的指向对象，

第二个参数差别就来了：`call()`的参数是直接放进去的，第二第三第`n`个参数全都用逗号分隔；`apply()`的所有参数都必须放在一个数组里面传进去 ；`bind()`除了返回是函数以外，它 的参数和`call()`一样。

当然，三者的参数不限定是`string`类型，允许是各种类型，包括函数 、 `object`等等！