call appply bind三剑客惊魂记

1-作用:

call appply bind,改变this的指向

  let obj = {
            name: '胡歌'
        }
        function Child(name) {
            this.name = name
        }
        Child.prototype = {
            constructor: Child,
            showName: function () {
                console.log(this.name);
            }
        }
        var child = new Child('鹿晗')
        child.showName()//鹿晗
        child.showName.call(obj)//胡歌,指向obj
        child.showName.apply(obj)//胡歌,指向obj
        let bind = child.showName.bind(obj)//胡歌,指向obj
        bind()//

复制代码

2-区别:

1.bind不会立刻执行(开篇的结尾有栗子)

2.call和apply的区别:call以参数列表形式,apply是以数组形式

// 求数组最大值
 let arr1 = [1, 2, 3, 19]
 console.log(Math.max.call(null, 1, 2, 3, 19));//19
 console.log(Math.max.call(null, ...arr1));//19,,以...arr1展开运算符拆包形式
 console.log(Math.max.call(null, arr1));//nan
 console.log(Math.max.apply(null, arr1));//19
复制代码

3-应用

将伪数组转换为数组

1-dom节点

  // ES5常用
        let div = document.getElementsByTagName('div')
        console.log(div); //伪数组
        let arr2 = Array.prototype.slice.call(div). //指向 Array中的slice
        console.log(arr2); //数组
        //   怕不兼容,用原生js封装一个
        function listToArray(likeArray) {
            var ary = []
            try {
                ary = Array.prototype.slice.call(likeArray)
            } catch (e) {
                for (var i = 0; i < likeArray.length; i++) {
                    ary[ary.length] = likeArray[i]
                }
            }
        }
复制代码

2-arguments

  function fn(){
            console.log(arguments);
             console.log(Array.prototype.slice.call(arguments));
        }
        fn(1,2,3)
复制代码

3-类数组对象

  let obj1={
            0:'胡歌',
            1:'彭于晏',
            2:'读者',
            length:3//一定要有
        }
        console.log(Array.prototype.slice.call(obj1));
复制代码

数组拼接

 let arr11=[1,2,3]
 let arr22=[4,5,6]
 console.log(arr11.concat(arr22));
        // 用apply
          let arr11=[1,2,3]
          let arr22=[4,5,6]
          Array.prototype.push.apply(arr11,arr22)
          console.log(arr11);
复制代码

判断数据类型

 let array1 = [1, 2, 3]
        function isArray(arry) {
            return Object.prototype.toString.call(array) === '[object Array]'
            return Object.prototype.toString.call(array) === '[object Object]'
            return Object.prototype.toString.call(array) === '[object String]'
            return Object.prototype.toString.call(array) === '[object Null]'
        }
复制代码
© 版权声明
THE END
喜欢就支持一下吧
点赞0 分享