码迷,mamicode.com
首页 > Web开发 > 详细

Web-Lesson07-JS的函数及作用域

时间:2018-01-24 21:58:57      阅读:222      评论:0      收藏:0      [点我收藏+]

标签:控制   步骤   rip   max   定义   too   set   fixed   关键词   

一、函数

  1.有名函数和匿名函数

    函数:是由事件驱动的或者当它被调用时执行的可重复使用的代码块,包裹在花括号中,前面使用了关键词 function:

    有名函数:有名字的函数
    函数名加括号执行 / 充当事件函数执行

    function fn() {

      alert(1);

    }
    fn();

    匿名函数:没有名字的函数
    匿名函数不能单独出现 一般充当事件函数,匿名函数的作用是避免全局变量的污染以及函数名的冲突   

    匿名函数主要三种写法:

    1)使用()将函数及函数后的括号包裹

      (function(){}());

      注:此方式把()换成[]也可以

    2)使用()值包裹函数值
      
(function(){})(); 

      注:此方式把()换成[]不可以

    3)可以使用多种运算符开头但一般用!
      !function(形参列表){}(实参列表)
    三种写法特点:
    1)能够将匿名函数与调用的()为一个整体,官方推荐使用;
    2)无法表明函数与之后的()的整体性,不推荐使用。
    3)使用!开头,结构清晰,不容易混乱,推荐使用;
//方式1,调用函数,得到返回值。强制运算符使函数调用执行
(function(x,y){
alert(x+y);
return x+y;
}(3,4)); 
 
//方式2,调用函数,得到返回值。强制函数直接量执行再返回一个引用,引用再去调用执行(效果和方式一一样)
(function(x,y){
alert(x+y);
return x+y;
})(3,4); 
//这种方式也是很多库爱用的调用方式,如jQuery,Mootools。
 
//方式3,使用void
void function(x) {
x = x-1;
alert(x);
}(9);
 
//方式4,使用-/+运算符
-function(x,y){
alert(x+y);
return x+y;
}(3,4);
+function(x,y){
alert(x+y);
return x+y;
}(3,4);
--function(x,y){
alert(x+y);
return x+y;
}(3,4);
++function(x,y){
alert(x+y);
return x+y;
}(3,4); 
 
//方式5,使用波浪符(~)
~function(x, y) {
alert(x+y);
return x+y;
}(3, 4); 
 
//方式6,匿名函数执行放在中括号内
[function(){
console.log(this) // 浏览器得控制台输出window
}(this)] 
 
//方式7,匿名函数前加typeof
typeof function(){
console.log(this) // 浏览器得控制台输出window
}(this) 
 
//方式8,匿名函数前加delete
delete function(){
console.log(this) // 浏览器得控制台输出window
}(this) 
 
方式9,匿名函数前加void
void function(){
console.log(this) // 浏览器得控制台输出window
}(this) 
 
//方式10,使用new方式,传参
new function(win){
console.log(win) // window
}(this) 
 
//方式11,使用new,不传参
new function(){
console.log(this) // 这里的this就不是window了
} 
 
//方式12,逗号运算符
//(逗号运算符的特性及作用:逗号运算符的作用是将若干表达式连接起来。它的优先级是所有运算符中最低的,结合方向是自左至右。)
function(){ console.log(this) // window }(); //方式13,按位异或运算符 ^function(){ console.log(this) // window }(); //方式14,比较运算符 function(){ console.log(this) // window }(); //最后看看错误的调用方式 function(x,y){ alert(x+y); return x+y; }(3,4); /*匿名函数的N种写法如下所示 匿名函数没有实际名字,也没有指针,怎么执行? 关于匿名函数写法,很发散~ +号是让函数声明转换为函数表达式。汇总一下 最常见的用法: 代码如下:*/ (function() { alert(‘water‘); })(); /*当然也可以带参数: 代码如下:*/ (function(o) { alert(o); })(‘water‘); /*想用匿名函数的链式调用?很简单: 代码如下:*/ (function(o) { console.log(o); return arguments.callee; })(‘water‘)(‘down‘); /*常见的匿名函数都知道了,看看不常见的: 代码如下:*/ ~(function(){ alert(‘water‘); })();//写法有点酷~ //代码如下: void function(){ alert(‘water‘); }();//据说效率最高~ //代码如下: +function(){ alert(‘water‘); }(); //代码如下: -function(){ alert(‘water‘); }(); //代码如下: ~function(){ alert(‘water‘); }(); //代码如下: !function(){ alert(‘water‘); }(); //代码如下: (function(){ alert(‘water‘); }());//有点强制执行的味道~

 

  2.函数定义和函数表达式

    1)函数定义 可以在定义前加括号执行,也可以在定义后加括号执行

      fn(1,2);
      function fn(x,y){
        alert(x+y);
        return x+y;
      }
      fn(3,4);

 

    结果弹出两次提示框,分别显示3和7。fn调用了两次;

 

    2)通过var 的函数,只能在后面运行   

 

      //fn(1,2);
      var fn = function(x,y){
        alert(x+y);
        return x+y;
      };
      fn(3,4);
    在var 之前的fn(1,2);不注掉,运行报错。注掉后弹出一次提示框,显示7。

  3.形参、实参和不定参

    1)实参:执行函数时 可以传递 (用已知的变量 / 具体的数据);

 

    2)形参:相当于函数局部的变量,命名规则和var相同;定义,无中生有

    var s = 5;
    fn(s);//实参
    function fn(x) {//形参
            // var x;
      alert(x)
      }
 
    //形参 / 实参都可以有多个,用 , 隔开
    sum(2,4);
    function sum(a,b) {
      alert(a+b)
    }
 
    //实参和形参个数不一定非得一样,但是不一样的时候要注意一一对应的关系
    sum(1,2,3,4);
    function sum(a,b,c) {
      alert(a+b+c);
    }
    //形参多了的话,没有对应的那些形参,值就是undefined     sum(1,2,3);     function sum(a,b,c,d) {       // var a,b,c,d;       alert(a+b+c+d);       alert(d);     }     sum(1,2,3);     function sum(a,b,c,d) {     // 给形参添加默认值       a = a || 0;       b = b || 0;       c = c || 0;       d = d || 0;       alert(a+b+c+d);     }

 

    3)不定参:arguments,存储着所有 实参 的集合

    注:无论有没有形参,实参都会被存在 不定参 里面

    sum(1,2,3,4,5,6,7,8,9);
    function sum() {
      alert(arguments.length);
      alert(arguments[8]);
      var x = 0;
      for(var i = 0 ,len = arguments.length; i < len; i ++){
        x += arguments[i];
      }
      alert(x);
    }    

  

  4.函数中return的作用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        #box{
            width: 200px;
            height: 200px;
            background: red;
        }
        .box{
            font-size: 18px;
            color: yellow;
        }
    </style>
