zoukankan      html  css  js  c++  java
  • call ,apply 和 bind的用法与区别

    作用都是一样的,官方解释:“调用一个对象的一个方法,以另一个对象替换当前对象”, 简单来说就是改变当前使用该方法的对象中的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对象

  • 相关阅读:
    Laravel + Vue 之 OPTIONS 请求的处理
    Vue2.0 keep-alive 组件的最佳实践
    Vue.js 登录注册实现
    数仓项目04:环境搭建(MysqlHA+Hive)
    CentOS7_JDK安装和环境变量配置
    改环境变量改出问题了,vi,ls这些命令都不能用了,怎么办
    CentOS7配置网络
    curl命令下载jdk
    CentOS7设置IP地址
    ODPS
  • 原文地址:https://www.cnblogs.com/mina-huojian66/p/6097808.html
Copyright © 2011-2022 走看看