call、apply和bind

本文深入探讨了JavaScript中函数的this指向问题,特别是普通函数调用与构造函数的区别。同时,详细阐述了call、apply和bind的相同点和不同点,以及它们在改变函数执行环境和实现继承中的应用。此外,还举例说明了apply在处理数组参数上的优势,并介绍了bind用于预设函数上下文的方法。通过对这些概念的理解,有助于提升JavaScript编程技能。
摘要由CSDN通过智能技术生成
            function test(){
                console.log(this)
            }
            test();//打印window
            var t=new test()//打印test(){}

首先我们要明白上面这个this指向问题,普通函数调用,this指向window,而通过new来实例化一个构造函数的对象,则this指向函数。

1.call、apply和bind 的相同点和不同点

相同点:call、apply和bind都是JS函数的公有的内部方法,他们都是重置函数的this,改变函数的执行环节。

不同点:bind是创建一个新的函数,而call和aplay是用来调用函数;call和apply作用一样,只不过call为函数提供的参数是一个个地罗列出来,而apply为函数提供的参数是一个数组。

2.call的用途。

首先,在函数调用的时候,我们都习惯直接调用,比如说function test(){};test();其实这并不是函数调用的本质,本质是test.call();test()只不过是本质的语法糖,它只能调用,而不能改变函数的执行环境。如下所示。

            function test(){
                console.log("hello world");
            }
            //函数的一般调用
            test();
            //函数调用的本质
            test.call()

那么call是如何改变函数的执行环境的?如下所示:

            //这个myName变量相当于给window这个对象添加了一个myName属性
             var myName="yyl"
            function test(){
                //此时的this就是指window
                console.log(this.myName)//打印yyl
            }
            test()
            var obj={myName:"hhh"}
            test.call(obj)//打印hhh

这也就解释了我们之前写的那篇原型中,子函数要想继承父函数需要在子函数中写{Father.call(this)},这个this指向的是Son函数,那么就改变了Father的this指向,将其指向到Son函数中,也就实现了Son函数的实例调用Father的属性。如下所示。

            function Father() {
                this.health = "very good"
            }
            function Son() {
                Father.call(this);
            }
            var son = new Son();
            console.log(son.health)//打印very good

当然,这样写也可以。

            function Father() {
                this.health = "very good"
            }
            function Son() {}
            var son = new Son();
            Father.call(son);
            console.log(son.health)//打印very good

3.apply的用途。

apply除了后面的参数形式与call有区别,其他都一样。比如上面所有用到call的地方都可以用apply来代替。千万不要小看了这个这个参数形式,有些情况下就只能用apply不能用call,比如使用Math.max去获取数组(这个数组有很多元素)的最大值时,若是用call,需要将数组的所有元素陈列出来,而使用apply直接写一个数组就可以。如下:

            var arr=[1,3,2,6,4];
            //1.普通调用方法,是下面这个call方法的语法糖
            console.log(Math.max(1,2,3,6,4))//打印6
            //调用的实质
            console.log(Math.max.call(null,1,2,3,6,4));//打印6
            //使用apply方法
            console.log(Math.max.apply(null,arr));//打印6

4.bind的用途。

直接上代码:

             var myName="yyl";
             function test1(){
                 console.log(this.myName);
             }
             test1();//打印yyl
             var obj={myName:"hhh"}
             var test2=test1.bind(obj);
             test2();//打印hhh

可以看出bind与call的唯一区别就是call直接改变函数test的指向,而bind是生成了一个新函数test2,该函数改变了指向。

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值