首页 > 其他分享 >关于JS call ,apply, bind之间的用法以及区别

关于JS call ,apply, bind之间的用法以及区别

时间:2022-08-18 12:13:42浏览次数:58  
标签:console log bind JS call var apply

call, apply, bind 主要实现的功能是改变this的指向.

在正常情况下 console.log(this)  输出的内容是 window 对象

 

第一个call函数

 <script>
        // 改变函数内this指向  js提供了三种方法  call()  apply()  bind()
        var o = {
            name: 'andy'
        }

        function fn(a, b){
            console.log(this);
            console.log(a + b);
        };

        fn.call(o, 1, 2);

        // call第一个可以调用函数 第二个可以改变函数内的this 指向

        function Father(uname, age, sex){
            this.uname = uname;
            this.age = age;
            this.sex = sex;
        }

        function Son(uname, age, sex){
            Father.call(this, uname, age, sex);
        }

        var son = new Son('刘德华', 18, '男');
        console.log(son);
    </script>

 

第二个 apply()   与call的区别主要是 apply后面加的是类数组

 <script>
        // apply()应用 运用的意思

        var o = {
            name: 'andy'
        };

        function fn(arr) {
            console.log(this);
            console.log(arr); // pink
        };

        fn.apply(o, ['pink']);

        var arr = [1, 66, 3, 99, 4];
        var arr1 = ['red', 'pink'];

        // The Math.max() function returns the largest of the zero or more numbers given as input parameters, or NaN if any parameter isn't a number and can't be converted into one.
        var max = Math.max.apply(Math, arr);
        var min = Math.min.apply(Math, arr);

        console.log(max, min);
    </script>        

MDN有更加详细的内容https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Function/apply  

 

第三个 bind() 可看作绑定函数

 // bind() 绑定 捆绑的意思
        var o = {
            name: 'andy'
        };

        function fn(a, b) {
            console.log(this);
            console.log(a + b);
        }

        var f = fn.bind(o, 1, 2)
        fn();

        var btn1 = document.querySelector('button');
        btn1.onclick = function() {
            this.disabled = true; // 这个this 指向的是 btn 这个按钮
            // var that = this;
            setTimeout(function() {
                // that.disabled = false; // 定时器函数里面的this 指向的是window
                this.disabled = false; // 此时定时器函数里面的this 指向的是btn
            }.bind(this), 3000); // 这个this 指向的是btn 这个对象
        }

        //  bind改变this指向后不会调用函数

 

标签:console,log,bind,JS,call,var,apply
From: https://www.cnblogs.com/coderatian/p/16598229.html

相关文章

  • jsp文件中foreach无结果
    原因:items中的命名和request传入的命名不一致造成。修改一致,数据就可以遍历了  ......
  • Mockjs使用
    src下新建mock文件夹,新建mockServe.js/*利用mockjs来mock数据接口*/importMockfrom'mockjs'importbannersfrom'./banners'importfloorsfrom'./floors'//......
  • google gson解析json示例
    publicclassUser{//省略其它publicStringname;publicintage;publicStringemailAddress;......
  • js根据输入天数,通过时间戳转日期时间,日期时间转时间戳,换算成多少天
    1、时间戳转日期时间functiontimestampToDate(timestamp,index){  vardate=newDate(timestamp+index*86400000);  varY=date.getFullYear()+......
  • jsp页面传格林威治格式的时间到后台的处理方式
    从页面传过来的时间为格林威治时间,例如:ThuSep2111:56:46CST2017,而实体类里的是date字段,直接传给mybatis执行update会报错。解决方法就是在mybatis传入的时候,即在xml中......
  • 利用Fiddler用本地的JS替换网页的JS
    先在左侧选中要替换JS的URL地址,然后右侧标签选择“AutoResponder”,选中“Enablerules”和"Unmatchedrequestspassthrough"两个复选框,点击“AddRule”,选择你的本地文......
  • js快捷抽取数组对象中某一属性值的集合
    一、Array.from方法array.from方法就是将一个类数组对象(具有length属性的对象)或者可遍历的对象转换成真正的数组varuser=[{id:1,name:"李四......
  • js 判断数组的7 种方法
    1.Array.isArray([])//true2.Object.prototype.toString.call([])//'[objectArray]'3.[].constructor===Array//true4.[]instanceofArray//true5.[]......
  • 手写 js数组reduce
    functionreduce(list,fn,...init){letprev=init.length>0?init[0]:list[0];for(leti=init.length>0?0:1;i<list.length;i++){......
  • js
    typeof运算符和instanceof运算符以及isPrototypeOf()方法的区别typeof是一个运算符,用于检测数据的类型,比如基本数据类型null、undefined、string、number、boolean,以及引......