一、变量的分类

在JavaScript中变量分为两种:

  • 全局变量
  • 局部变量

二、变量的作用域

1、局部变量的作用域

局部变量:在函数内部定义的变量称为局部变量,其作用域为该函数内部,在该函数外部不能被访问。看下面的例子:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>局部变量作用域</title>
<script>
// 定义函数fn
function fn(){
var a=5;// 定义局部变量
document.write(a);
};
// 调用函数fn
fn();
// 定义函数fn2
function fn2(){
document(a);
};
// 调用函数fn2
fn2();
</script>
</head>
<body> </body>
</html>

结果:

2、全局变量

全局变量:定义在函数外部的变量称为全局变量,其作用域是整个JavaScript代码块。看下面的例子:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>全局变量作用域</title>
<script>
var number; // 全局变量
function fn(){
number=5;
document.write("number的值是:"+number+"<br />");
};
function fn2(){
++number;
document.write("number的值是:"+number+"<br />");
}
fn();
fn2();
</script>
</head>
<body> </body>
</html>

结果:

注意:

a、如果在函数内定义了和全局变量相同名称的局部变量,那么在函数内部使用就近原则:即在函数内部局部变量起作用。看下面的例子:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>全局变量作用域</title>
<script>
var number; // 全局变量
/* function fn(){
number=5;
document.write("number的值是:"+number+"<br />");
};
function fn2(){
++number;
document.write("number的值是:"+number+"<br />");
} */ // 就近原则
function fn(){
var number="我是局部变量";
document.write("number的值是:"+number+"<br />");
};
function fn2(){
number="我是全局变量"
document.write("number的值是:"+number+"<br />");
}
fn();
fn2();
</script>
</head>
<body> </body>
</html>

结果:

b、全局变量window

如果在定义变量的时候没有使用var,那么默认是全局变量,无论是在函数外部还是在函数内部定义变量。看下面的例子:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>全局变量作用域</title>
<script>
var number; // 全局变量
/* function fn(){
number=5;
document.write("number的值是:"+number+"<br />");
};
function fn2(){
++number;
document.write("number的值是:"+number+"<br />");
} */ // 就近原则
/* function fn(){
var number="我是局部变量";
document.write("number的值是:"+number+"<br />");
};
function fn2(){
number="我是全局变量"
document.write("number的值是:"+number+"<br />");
}
fn();
fn2(); */ // windows
// 相当于window.a
a=12;
function fn(){
// 相当于window.b
b="我是window对象,是全局变量";
};
fn();
document.write("a="+a+"<br />");
document.write("b="+b+"<br />");
</script>
</head>
<body> </body>
</html>

结果:

c、应尽量避免使用全局变量,以免团队开发变量发生冲突。

JavaScript(五):变量的作用域的更多相关文章

  1. 从头开始学JavaScript (二)——变量及其作用域

    原文:从头开始学JavaScript (二)--变量及其作用域 一.变量 ECMAscript变量是松散型变量,所谓松散型变量,就是变量名称可以保存任何类型的数据,每个变量仅仅是一个用于保存值的占位符 ...

  2. javascript之变量、作用域、作用域链

    一.变量 javascript的变量是松散类型的,所谓松散类型就是说定义的变量可以用来保存任何类型的数据.定义变量时要使用var操作符后面跟变量名.这里的var是一个关键字,如果定义变量时省略了var ...

  3. JavaScript笔记:变量及其作用域

    一.变量的定义及声明 在javascript中变量仅仅是用来保存值的一个占位符而已,定义变量时要使用关键字var后跟一个变量名,如下所示: var message; //定义一个变量message,像 ...

  4. JavaScript 中变量、作用域和内存问题的学习

    这是我学习JavaScript的第二篇文章,之前做过几年的Java开发,发现JavaScript虽然也是面向对象的语言但是确实有很多不同之处.就本篇博客,主要学习总结一下最近学习到的JavaScrip ...

  5. 【点滴javascript】变量与作用域

    基本类型与引用类型 ECMAScript的的变量有两种类型: 基本类型(值类型):简单数据段 引用类型:多个值构成的对象 在变量赋值结束后,解析器必须知道这个变量时基本数据类型还是引用类型,需要注意的 ...

  6. JavaScript中变量、作用域、内存问题

    这几天,闲的没事看看JavaScript高级编程,感觉JavaScript真的很强大,尤其是采用面向对象的编程方式. 一.   基本类型和引用类型的值: ECMAScript变量可能包含两种不同数据类 ...

  7. javaScript之 变量、作用域和内存问题

    <javaScript高级程序设计>第四章  读书笔记 4.1  基本类型 和 引用类型 的值 1. 基本类型值 包括:Undefined.Null.Boolean.Number 和 St ...

  8. javascript的变量、作用域和内存问题

    基本类型和引用类型的值执行环境垃圾收集 ECMAScript 变量可能包含两种不同数据类型的值:基本类型值和引用类型值.基本类型值指的是简单的数据段引用类型值指那些可能由多个值构成的对象 基本数据类型 ...

  9. JavaScript 学习-变量的作用域和块级作用域

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  10. JavaScript之变量、作用域和内存问题

    js中的变量可能包含2种数据类型,基础数据类型和引用数据类型. 一般而言,基本数据类型是数据段,引用数据类型是对象. 保存方式的不同: 基本类型可以直接操作保存在变量中的值:而引用类型真实的值是保存在 ...

随机推荐

  1. 3dmax,查看场景中所有材质

  2. centos 7 下图形验证码乱码

    工作中遇到一个问题:同样的代码在centos 6.5下图形验证码是正常的 但是在centos 7下面是乱码 centos 6.5 的系统字体库目录 [wwwad@P2P-test2 fonts]$ p ...

  3. iOS编程中比较两个日期的大小

    转自:http://www.myext.cn/other/a_30922.html 比较日期大小是任何编程语言都会经常遇到的问题,再iOS编程中,通常用NSDate对象来存储一个时间(包括日期和时间. ...

  4. iOS7.0中UILabel高度调整注意事项

    转自:http://blog.csdn.net/k12104/article/details/33731833 http://herkuang.info/blog/2013/12/31/ios7%E4 ...

  5. 【iOS XMPP】使用XMPPFramewok(四):收发消息

    转自:http://www.cnblogs.com/dyingbleed/archive/2013/05/16/3075105.html 收发消息 接收消息 通过实现 - (void)xmppStre ...

  6. 从头认识多线程-1.8 迫使线程停止的方法-暴力Stop方法

    这一章节我们来讨论一下暴力Stop方法. 1.使用样例 package com.ray.deepintothread.ch01.topic_8; public class StopByStopMeth ...

  7. haproxy-1.7.7 基于域名的调度配置

    配置样列: [root@c01 haproxy-1.7.7]# cat conf/haproxy.cfg global log 127.0.0.1 local0 info #[err warning ...

  8. 注册vue组件的几种方式

    1,全局注册(这种方式注册组件必须在vue实例化之前声明) Vue.component('tag-name',{}) 2,局部注册 var Child = { template: '<div&g ...

  9. [Windows Azure] What is Windows Azure Active Directory?

    What is Windows Azure Active Directory? Windows Azure Active Directory is a service that provides id ...

  10. [Windows Azure] Virtual Machine and Cloud Service Sizes for Windows Azure

    Virtual machine size CPU cores Memory OS disk space–cloud services OS disk space–virtual machines Ma ...