apply 、call 以及 bind 的使用和区别

一、被apply和call调用的函数中没有传递参数

(一)不传参数

在这里插入图片描述
结果:

在这里插入图片描述

(二)传递 null

在这里插入图片描述
结果:

在这里插入图片描述

总结:
1.当使用 apply和 call去调用函数并且没有传递参数时,前提这个函数中也没有传递参数,我们发现 他们的打印结果和 this 指向是相同的 都是指向window 此时相当于 f1() 调用函数 就相当于 f1.apply() 和 f1.call()
2.当传递 null 的时候,他们的指向也是相同的 都是指向 window
此时相当于 f1() 调用函数 就相当于 f1.apply(null) 和 f1.call(null)

(三)当传递一个具体对象时

在这里插入图片描述

结果:

在这里插入图片描述

我们发现 使用 f1.apply(stu) f1.call(stu) 去调用函数的时候,this的指向发生了改变,不再是 window,而是 Object

二、被 apply和 call 调用的函数中有参数传递

(一)apply和call不传递参数

在这里插入图片描述
结果:

在这里插入图片描述

总结:
apply和call没有传递参数,所以没有进行参数的运算,值是 NaN ,但是他们的this指向并没有改变,仍然是 window

(二)当传递null时

在这里插入图片描述
结果:

在这里插入图片描述

总结:
与不传参数的结果是一样的,值是 NaN,并且this 指向没有改变

(三)当传入一个具体对象时

在这里插入图片描述
结果:

在这里插入图片描述

总结:
两个方法传入具体对象时,都改变了 this的指向,this 指向不是 window ,而是 Object

思考:
两者都传入一个对象改变了 this 指向,但是如何去传入参数进行函数的运算呢???

(四)传入多个参数

在这里插入图片描述
结果:

在这里插入图片描述

总结:
1.apply和call传入的第一个参数表示 this 指向的对象
2.apply和call可以传递多个参数,只是他们传递参数的方式不一样
3.apply是以数组的方式传递参数的
4.call是以参数列表的方式传递参数的,也就是通过一个一个的方式传递参数

(五)改变this指向,获取对象中的属性值

在这里插入图片描述

在这里插入图片描述

总结:
1.f1()函数调用时,this的指向是window,而window中没有定义age这个属性值,所以是 undefined
2.apply和call都改变了 this 的指向,this 指向了 stu ,stu这个对象中有 age 这个属性值 ,所以输出 age = 18

三、被apply和 call 调用的函数中有返回值

在这里插入图片描述

在这里插入图片描述

总结:
apply 和 call 都使用变量来接收函数的返回值

四、原型指向改变案例

        function Person(food) {
            this.food = food
        }
        // 通过原型来添加方法
        Person.prototype.eat = function (x, y) {
            console.log('我好想吃 ---->' + this.food)
            console.log(x + y)
        }
        var per = new Person('大猪蹄')
        per.eat(100, 100)

        //创建 stu 对象,并添加属性和方法
        console.log('============================')

        function Student(food) {
            this.food = food
        }
        Student.prototype.study = function () {
            console.log('秃头少女的日常操作,天天敲代码')
        }

        var stu = new Student('大鸡腿')
        //改变this指向,让this指向 stu对象
        //能调用 per对象中的方法
        per.eat.apply(stu, [200, 200])
        //也能调用自己的方法
        stu.study()

结果:
在这里插入图片描述

五、总结apply与call

  • apply 的使用方式
    函数名字.apply (对象,[参数1,参数2,...])
    方法名字.apply (对象,[参数1,参数2,...])

  • call 的使用方式
    函数名字.call (对象,参数1,参数2,...)
    方法名字.call (对象,参数1,参数2,...)

  • 作用:改变this 的指向

  • 区别:参数传递的方式不一样

  • 使用场景:只要是想使用别的对象的方法,并且希望这个方法是当前对象自己的,那么就可以使用 apply 或者 call 的方法 改变 this 的指向

六、bind 方法的使用

在这里插入图片描述
结果:
在这里插入图片描述

我们发现,虽然使用了bind 方法,但是它并没有输出内容,所以,要用一个变量接收一下,然后再调用

在这里插入图片描述
结果:

在这里插入图片描述

还可以写成:
在这里插入图片描述

七、bind方法的案例

        function Person(say){
            this.say = say
        }
        Person.prototype.play = function(x,y){
            console.log('做人嘛~~最重要的就是要开心呐!!' + this.say )
            console.log(x+y)
        }
        var per = new Person('对呢对呢')
        per.play(10,10)
        //这是一条华丽的分割线
        console.log('==============================================')
        function Student(say){
            this.say = say
        }
        Student.prototype.study = function(){
            console.log('一根毛,两根毛,头上还有几根毛')
        }

        var stu = new Student('撒花撒花')
        //调用别人的方法
        var ff = per.play.bind(stu)
        ff(20,20)
        //调用自己的方法
        stu.study()

结果:

在这里插入图片描述

八、apply与call与bind之间的区别

相同点:

  1. 他们的作用都是相同的:改变 this 的指向
  2. 当他们不传参数的时候,就跟直接调用函数或者方法的作用一样,不改变this的指向
  3. 当只传入 null 的,与上面作用也是一样,不改变this的指向

不同点:

  1. apply 与 call 直接调用即可
  2. bind 要使用变量接收一下,然后再调用
  3. apply与call 是在调用的时候直接传递参数
  4. bind 可以在用变量接收的时候传递参数,也可以在接收后在调用中传递参数
  5. 传递参数的方式不一样
  • apply 的使用方式
    函数名字.apply (对象,[参数1,参数2,...])
    方法名字.apply (对象,[参数1,参数2,...])
  • call 的使用方式
    函数名字.call (对象,参数1,参数2,...)
    方法名字.call (对象,参数1,参数2,...)
  • bind 的使用方式:
    函数名字.bind (对象,参数1,参数2,...)
    函数名字. bind (对象),在调用时再传递参数
    方法名字.bind (对象,参数1,参数2,...)
    方法名字. bind (对象),在调用时再传递参数
posted @ 2020-12-01 12:30  杨芋可可  阅读(494)  评论(0编辑  收藏  举报