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

本文介绍了JavaScript中的call、apply和bind的使用场景,包括改变函数执行上下文和参数传递。同时,讲解了如何判断一个数据的数据类型,包括使用typeof、toString方法以及封装自定义判断方法。通过对这些方法的理解,能更好地掌握JavaScript中的函数调用和类型检测。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

一、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>

在这里插入图片描述

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值