JavaScript系列：函数调用方式

有关JS的问题，持续更新..

一，函数调用的4种方式

　　1，函数调用模式

　　//下面这种模式叫 “函数调用模式”：窗后window来调用
　　//函数调用四种方式的基础
　　//这tm不就是作用域this的问题吗
　　//我们最常用的定义函数方式，function a(){}就是"函数调用模式"，只要记得这种方法内的this是window便可。

 function whichObj1() {
            this.a = 1;     //this==> window
            alert(this.a+'+'+this);
        }
        whichObj1(); //本质window. whichObj1();用window可以“点”出这个方法
  
        /*下面的定义函数，函数内的this，注意不是whichObj2，是window*/
        /*这种采用var的定义函数方式，和 function whichObj2(){}一样*/
        var whichObj2 = function () {
            this.a = 2;     //this==> window
            alert(this.a + '+' + this);
        }
        whichObj2(); //本质window. whichObj1();用window可以“点”出这个方法

你懂this吗

　　函数调用函数

 function fun1() {
            alert("fun1");
        }
        function fun2() {
            fun1(); // 在函数B中，调用A方法
            alert("fun2");
        }
        fun2();

fun1(){fun2()}，fun1执行的就是fun2()

　　下面看一个例子

 <script type="text/javascript">
    var add = function(a, b) {
         return a + b;
     }
  
     var myObject = {
         value:3
     };
  
     myObject.func = function() {
         var helper = function() {
             this.value = add(this.value, this.value); //此处3个value均为NAN，因为this指向window
         }
  
 　　　　// 函数调用模式
     　　helper();
     }
      
 　　// 方法调用模式
 　　 myObject.func();
  
     alert(myObject.value);//为3不是6
              
 </script>
  
  
 //为什么不是6呢
 //改进
 <script type="text/javascript">
     var add = function(a, b) {
         return a + b;
     }
  
     var myObject = {
         value:3
     };
  
     myObject.func = function() {
         var that = this; // this对应myObject对象   （1）
         var helper = function() {
             //this.value = add(this.value, this.value); //这里调用模式为函数调用模式，而非方法调用模式，所以this对应全局对象   （2）
             that.value = add(that.value, that.value);
         }
 　　　　
 　　　　// 函数调用模式
     　　helper();
     }
       
 　　// 方法调用模式  
 　　 myObject.func();
  
     alert(myObject.value);
              
 </script>

函数调用模式：window直接调用。不是某个对象调用。

　　2，方法调用模式

　　//下面这种模式叫 “方法调用模式”：方法作为一个json对象的成员来调用。一般函数做为成员，我们通常称之为方法
　　//这种调用模式，方法内的this指的是本json对象
　　//这个json对象，随意可以"点"出一个成员（加入'点'出方法,那么这个方法内的this记得是这个json对象）

 function makeArray(arg1, arg2) {
            return [this, arg1, arg2];
        }
        var arrayMaker = {
            someProperty: 'some value here',
            make: makeArray
        };
  
        //invoke the make() method
       console.log(arrayMaker.make('one', 'two'));
        // => [ arrayMaker, 'one', 'two' ]
       console.log(arrayMaker['make']('one', 'two'));
        // => [ arrayMaker, 'one', 'two' ]

方法调用模式，json对象调用成员的2中方式

　　 方法调用模式和函数调用模式区别：this的大转变

  function makeArray(arg1, arg2) {
             return [this, arg1, arg2];
         }
 console.log(makeArray('one', 'two'));//this指向window
 //但是将此函数放到json对象，为为一个方法来调用，怎么this就从window变成了json对象了呢？

方法调用模式和函数调用模式的对比，同一个函数，this指向怎么就变了呢？

我们不去谈理论上的作用域链，记住：哪个对象调用这个fucntion a(){this...},这this就指哪个对象。

上面在一个函数里面：var helper=function(){this.value..},请问这个helper函数的调用对象是谁？

没写默认值window，ok，所以this指向window。json对象调用，ok，this就是这个json对象。

哦，有人和var 这个有点乱，明确：和私有、公有木有关系。

哦，有人和fucntion helper(){this..}这种有点乱，明确：这两种几乎一样，ok，就把这两种当成一样。

再说，内嵌的函数使用外部函数的变量，也就是形成了闭包。

现在想一想，这两种模式，本质都一样嘛~window也是对象嘛~~为啥window调用函数非叫“函数调用模式”呢？其实就是比较”特殊的方法调用模式“而已。

不行，我还要举个常用的例子，看真正懂上面的不

 <input type="button" value="Button 1" id="btn1"  />
 <input type="button" value="Button 2" id="btn2"  />
 <input type="button" value="Button 3" id="btn3"  onclick="buttonClicked();"/>
  
 <script type="text/javascript">
 function buttonClicked(){
     var text = (this === window) ? 'window' : this.id;
     alert( text );
 }
 var button1 = document.getElementById('btn1');
 var button2 = document.getElementById('btn2');
  
 button1.onclick = buttonClicked;
 button2.onclick = function(){   buttonClicked();   };
 </script>

input的click事件中的this

第四

function doSomething (obj,evt) {
     var text =obj===window?window:obj.id;
     alert(text);//child2
 } 

<div id="child2" onclick="doSomething(this,event);" style="width:200px;height:200px;background-color:lightblue;">

　　

第一，this为所属的对象(按钮元素)。btn1

第二，外函数调用内函数，内函数函数体的this指的window。是window调用的。window

第三，和第二个一样。window

第四，dom中的this，指向就是这个dom元素

　　3，构造器调用模式

有关这个篇幅要长..

　　4，call apply调用方式

区别：call方法传参的时候，多加一个对象，参数依次写就ok。apply，多传一个对象，参数必须放到数组内