• 分享

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

avatar avatar
2379阅读 0评论 1喜欢
### JavaScript 中 call()、apply()、bind() 的用法 其实是一个很简单的东西,认真看10分钟就从一脸懵B到完全理解! 先看明白下面: **例1** ```js var name = '小王',age = 17; var obj = { name:'小张', objAge:this.age, myFun:()=>{ console.log(`${this.name}年龄${this.age}`) } } obj.objAge; // 17 obj.myFun() // 小张年龄 undefined ``` **例2** ```js var fav = '盲僧'; function shows(){ console.log(this.fav); } shows() //盲僧 ``` 比较一下两者this的差别,第一个打印里的 this 指向 obj ,第二个全局声明的shows()函数this是window; #### 1. call()、apply()、bind()都是用来定义this这个对象的 如: ```js var name = '小王', age=17; var obj = { name:'小张', objAge:this.age, myFun:()=>{ console.log(`${this.name}年龄${this.age}`) } } var db = { name:'德玛', age:99 } obj.myFun.call(db);    // 德玛年龄 99 obj.myFun.apply(db);    // 德玛年龄 99 obj.myFun.bind(db)();   // 德玛年龄 99 ``` 以上出了bind方法后面多了个()外,结果返回都一致~ 由此得出结论,bind返回的是一个新的函数,你必须调用它才会被执行 #### 2. 对比call 、bind 、 apply 传参情况下 ```js var name = '小王', age=17; var obj = { name:'小张', objAge:this.age, myFun:(form,t)=>{ console.log(`${this.name}年龄${this.age},来自${form},去往${t}`) } } var db = { name:'德玛', age:99 } obj.myFun.call(db,'成都','上海'); obj.myFun.apply(db,['成都','上海']) obj.myFun.bind(db,'成都','上海')(); obj.myFun.bind(db,['成都','上海'])() ``` 微妙的差距! 从上面四个结果不难看出: call 、bind 、 apply 这三个函数的第一个参数都是 this 的指向对象,第二个参数差别就来了: call 的参数是直接放进去的,第二第三第 n 个参数全都用逗号分隔,直接放到后面 `obj.myFun.call(db,'成都', ... ,'string' )`。 apply 的所有参数都必须放在一个数组里面传进去 `obj.myFun.apply(db,['成都', ..., 'string' ])` bind 除了返回是函数以外,它 的参数和 call 一样 当然,三者的参数不限定是 string 类型,允许是各种类型,包括函数 、 object 等等! ```
avatar avatar
请登录后留言

赶快写下您的第一条评论吧