</head>
<body>
    <div id="box"></div>
    <script>
        /*
        每个函数默认返回 return undefined
         */
        var oBox = document.getElementById("box");
        function fn() {
            oBox.innerHTML = "hahahah";//过程
            // return "bear";//结果
            return oBox;
        }
        var x = fn();
        alert(x);
        fn();
        fn().className = "box";//效果相当于oBox.className = "box";
</script> </body> </html>

 

一、作用域

  javascript解析顺序
    1.(定义)先解析var function 参数
      a.该步骤的var只定义变量,后面的=赋值不解析
      b.该步骤的函数只定义函数,函数的执行不解析
      c.重名的只留一个,var 和函数重名  函数优先
    2.(执行)再从上至下执行其他代码
      作用域:
      作用:读写
      域:范围,区域
      解析:从上至下
        1 找 var 定义函数 参数
        2 执行
    例:下面代码的执行顺序如注视
        var a = 1;
        function fn( a ) {
            alert(2);
            a = 3;
            alert(a);
        }
        fn( a );
        alert( a );
        /*
        1 找
            a = und;==》a = 1;
            fn = function fn( a ) {
                    // var a = 1;
                    alert(2);
                    a = 3;
            }
        2 执行
            a = 1;
            fn( a );=》fn(1)
                1 找
                    a = und;==>a = 1;==>a = 3;
                2 执行
                    a = 1;
                    alert(2);==>2
                    a = 3;
            alert( a ); ==>1
         */                        

 

一、常用方法

  1.关于数字的方法  

    1)js的六大数据类型:
      number,string,boolean,function,undefined,object
    2)number数字方法
      在js里面的小数和整数统一都是数字,-2^53-2^53,超出范围之后精度就会不准确
      Number()——参数中必须能被转换成数字,否则返回NaN:
      parseInt(解析的参数)——将参数转换为数字,整数部分遇到不是数字就停
      parseFloat()——将参数转换为数字,不是数字就停,否则直到小数部分遇到不是数字就停
      Num.toFixed(n)——四舍五入保留n位小数
      NaN(Not a Number) NaN 不等于自己

 

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
    </style>
</head>
<body>
    <script>
        var x = "hah";
        alert(typeof x);//string
        alert(Number(x));//NaN
        alert(typeof Number(x));//number
 
        var x = "78.25";
        alert(parseInt(x));
        alert(typeof parseInt(x));
        alert(parseFloat(x));
        alert(typeof parseFloat(x));
 
        var x = 25.88254;
        alert(x.toFixed(3));
    </script>
</body>
</html>

  

  2.数学方法  

    Math 数学函数
      Math.pow(16, 2)——十六的平方 256
      Math.round(5.5)——四舍五入(整数)
      Math.ceil(0.2)——向上取整
      Math.floor(0.9)——向下取整
      Math.max()——取参数中最大的值
      Math.min()——取参数中最小的值
      Math.random()——0-1的随机数 (小数点后15位)
      Math.random()*m+n 生成 n ~ (m+n)之间的数
      Math.PI——π=3.141592653589793  
      Math.abs()——求绝对值

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
    </style>
</head>
<body>
    <script>
        alert(Math.pow(3,4));
        alert(Math.round(25.99));
        alert(Math.ceil(0.1));
        alert(Math.floor(0.99));
        var x = Math.max(12,0,2,-5);
        var y = Math.min(12,0,2,-5);
        alert(x);
        alert(y);
        alert(Math.random());//[0,1)
        alert(Math.random()*20 + 10);
        alert(Math.PI);
        alert(Math.abs(-10));
    </script>
</body>
</html>    

 

Web-Lesson07-JS的函数及作用域

标签:控制   步骤   rip   max   定义   too   set   fixed   关键词   

原文地址:https://www.cnblogs.com/bear905695019/p/8339271.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!