函数的call()、apply()和this——JS

函数的call()、apply()方法

函数也是对象，它也有方法。

• call(）和apply()这两个方法都是函数对象的方法,需要通过函数对象来调用
• 当对函数调用call()和apply()都会调用函数执行。
• fun.call()\fun.apply() 和 fun() 的区别：
  在调用call（）和apply()可以将一个对象指定为第一个参数，即：此时这个对象将会成为函数执行时的this。 就是说此时该对象短暂地拥有该函数的使用权。

不使用call和apply时：

 function fun(){
      alert(this);
  }
  var obj = {};
  fun();

输出的是 [Object Window]

使用call和apply时，将obj可以作为参数：

       function fun(){
            alert(this);
        }
        var obj = {};
        fun.call(obj);

输出的是 [Object Object]，这个Object就是传入的对象。
这就说明此时函数中的this，就是指代传入对象obj。

eg：

        function fun(){
            alert(this.name);
        }
        var obj = {name:"我是obj"};
        fun.call(obj);

        </script>

输出：

优点
方便对象值的更改

• eg:两个对象之间通过call进行联系

          var obj1 = {
              name:"obj1",
           sayname: function(){
           alert("我是"+this.name)
          }};
         var obj2 ={
             name:"obj2"
         };
         obj1.sayname.call(obj2);

输出：

• 如果函数需要实参
  使用call()调用：
  call()方法可以将实参在对象之后依次传递

fun.call(obj,2,3);

2,3是参数

使用apply()调用：
apply()方法需要将实参封装到一个数组中统一传递

fun.apply(obj,[2,3]);

THIS小结

this的情况:

1.以函数形式调用时， this永远都是window
2.以方法的形式调用时， this是调用方法的对象
3.以构造函数的形式调用时，this是新创建的那个对象
4.使用call和apply调用时， this是指定的那个对象

总之一句话，谁调用函数this就是谁。

做构造函数的函数

this是新创建的那个对象。

函数做构造函数时使用，this.属性 就代表对象添加的属性， 则只有 对象.属性 才能调用该属性，构造 函数.属性 无法调用。
eg：

        function Fn (){
            // 函数做构造函数时使用，this.属性 就代表对象添加的属性，
            // 则只有 对象.属性 才能调用该属性，构造函数.属性 无法调用
            var a = 10;
            this.b =20;
            this.test1 = function (){
               console.log('test1');   
            }   
        }
        console.log(Fn.a)
        console.log(Fn.b)
          
        var fn = new Fn();
        console.log(fn.a)
        console.log(fn.b)
        fn.test1();  

a 是局部变量，函数执行完就消失。

做正常函数的函数

this永远都是window

        function Fn (){
            var a = 10;
            this.b =20;
            this.test1 = function (){
               console.log('test1');   
            }   
        }
        
        Fn()
        // console.log(a)
        console.log(b)
        test1()