Web-Lesson07-JS的函数及作用域
一、函数
1.有名函数和匿名函数
函数：是由事件驱动的或者当它被调用时执行的可重复使用的代码块，包裹在花括号中，前面使用了关键词 function：
有名函数：有名字的函数
函数名加括号执行 / 充当事件函数执行
function fn() {
alert(1);
}
fn();
匿名函数：没有名字的函数
匿名函数不能单独出现 一般充当事件函数，匿名函数的作用是避免全局变量的污染以及函数名的冲突
匿名函数主要三种写法：
1)使用()将函数及函数后的括号包裹
(function(){}());
注：此方式把（）换成[]也可以
2)使用()值包裹函数值
(function(){})();
注：此方式把（）换成[]不可以
！function(形参列表){}(实参列表)
1)能够将匿名函数与调用的()为一个整体，官方推荐使用；
2)无法表明函数与之后的()的整体性，不推荐使用。
//方式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);
2）通过var 的函数，只能在后面运行
//fn(1,2);
var fn = function(x,y){
alert(x+y);
return x+y;
};
fn(3,4);
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);} //形参多了的话，没有对应的那些形参，值就是undefinedsum(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);==>2a = 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);//stringalert(Number(x));//NaNalert(typeof Number(x));//numbervar 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> 转载于:https://www.cnblogs.com/bear905695019/p/8339271.html
Web-Lesson07-JS的函数及作用域相关推荐
- js 匿名函数_javascript：函数的使用
大家好,我是专注于前端开发,前端入门,精神可爱的前端小学妹,本期为大家带来的Web前端学习知识是"javascript:函数的使用",喜欢Web前端的朋友,一起看看吧! 主要内容: ...
- web前端-JS（DOM、BOM）
web前端-JS(DOM.BOM) 1. DOM- 操作元素 1.1 获取元素 1.2 事件基础 1.3 操作元素 1.3.1 改变元素的内容 1.3.2 常见元素的属性操作 1.3.3 表单元素的属 ...
- web前端-JS入门
web前端-JS入门 1.初识JavaScript 1.1 JavaScript的简单介绍 1.2 JS的三种写法 1.2.1 行内式 1.2.2 内嵌式 1.2.3 外部js 1.3 JS输入输出语 ...
- js变量以及其作用域详解
2019独角兽企业重金招聘Python工程师标准>>> 一.变量的类型 Javascript和Java.C这些语言不同,它是一种无类型.弱检测的语言.它对变量的定义并不需要声明变量 ...
- JS基础篇之作用域、执行上下文、this、闭包
前言:JS 的作用域.执行上下文.this.闭包是老生常谈的话题,也是新手比较懵懂的知识点.当然即便你作为老手,也未必真的能理解透彻这些概念. 一.作用域和执行上下文 作用域: js中的作用域是词法作 ...
- web前端教程之JavaScript的作用域
作为一个前端工程师,你必须对JavaScript的作用域不陌生,传统常见的有函数级作用域,还有全局作用域,ES6 let const 的块级作用域,其实还有一个你不知道的块级作用域,今天小千就来给大家 ...
- js箭头函数和普通函数区别
js箭头函数和普通函数区别 实验环境:nodejs v12.16.1 箭头函数不能作为构造函数,而普通函数可以 箭头函数没有原型,而普通函数有 箭头函数return可以省略语句块.(如果=>右边 ...
- 相学java_从这两套题，重新认识JS的this、作用域、闭包、对象
日常开发中,我们经常用到this.例如用Jquery绑定事件时,this指向触发事件的DOM元素:编写Vue.React组件时,this指向组件本身.对于新手来说,常会用一种意会的感觉去判断this的 ...
- 函数的作用域以及预编译
一.函数的作用域 函数作用域有点像单面镜(外面看不到里面,里面可以看到外面) JS的特点:单线程.是 解释性语言 (翻译一行,执行一行) 二.预解析 JS预解析三部曲:语法解析 ⇒ 预编译 ⇒ 解释执 ...
- js 闭包函数 构造函数_JavaScript中的闭包，库里函数和酷抽象
js 闭包函数 构造函数 In this article, we will talk about closures and curried functions and we'll play aroun ...
最新文章
- Tomcat配置server.xml
- JAXB--@XmlElementWrapper注解和泛型一起使用
- android屏幕底部黑块,Android surfaceView 黑块问题
- 设置linux英文环境,英文Linux里中文和日文用户环境设置
- 主板24pin接口详图_【图解】主板连线接口最详尽图文解释
- linux c select函数使用求解释
- 8条体面的程序员偷懒技巧
- (best!)JAVA中文字符编码问题详解
- FFmpeg源代码简单分析：libswscale的sws_getContext()
- Java二分查找代码
- 2016年全国房价会呈什么趋势?
- Mac上制作Linux U盘启动盘
- 不知如何选股？不知哪种指标策略可靠？量化分析比较DMA、DMI、MACD、KDJ、BOLL指标策略收益情况
- php v8js 执行外部js,php运行jsv8引擎
- 解决fatal: could not get a repository handle
- HKEY_LOCAL_MACHINE和HKEY_CURRENT_USER开机启动程序的区别
- idea 2020.3更新后如何实现run parallel
- 地图开发技术报告（百度地图）
- 成为一名优秀的架构师需要哪些条件?
- SQL中的笛卡尔你真的懂吗？