作用都是一样的,官方解释:“调用一个对象的一个方法,以另一个对象替换当前对象”, 简单来说就是改变当前使用该方法的对象中的this指向;

var xw = {
name : "小王",
gender : "男",
age : 24,
say : function() {
alert(this.name + " , " + this.gender + " ,今年" + this.age);
}
}
var xh = {
name : "小红",
gender : "女",
age : 12
}
xw.say.call(xh);//小红,女,今年12
xw.say.apply(xh);//小红,女,今年12
xw.say.bind(xh);//function(){alert(this.name+","+this.gender+",今年"+this.age);
xw.say.bind(xh)();//小红,女,今年12

call和apply都是对函数的直接调用,而bind方法返回的仍然是一个函数,因此后面还需要()来进行调用才可以。

var xw = {
    name : "小王",
    gender : "男",
    age : 24,
    say : function(school,grade) {
      alert(this.name + " , " + this.gender + " ,今年" + this.age + " ,在" + school + "上" + grade);
    }
     }
var xh = {
    name : "小红",
    gender : "女",
    age : 12
     }
xw.say.call(xh,"实验小学","六年级");//小红,女,今年12,在实验小学上六年级
xw.say.apply(xh,["实验小学","六年级"]);//小红,女,今年12,在实验小学上六年级
xw.say.bind(xh,"实验小学","六年级");//function(){alert(this.name+","+this.gender+",今年"+this.age+",在"+school+"上"+grade);
xw.say.bind(xh,"实验小学","六年级")();//小红,女,今年12,在实验小学上六年级
xw.say.bind(xh)("实验小学","六年级");//小红女今年12在实验小学上六年级 在调用的时候再进行传参

第一个参数添加要把参数添加到哪个环境中,简单来说,this就会指向那个对象。apply的第二个参数必须是一个数组;

call和apply都是改变this并立即执行这个函数,bind方法可以让对应的函数想什么时候调用就什么时候调用,并且可以将参数在执行的时候添加,这是它们的区别

特殊用法:

function A(a){
console.log(a);
}; function AA(a){
A.apply(this, arguments);
} AA("output in AA"); //output in AA this指A,arguments指a,也就是传入的参数
var a = {
user:"追梦子",
fn:function(){
console.log(this);//Window {external: Object, chrome: Object, document: document, g_blnCheckUnload: true, blogEditor: Object…}
}
}
var b = a.fn;
b.apply(null);

注意:如果call和apply的第一个参数写的是null,那么this指向的是window对象

call ,apply 和 bind的用法与区别的更多相关文章

  1. call,apply,bind的用法与区别

    1.call/apply/bind方法的来源 首先,在使用call,apply,bind方法时,我们有必要知道这三个方法究竟是来自哪里?为什么可以使用的到这三个方法? call,apply,bind这 ...

  2. js中call、apply和bind到底有什么区别?

    介绍 在js中,每个函数的原型都指向Function.prototype对象(js基于原型链的继承).因此,每个函数都会有apply,call,和bind方法,这些方法继承于Function. 它们的 ...

  3. js中call、apply、bind的用法

    原文链接:http://www.cnblogs.com/xljzlw/p/3775162.html var zlw = { name: "zlw", sayHello: funct ...

  4. call、apply、bind的用法

    数组追加 //用apply拼接 var arr1=[12,'name:foo',2048]; var arr2=['Joe','Hello']; Array.prototype.push.apply( ...

  5. javascript中call()、apply()、bind()的用法理解

    一.bind的用法 第一个:obj.showInfo('arg','arg_18');中传的2个参数通过showInfo方法改变的是obj下中的name和age 第二个:obj.showInfo.bi ...

  6. js中call、apply、bind到底有什么区别?bind返回的方法还能修改this指向吗?

     壹 ❀ 引 同事最近在看angularjs源码,被源码中各种bind,apply弄的晕头转向:于是他问我,你知道apply,call与bind的区别吗?我说apply与call是函数应用,指定thi ...

  7. 让你弄懂 call、apply、bind的应用和区别

    call.apply.bind使用和区别 // 有只猫叫小黑,小黑会吃鱼 const cat = { name: '小黑', eatFish(...args) { console.log('this指 ...

  8. JS中的call()、apply() 以及 bind()方法用法总结

    JS中的call()方法和apply()方法用法总结  : 讲解: 调用函数,等于设置函数体内this对象的值,以扩充函数赖以运行的作用域. function add(c,d){ return thi ...

  9. 使用call、apply、bind继承及三者区别

    js里的继承方法有很多,比如:使用原型链的组合继承.es6的Class.寄生继承以及使用call.apply.bind继承.再说继承之前,我们先简单了解下它们的区别. 一.区别: 同:三者都是改变函数 ...

随机推荐

  1. 从excel读数据到informix的Found a quote for which there is no matching quote错误

    我从excel读取数据,然后存储到Informix数据库里.偶尔会发现出现Found a quote for which there is no matching quote这个错误.调试后发现,是因 ...

  2. Java基本知识

    一.I/O 分字节流和字符流 字节流由InputStream和OutputStream读入和写入 DataInputStream继承自FilterInputStream,可以读取基本数据类型(char ...

  3. 解决Mac Linux USB Loader“Couldn't get security scoped bookmarks”错误

    Mac Linux USB Loader出现 "Couldn't get security scoped bookmarks"错误时, 需要删除 ~/Library/Contain ...

  4. 常见dos命令

    打开控制面板:win+r  control 服务: win+r  services.msc

  5. java的基础语法

  6. NIO和IO(转)

    java NIO由以下几个核心部分组成: Channels(通道) Buffers(缓冲区) Selectors(选择器) 其他 Channel和Buffer: 所有的IO再NIO中都从一个Chann ...

  7. maven GroupId 和ArtifactId的含义

    GroupID是项目组织唯一的标识符,实际对应Java的包的结构,是main目录里java的目录结构. ArtifactID就是项目的唯一的标识符,实际对应项目的名称,就是项目根目录的名称.

  8. jq siblings()的强大之处

    在事件处理的方法里 经常遇到自己做什么效果 其他节点就做反之效果 如果用判断 可处理 但代码太啰嗦不够简单 siblings()就可以解决这一切的麻烦 意思就是 除啦我之外的其他兄弟节点 这样可以做2 ...

  9. C3P0连接池参数详解

    <c3p0-config> <default-config> <!--当连接池中的连接耗尽的时候c3p0一次同时获取的连接数.Default: 3 --> < ...

  10. workerman简单例子

    workerman下载地址 http://www.workerman.net/ html <!DOCTYPE html> <html> <head> <tit ...