call、apply和bind的使用及判断一个数据的数据类型的方法

一、call的使用

1.让函数执行

<script>
    var name="qq";
    function say(){
        console.log("我是say函数...");
    }
    say.call();
</script>

2.改变this的指向

<script>
    function say(){
        console.log("我是say函数...");
        console.log(this.name);
    }
    let obj1 = { name:"wc" }
    let obj2 = { name:"xq" }
    // (1)让函数执行
    // (2)让say函数中的this指向obj1
    say.call(obj1)
    // (1)让函数执行
    // (2)让say函数中的this指向obj2
    say.call(obj2)
</script>

3.函数可以传参

<script>
    function say(a,b){
        console.log("我是say函数~，参数是：",a,b);
        console.log(this.name);
    }
    let obj1 = { name:"wc" }
    let obj2 = { name:"xq" }
    // (1)让函数执行
    // (2)让say函数中的this指向obj1
    // (3)传参
    say.call(obj1,1,2)
    // (1)让函数执行
    // (2)让say函数中的this指向obj2
    // (3)传参
    say.call(obj2,3,4)
</script>

二、apply的使用

apply的作用与call完全相同，不同之处在于传参的方式，apply需要传递一个数组：

<script>
    function say(a,b){
        console.log("我是say函数~，参数是：",a,b);
        console.log(this.name);
    }
    let obj1 = {name:"wc"}
    let obj2 = {name:"xq"}

    // apply和call唯一的区别是传参方式
    // apply需要传递一个数组
    say.apply(obj1,[5,6])
    say.apply(obj2,[7,8])
</script>

通过apply求一个数组中的最大值

（1）普通写法

<script>
    var arr=[2,56,7,58,12,36,21,47,69];
    let max=arr[0];
    arr.forEach(function(item){
        if(item>max){
            max=item;
        }
    })
    console.log(max);
</script>

（2）apply写法

<script>
    var arr = [2,3,10,2,89,100,49,101];
    // Math是JS的内置对象，不需要new，直接使用
    // max：求最大值

    // apply可以让函数执行，并改变max中this的指向
    // apply传参正好是一个数组
    // max中的this不需要考虑
    console.log(Math.max.apply({},arr));
    console.log(Math.max.apply(123,arr));
    console.log(Math.max.apply(null,arr));
</script>

三、bind的使用

call、apply都能改变this的指向，并让函数执行
bind仅仅是改变this的指向，不能让函数执行
需要调用函数才能执行

<script>
    function say(){
        console.log(this.name);
    }
    let obj={name:"wc"}
    // call、apply都能改变this的指向，并让函数执行
    // bind仅仅是改变this的指向，不能让函数执行
    // 需要调用函数才能执行

    let kk=say.bind(obj);
    kk();
</script>

四、判断一个数据的数据类型

1.type of

使用typeof判断一个数据的数据类型：
优点：
简单，对基本数据类型和函数测试非常准确
缺点：
对引用数据类型测试时，结果都是object

<script>

    console.log(typeof 110); // number
    console.log(typeof "hello"); // string
    console.log(typeof true); // boolean
    function fn(){}
    console.log(typeof fn); // function
    var a;
    console.log(typeof a);  // und

    console.log("-------------------");

    console.log(typeof [1,2,3]);  // object
    console.log(typeof {name:"wc"});  // object
    let d = new Date();
    console.log(typeof d);  // object
    console.log(typeof null);  // object

</script>

2.toString

<script>
    // 在Object的原型对象上，有一个属性，叫toString
    console.dir(Object.prototype);

    // 在JS内置的构造器中，它们的原型对象上，都有一个叫toString的属性
    console.dir(Number.prototype);
    console.dir(Array.prototype);
    console.dir(Function.prototype);
    console.dir(String.prototype);
    console.dir(Boolean.prototype);
</script>

<script>
    let obj = {name:"wc"}
    console.log(obj.toString());  // [object Object]

    // 结论：下面的构造器中的toString和Object方法中的toString的结果不一样的
    let arr = ["a","b","c"];
    console.log(arr.toString());  // a,b,c

    function fn(){}
    console.log(fn.toString());  // function fn(){}

    let num = 123;
    console.log(num.toString()); // 123

    let str = "hello";
    console.log(str.toString());  // hello

    // ....
</script>

<script>
    // 让其它的数据类型调用Object的原型对象上的toString方法
    let arr = ["a","b"]
    // 让arr去借用Object的原型对象上的toString方法
    console.log(Object.prototype.toString.call(arr));  // [object Array]
    console.log(Object.prototype.toString.call("hello"));  // [object String]
    console.log(Object.prototype.toString.call(123));  // [object Number]
    console.log(Object.prototype.toString.call(true));  // [object Boolean]
    function fn(){}
    console.log(Object.prototype.toString.call(fn));  // [object Function]
    let d1 = new Date()
    console.log(Object.prototype.toString.call(d1));  // [object Date]
    console.log(Object.prototype.toString.call({}));  // [object Object]
    var a;
    console.log(Object.prototype.toString.call(a));  // [object Undefiend]
    console.log(Object.prototype.toString.call(null));  // [object Null]
</script>

3.封装一个方法

<script>
    // 封装一个方法，此方法可以检测一个数据的数据类型
    function getType(data){
        // console.log(Object.prototype.toString.call(data));
        // console.log(Object.prototype.toString.call(data).slice(8));
        let str = Object.prototype.toString.call(data).slice(8);
        // console.log( str.substr(0,str.length-1).toLowerCase() );

        return str.substr(0,str.length-1).toLowerCase() 
    }

    console.log(getType(["a","b"]));  // array
    console.log(getType(123));  // number
    console.log(getType(null));  // null
    console.log(getType({}));
    function fn(){}
    console.log(getType(fn));
    let d1 = new Date();
    console.log(getType(d1));
</script>