分享web开发知识

注册/登录|最近发布|今日推荐

主页 IT知识网页技术软件开发前端开发代码编程运营维护技术分享教程案例
当前位置:首页 > IT知识

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

发布时间:2023-09-06 01:39责任编辑:蔡小小关键词:Web作用域

一、函数

  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,使用voidvoid 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,匿名函数前加typeoftypeof function(){console.log(this) // 浏览器得控制台输出window}(this) ?//方式8,匿名函数前加deletedelete function(){console.log(this) // 浏览器得控制台输出window}(this) ?方式9,匿名函数前加voidvoid 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的函数及作用域

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

知识推荐

我的编程学习网——分享web前端后端开发技术知识。 垃圾信息处理邮箱 tousu563@163.com 网站地图
icp备案号 闽ICP备2023006418号-8 不良信息举报平台 互联网安全管理备案 Copyright 2023 www.wodecom.cn All Rights Reserved