#9.6课堂JS总结#变量作用域 date()对象 math()对象
一、变量的作用域
1、JavaScript的作用域链
首先看下下面这段代码:
<script type="text/javascript"> var rain = 1; function rainman(){ var man = 2; function inner(){ var innerVar = 4; alert(rain); } inner(); //调用inner函数 } rainman(); //调用rainman函数 </script>
观察alert(rain);这句代码。JavaScript首先在inner函数中查找是否定义了变量rain,如果定义了则使用inner函数中的rain变量;如果inner函数中没有定义rain变量,JavaScript则会继续在rainman函数中查找是否定义了rain变量,在这段代码中rainman函数体内没有定义rain变量,则JavaScript引擎会继续向上(全局对象)查找是否定义了rain;在全局对象中我们定义了rain = 1,因此最终结果会弹出'1'。
作用域链:JavaScript需要查询一个变量x时,首先会查找作用域链的第一个对象,如果以第一个对象没有定义x变量,JavaScript会继续查找有没有定义x变量,如果第二个对象没有定义则会继续查找,以此类推。
上面的代码涉及到了三个作用域链对象,依次是:inner、rainman、window。
2、函数体内部,局部变量的优先级比同名的全局变量高。
<script type="text/javascript"> var rain = 1; //定义全局变量 rain function check(){ var rain = 100; //定义局部变量rain alert( rain ); //这里会弹出 100 } check(); alert( rain ); //这里会弹出1 </script>
3、JavaScript没有块级作用域。
这一点也是JavaScript相比其它语言较灵活的部分。
仔细观察下面的代码,你会发现变量i、j、k作用域是相同的,他们在整个rain函数体内都是全局的。
<script type="text/javascript"> function rainman(){ // rainman函数体内存在三个局部变量 i j k var i = 0; if ( 1 ) { var j = 0; for(var k = 0; k < 3; k++) { alert( k ); //分别弹出 0 1 2 } alert( k ); //弹出3 } alert( j ); //弹出0 } </script>
4、函数中声明的变量在整个函数中都有定义。
首先观察这段代码:
<script type="text/javascript"> function rain(){ var x = 1; function man(){ x = 100; } man(); //调用man alert( x ); //这里会弹出 100 } rain(); //调用rain </script>
上面得代码说明了,变量x在整个rain函数体内都可以使用,并可以重新赋值。由于这条规则,会产生“匪夷所思”的结果,观察下面的代码。
<script type="text/javascript"> var x = 1; function rain(){ alert( x ); //弹出 'undefined',而不是1 var x = 'rain-man'; alert( x ); //弹出 'rain-man' } rain(); </script>
是由于在函数rain内局部变量x在整个函数体内都有定义( var x= 'rain-man',进行了声明),所以在整个rain函数体内隐藏了同名的全局变量x。这里之所以会弹出'undefined'是因为,第一个执行alert(x)时,局部变量x仍未被初始化。
所以上面的rain函数等同于下面的函数:
function rain(){ var x; alert( x ); x = 'rain-man'; alert( x ); }
5、未使用var关键字定义的变量都是全局变量。
<script type="text/javascript"> function rain(){ x = 100; //声明了全局变量x并进行赋值 } rain(); alert( x ); //会弹出100 </script>
这也是JavaScript新手常见的错误,无意之中留下的许多全局变量。
6、全局变量都是window对象的属性
<script type="text/javascript"> var x = 100 ; alert( window.x );//弹出100 alert(x); </script>
等同于下面的代码
<script type="text/javascript"> window.x = 100; alert( window.x ); alert(x) </script>二、javascript内部函数1.escape 和 unescape 进行URL编码和解码
var url = “http://www.baidu.com/s?name=小米”; url = escape(url); alert(url); alert(unescape(url));
2.Date()对象
getFullYear() :返回Date对象的年份值;4位年份。
getMonth() :返回Date对象的月份值。从0开始,所以真实月份=返回值+1 。
getDate() :返回Date对象的月份中的日期值;值的范围1~31 。
getHours() :返回Date对象的小时值。
getMinutes() :返回Date对象的分钟值。
getSeconds() :返回Date对象的秒数值。
getMilliseconds() :返回Date对象的毫秒值。
getDay() :返回Date对象的一周中的星期值;0为星期天,1为星期一、2为星期二,依此类推
getTime() :返回Date对象与'1970/01/01 00:00:00'之间的毫秒值(北京时间的时区为东8区,起点时间实际为:'1970/01/01 08:00:00') 。
demo:
制作一个会总动刷新的时间
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <script> function schedule(){ //2016年9月6日 15:22 星期二 var nowTime=new Date(); var year=nowTime.getFullYear(), month=nowTime.getMonth()+1, date1=nowTime.getDate(), hours=nowTime.getHours(), minutes=nowTime.getMinutes(), seconds=nowTime.getSeconds(), weekly=nowTime.getDay(); weeklyArr=["星期日","星期一","星期二","星期三","星期四","星期五","星期六"]; seconds=seconds<10? "0"+seconds:""+seconds; document.getElementById("timetable").innerHTML=year+"年"+month+"月"+date1+"日 "+hours+":"+minutes+":"+seconds+" "+weeklyArr[weekly]; } </script> <style type="text/css"> div{ width: 400px; height: 100px; border: medium solid #000000; line-height: 100px; font-size: 20px; text-align: center; } </style> </head> <div id="timetable"> <script type="text/javascript"> setInterval(schedule,1000); </script> </div> </body> </html>
3.math对象
Math 对象用来处理复杂的数学运算。 Math对象是javascript的一个全局对象,不需要用new 创建 Math.abs(-2); 该方法可返回一个数的绝对值。 Math.round(5.5); 该方法可把一个数字舍入为最接近的整数。 Math.random(); 该方法可返回介于 0(包含) ~ 1(不包含) 之间的一个随机数。 Math.ceil(1.4); ceil() 方法返回大于等于x的最小整数。(取大整) Math.floor(1.6); floor() 方法返回小于等于x的最大整数。(取小整) Math.pow(4,3); pow() 方法返回 x 的 y 次幂。 (4的3次方)
demo:
制作一个抽奖程序
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> div{ height: 100px; width: 300px; background-color: #FFDAB9; margin: 20px 0; text-align: center; font-size: 24px; } input{ margin-left: 110px; } span{ color: #FF0000; } </style> </head> <body> <input type="button" name="" id="" value="点击抽奖" onclick="lot();"/> <div id="div"> 点击抽奖 </div> <script type="text/javascript"> function lot(){ var result=parseInt(Math.random()*5); if(result==1){ document.getElementById("div").innerHTML="<span>1<br>恭喜你中了特等奖,获得了马尔代夫7人7天游</span>"; }else{ document.getElementById("div").innerHTML=result+"<br>很遗憾,你没抽中奖"; } } </script> </body> </html>
#9.6课堂JS总结#变量作用域 date()对象 math()对象的更多相关文章
- js的变量作用域
js不支持块级变量作用域,而是包含它们的函数的作用域, 例如: function query() { ; ; i < ; i++) { var b = i; } return b + a; } ...
- js学习--变量作用域和作用域链
作为一名菜鸟的我,每天学点的感觉还是不错的.今天学习闭包的过程中看到作用域与作用域链这两个概念,我觉得作为一名有追求的小白,有必要详细了解下. 变量的作用域 就js变量而言,有全局变量和局部变量.这里 ...
- JavaScript中Date(日期对象),Math对象--学习笔记
Date对象 1.什么是Date对象? 日期对象可以储存任意一个日期,并且可以精确到毫秒数(1/1000 秒). 语法:var Udate=new Date(); 注:初始值为当前时间(当前电脑系统 ...
- Javascript数组,String对象,Math对象,Date对象,正则表达式
标题栏的滚动<html><head><title>山西众创金融</title></head>function init(){ //1.拿到标 ...
- js的变量作用域 ,变量提升
(function(){ a = 5; alert(window.a); var a = 10; alert(a); })(); 结果: undefined 10 代码等同于下面 var a = un ...
- js声明变量作用域会提前
var s = 1; function test() { console.info(s); var s = 2; console.info(s); } test(); >>>unde ...
- JS取整,四舍五入,取绝对值等Math对象常用方法
function f1(type,num1) { switch(type) { case 'floor': return Math.floor(num1);//取整或下舍入 break; case ' ...
- 解释JS变量作用域的范例
JS的变量作用域只有两种:全局作用域与函数作用域. 用var声明的变量不能简单的说是属于函数作用域,应该是说属于其最近的作用域. var a = 10; function test(){ var a; ...
- javaScript的闭包 js变量作用域
js的闭包 js的变量作用域: var a=90; //定义一个全局变量 function test(){ a=123; //使用外层的 a变量 } test(); document.write(&q ...
随机推荐
- Leetcode-83 Remove Duplicates from Sorted List
#83. Remove Duplicates from Sorted List Given a sorted linked list, delete all duplicates such that ...
- Leetcode-463 Island Perimeter
#463. Island Perimeter You are given a map in form of a two-dimensional integer grid where 1 represe ...
- Go 作用
Go语句的作用是表示一个batch(多条Tsql命令)的结束,并向sql server 提交batch,由于局部变量的作用域是基于batch的,所以,go语句限制局部变量的作用域在一个batch中. ...
- 深入理解CSS Media媒体查询
× 目录 [1]媒介类型 [2]媒体属性 [3]语法[4]方法 前面的话 一说到响应式设计,肯定离不开媒体查询media.一般认为媒体查询是CSS3的新增内容,实际上CSS2已经存在了,CSS3新增了 ...
- 深入学习jQuery选择器系列第三篇——过滤选择器之索引选择器
× 目录 [1]通用形式 [2]首尾索引 [3]奇偶索引[4]范围索引 前面的话 上一篇介绍了过滤选择器中的子元素选择器部分,本文开始介绍极易与之混淆的索引选择器 通用形式 $(':eq(index) ...
- JAVA基础代码分享--学生成绩管理
问题描述: 从键盘读入学生成绩,找出最高分,并输出学生成绩等级. 成绩>=最高分-10 等级为’A’ 成绩>=最高分-20 等级为’B’ 成绩>=最高分-30 等级为’C’ ...
- scikit-learn 朴素贝叶斯类库使用小结
之前在朴素贝叶斯算法原理小结这篇文章中,对朴素贝叶斯分类算法的原理做了一个总结.这里我们就从实战的角度来看朴素贝叶斯类库.重点讲述scikit-learn 朴素贝叶斯类库的使用要点和参数选择. 1. ...
- 【经验之谈】Windows环境下配置WordPress
前言 wordpress全球著名的开放博客平台,拥有成千上万个各式插件和不计其数的主题模板样式,使用php和mysql搭建,下面说下载windows环境下配置wordpress,经验之谈. 安装 关于 ...
- SqlServer时间戳与普通格式的转换
/********************************************** 时间戳转换(秒) ******************************************* ...
- iOS_MJRefrash的详解以及使用
MJRefresh Github 效果动态图来这里看吧 该博客Demo下载地址 一. MJRefresh的类解释. 1.MJRefreshComponent 所有刷新控件的基 ...