JavaScript 中 call()、apply()、bind() 的用法
in 前端 with 0 comment

JavaScript 中 call()、apply()、bind() 的用法

in 前端 with 0 comment

作用

重新定义this对象的内容

区别

1535346409-8172-20170316172537651-1643313633.png

obj.myFun.call(db);    // 把this对象设置为db 触发函数
obj.myFun.apply(db);    // 把this对象设置为db 触发函数
obj.myFun.bind(db)();   // 把this对象设置为db 返回新函数 不自动执行

传参

都可以接受任意类型的参数,但是传参方式有所不同

obj.myFun.call(context,param1,param2,...); // 逗号分隔,逐个往后加
obj.myFun.apply(db,[param1,param2,...]);   // 包裹在一个Array中 逗号分隔,逐个往后加
obj.myFun.bind(db,param1,param2,...);      // 逗号分隔,逐个往后加

吐槽

最开始在别人blog看到这么一段代码,当时我以为Student类中apply()的第二个参数随便填就能把当前方法中的参数映射过去。
类似php中的func_get_args(),能获取到传入当前方法的参数集合。然后发现这arguments是 js中数组对象 的名词。。。

    /*定义一个人类*/  
    function Person(name,age)  
    {  
        this.name=name;  
        this.age=age;  
    }  
    /*定义一个学生类*/  
    function Student(name,age,grade)  
    {  
        Person.apply(this,arguments);  
        this.grade=grade;  
    }  
    //创建一个学生类  
    var student=new Student("zhangsan",21,"一年级");  
    //测试  
    alert("name:"+student.name+"\n"+"age:"+student.age+"\n"+"grade:"+student.grade);  
    //大家可以看到测试结果name:zhangsan age:21  grade:一年级  
    //学生类里面我没有给name和age属性赋值啊,为什么又存在这两个属性的值呢,这个就是apply的神奇之处. 
Comments are closed.