1. 欧力给首页
  2. 日常随笔

js 中的call，apply与bind

• 日常随笔 • 阅读 2744

先看W3C官方定义：它可以用来调用所有者对象作为参数的方法，通过call能够使用属于另一个对象的方法

js 中的call，apply与bind

再看demo

比较person和person2，person2 未定义getAge 方法，正常情况下调用 person2.getAge 会报 ‘is not a function’ 

        var person = {
            age: 18,
            name:"人物1",
            getAge: function ( ...param) {
                console.log( '参数',param)
                return this.name + "，年龄=" + this.age
            }
        }

        var person2 = {
            age: 19,
            name:"人物2"
        }
        console.log( person.getAge() )
        console.log( person.getAge.call(person2,1,2,3) )
        console.log( person.getAge.apply(person2,[1,2,3]) )

        var func = person.getAge.bind( person2 ,1,1,2,3,4)
        console.log( func() )

使用call，apply，bind后运行的结果

js 中的call，apply与bind

很明显， person2 未定义getAge，通过call，apply，bind使用person1的 getAge 方法，使 getAge方法 属于person2，这里也有另外一种说法：改变指针，即改变 getAge 里面的this指针，使this指向person2

bind有些不同，使用bind会返回一个新方法（如上func），运行新方法才会得到结果

call与bind分别接收参数，如 person.getAge.call(person2,1,2,3) 、 person.getAge.bind( person2 ,1,1,2,3,4) ，参数依次排列

apply 接收数组形式参数 ，如 person.getAge.apply(person2,[1,2,3])

call，apply，bind在观察者模式下最为常见

原创文章，作者：ourygey，如若转载，请注明出处：https://ourygey.com/2022/04/18/js-%e4%b8%ad%e7%9a%84call%ef%bc%8capply%e4%b8%8ebind/

赞 (1)
0
上一篇 2022-03-31 16:09
下一篇 2022-04-20 16:38

相关推荐

发表评论

您的电子邮箱地址不会被公开。

记住昵称、邮箱和网址，下次评论免输入