有关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,多传一个对象,参数必须放到数组内

最新文章

  1. Linux关闭休眠和屏保模式
  2. ReferenceEquals和 == 和equals()的比较
  3. Inventory of the materials to teach you how to query a date certain combination of dimensions
  4. MMU和TLB
  5. Part 89 to 91 Talking about pass the parameters in thread
  6. bzoj1799
  7. Spring MVC 3.2 406 Not Acceptable
  8. Java中Math类的常用方法
  9. SQL Server DATA文件夹下audittrace20180124152845_52.trc类文件异常增多
  10. servlet的xx方式传值中文乱码
  11. echarts和highcharts比较
  12. Statistical Artifact (error)
  13. STM32 ADC转换时间
  14. SpringBoot实现监听redis key失效事件
  15. 《图解 HTTP 》阅读 —— 第一章
  16. iOS边练边学--UIGestureRecognizer手势识别器简单介绍
  17. kettle中denormalizer(列转行)的使用
  18. 使用ThinkPHP5连接数据库
  19. NS10.1 产品技术规范
  20. 【密码学】RSA密钥长度、明文长度和密文长度

热门文章

  1. 6个朋友(codevs 2832)
  2. VS2013+opencv2.4.9(10)配置
  3. linux常见问题集锦
  4. Android之jni深入
  5. Android之jni入门
  6. css div 清理浮动的2种方法
  7. Sql server之路 (四)添加本地数据库MDF文件
  8. android中ADT和SDK的关系(转)
  9. android 检测sqlite数据表中字段(列)是否存在 (转)
  10. C++的那些事:表达式与语句