码迷,mamicode.com
首页 > 移动开发 > 详细

js中 call() ,apply(),bing()方法三者的用法和区别

时间:2019-06-08 00:48:41      阅读:197      评论:0      收藏:0      [点我收藏+]

标签:第一个   style   apply()   它的   函数   define   类型   对象   总结   

面试中经常会被问到的,或者做笔试题的时候也会有这样的问题,所以今天专门对这个问题做个总结;

先看个例子:

var age = ‘19‘
var myObj = {
    name:‘小赖‘,
    myAge:this.age,
    sayName:function(){
        console.log(this.name + ‘今年‘ + this.age)
    }
}
myObj.sayName(); // 小赖今年 undefined

var hero = {
    name:‘艾希‘,
    age:‘100‘
}
myObj.sayName.call(hero); //艾希今年100
myObj.sayName.apply(hero); //艾希今年100
myObj.sayName.bind(hero)(); //艾希今年100
上面的例子看出 使用call(),apply(),bind()都是用来改变this指向的;
以上除了 bind 方法后面多了个 () 外 ,结果返回都一样! 这样是因为bind()返回的是一个函数,必须调用才能执行。
然后我再稍微改下这个例子;
再往下看:
var myObj1 = {
    name:‘小王‘,
    myAge:this.age,
    sayName:function(add, front){
        console.log(this.name + ‘今年‘ + this.age + ‘在‘+add+‘做‘+front)
    }
}
var heros ={
    name:‘艾希尼亚‘,
    age:‘20‘
}
myObj1.sayName.call(heros,‘上海‘,‘前端‘); //艾希尼亚今年20在上海做前端
myObj1.sayName.apply(heros,[‘上海‘,‘前端‘]); //艾希尼亚今年20在上海做前端
myObj1.sayName.bind(heros,[‘上海‘,‘前端‘])(); // 艾希尼亚今年20在上海,前端做undefined  ;这里有错乱
myObj1.sayName.bind(heros,‘上海‘,‘前端‘)(); // 艾希尼亚今年20在上海做前端
myObj1.sayName.bind(heros)(‘上海‘,‘前端‘); // 艾希尼亚今年20在上海做前端
从上面的例子可以看出call,apply, bind 这三个方法的第一个参数都是this的要指向的对象,
第二个参数就有差别了call的参数是一个一个放进去的中间用 ,参数全都用 ,逗号隔开;
apply的第二个参数都必须放在一个数组里面传进去 数组里面的值和sayName方法中是一一对应的;
bind方法除了返回的是一个函数外 它的第二个参数和call一样。
三者参数不只限定是字符串类型,可以是各种类型 函数,对象等都可以,另外可以看出bind方法的第二个参数还可以在调用的时候再传。

js中 call() ,apply(),bing()方法三者的用法和区别

标签:第一个   style   apply()   它的   函数   define   类型   对象   总结   

原文地址:https://www.cnblogs.com/ssdtor/p/10989550.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!