Javascript高级学习笔记5--apply,call和bind方法

apply,call和bind

1、apply,call

 

apply() 方法有两个参数，用作 this 的对象和要传递给函数的参数的数组.

　　函数名字.apply(对象,[参数1,参数2,...]);

　　方法名字.apply(对象,[参数1,参数2,...]);

call()方法它的第一个参数用作 this 的对象,其他参数都直接传递给函数自身.

　　函数名字.call(对象,参数1,参数2,...);

       方法名字.call(对象,参数1,参数2,...);

 

apply和call方法也是函数的调用方法

先创建普通函数：

        function f1(x,y){
            console.log("结果是"+(x+y)+this);
            return "太帅了";
        };
　　　　  function f2(x,y)

　　　　　　　　console.log("这是window的一个函数"+(x+y)+this.sex);

　　　　  };
        f1(10,20);  //函数的调用  结果是30window   
　　　　　f2(10,20);  //这是window的一个函数30undefinde

在通过apply和call方法的方式来调用方法：

        //这时的f1被当成对象来使用的
        f1.apply();  //结果是NaNwindow
        f1.call();   //结果是NaNwindow    

f1函数被执行了(这也是apply和call与bind的一个显著的区别)

apply和call都可以让函数或者方法来调用,传入参数和函数自己调用的写法不一样,但是效果是一样的

 

再给apply和call方法中传入参数:

        f1.apply(null); //结果是NaNwindow
        f1.call(null); //结果是NaNwindow
      
        f1.apply(null,[100,200]); //结果是300window
        f1.call(null,100,200); //结果是300window

*不传或者传null,undefined，函数中的 this 指向 window 对象

 

调用apply和call方法拥有返回值(和bind方法有明显的区别)

        var result1 = f1.apply(null,[100,200]);
        var result2 = f1.call(null,100,200);
        console.log(result1); //太帅了
        console.log(result2); //太帅了

调用apply和call方法返回的是函数的返回值

 

*传递另一个函数的函数名，函数中的 this 指向这个函数的引用

 

    f1.apply(f2); //f2(){}
    f1.call(f2); //f2(){}

 

 

*传递一个对象,函数中的this指向这个对象

        var obj={
            age:10,
            sex:"男"
        };
        f1.apply(obj,[10,20]); //结果是30Object
　　　　  f1.call(obj,10,20); //结果是30Object

 

属性问题:

function Person(age,sex){
            this.age=age;
            this.sex=sex;
        };
        //通过原型添加方法
        Person.prototype.sayHi=function(){
            console.log("性别："+this.sex);
        };
        var per = new Person(10,"男");
        per.sayHi(); //性别：男

        function Stuendt(name,sex){
            this.name=name;
            this.sex=sex;
        };
        var stu = new Stuendt("guoguo","女");
        per.sayHi.apply(stu); //最后结果:性别：女 apply改变了this的指向所以this.sex为女

apply和call来源:

所有的函数都是Function的实例对象.

        function Person1(){
            this.Hi=function(){ console.log("你好");};
        };
        Person1.prototype.Hello=function(){ console.log("我在原型中");};
        var per = new Person1();
        per.Hi();
        per.Hello();
        console.dir(per); //Hi方法在实例对象中,Hello在原型对象中    

实例对象调用方法,方法要么在实例对象中存在要么在原型对象中存在

那么apply和call到底在哪呢 ----        ☟(ˆ▽ˆ)

        function f11(){
            console.log(this+"函数被调用了");
        };
        console.dir(f11); //实例对象中没有apply和call方法但是原型对象中有apply和call方法
        //对象调用方法,说明该对象中有这个方法
        f11.apply();
        f11.call();
        console.log(f11.__proto__);  //function() {[native code]}
        console.log(f11.__proto__==Function.prototype);  //true
        //所有的函数都是Function的实例对象
        console.log(Function.prototype);  //function() {[native code]}
        console.dir(Function);    //在Function的原型对象中找到了apply和call方法    

apply和call方法实际上并不在函数这个实例对象中而是在Function的prototype中

 

apply和call的区别是第二个传入参数的方式不同

 

2、bind方法

bind方法是复制的意思

使用语法:
 　　函数名.bind(对象,参数1,参数2,...);  返回值是复制之后的函数
        方法名.bind(对象,参数1,参数2,...);  返回值是复制之后的方法

 

bind方法返回的是一个函数

bind方法参数传入方式:

        function f1(x,y){
            console.log((x+y)+"---"+this); //这里的this是window
        };

　　　　function Person(){

            this.age=10000;

        };

        Person.prototype.Hi=function(){console.log("你好");};

var ff = f1.bind(null);
        ff(100,200); //300---window
        var ff = f1.bind(null,100,200);
        ff(); //300---window

参数可以在复制的时候传入进去,也可以在调用的时候传入进去.

 

改变this的指向

        var per = new Person();
        var ff = f1.bind(per,1000,2000);
        ff();  //3000---Object                这里调用时this指向的是per

 

属性问题:

        function Person1(age){
            this.age=age;
        };
        Person1.prototype.play=function(){
            console.log(this+"-----"+this.age);
        };
        function Student(age){
            this.age=age;
        };
        var per = new Person1(10);
        var stu = new Student(20);

        var ff = per.play.bind(stu);
        ff();  //20     bind改变了this的指向

 

bind应用:

获得一个随机数并且重复输出

         function ShowRandom(){
            //产生1-10的随机数
            this.number=parseInt(Math.random()*10+1);
        };
        //添加原型方法
        ShowRandom.prototype.Interval1=function(){
            //改变了定时器中this的指向
            setInterval(this.show1.bind(this),1000);
            //每隔1秒输出一次产生的重复数字
        };
        ShowRandom.prototype.show1=function(){
            console.log(this.number); //产生一次随机数
        };
        var sr = new ShowRandom();
        //只调用一次方法所以只产生一次随机数
        sr.Interval1();

 

一个学习JS的新生,有哪里写的不对的地方或者不完善的地方希望前辈帮忙指教，谢谢 。

≧◠◡◠≦✌