JS全局变量和局部变量最新解析


Posted in Javascript onJune 24, 2016

就是这种盲目无原理依据的研究测试弄晕了我, 有必要这么做吗? 其实理解了原理就没必要搞这么多一个一个的试, 然后得出规律, ECMAScript规则都已经定义好了.

var的规则是: 使用var声明变量就是内部变量, 否则就是先调用全局变量, 不管多少层函数.

this的规则是: method函数里的this永远指向自身, 普通函数的this永远指向DOMWindow.

// GodDamnTest1
function Foo() { 
var a = 123; // 局部变量, 所有子函数的全局变量
this.a = 456; // 对象属性
(function() { 
alert(a); // 123, 全局
alert(this.a); // undefined, 普通函数, this指向DOMWindow 
})(); 
} 
var f = new Foo(); 
// GodDamnTest2
function Foo() { 
var a = 123; 
this.a = 456; 
(function(a) { // 局部声明
alert(a); // 456, 被函数局部声明的a覆盖了全局 
})(this.a); 
} 
var f = new Foo(); 
// GodDamnTest3
function Foo() { 
var a = 123; 
this.a = 456; 
(function() { 
alert(a); // 123, 全局
alert(this.a); // undefined, DOMWindow 
this.b = 789; // window.b = 789
})(); 
(function() { 
alert(this.b); // 789, window.b
})(); 
} 
var f = new Foo(); 
(function() { 
alert(this.b); // 789, window.b
})(); 

// GodDamnTest4
function Foo() { 
(function() { 
this.b = 789; // window.b = 789
})(); 
(function() { 
alert(this.b); // 789, window.b
var b = 0; 
alert(b); // 0, 这样的测试也写出来了!
})(); 
} 
var f = new Foo(); 
(function() { 
alert(this.b); // 789, window.b
alert(b); // 789, window.b
})();

令人意外的是,最后一个 alert(b),结果仍然是 789。 // no damn surprise at all!

// GodDamnTest5
function Foo() { 
(function() { 
this.b = 789; // window.b = 789
})(); 
(function() { 
alert(this.b); // 789, window.b
alert(b); // undefined, 全局
var b = 0; 
alert(b); // 0, 还有这种测试!
})(); 
} 
var f = new Foo(); 
(function() { 
alert(this.b); // 789, window.b
alert(b); // 789, window.b
})();

PS:JS删除局部变量的方法

alert('value:'+str+'\ttype:'+typeof(str)) //声明变量前,引用
var str="dd";
alert('value:'+str+'\ttype:'+typeof(str)) //声明并赋值变量后,引用
str=undefined;




 //删除局部变量
alert('value:'+str+'\ttype:'+typeof(str)) //取消变量后,引用,和第一个相同

以上所述是小编给大家介绍的JS全局变量和局部变量最新解析,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
javascript中字符串拼接需注意的问题
Jul 13 Javascript
javascript的console.log()用法小结
May 31 Javascript
js获取input标签的输入值实现代码
Aug 05 Javascript
JS模拟并美化的表单控件完整实例
Aug 19 Javascript
Jquery ajax基础教程
Nov 20 Javascript
表单元素值获取方式js及java方式的简单实例
Oct 15 Javascript
JS异步加载的三种实现方式
Mar 16 Javascript
详解用node搭建简单的静态资源管理器
Aug 09 Javascript
Node.js Express安装与使用教程
May 11 Javascript
vue slots 组件的组合/分发实例
Sep 06 Javascript
React实现全局组件的Toast轻提示效果
Sep 21 Javascript
Vue动态组件与异步组件实例详解
Feb 23 Javascript
jQuery插件passwordStrength密码强度指标详解
Jun 24 #Javascript
jquery选择器中的空格与大于号>、加号+与波浪号~的区别介绍
Jun 24 #Javascript
jquery表单插件Autotab使用方法详解
Jun 24 #Javascript
jQuery插件cxSelect多级联动下拉菜单实例解析
Jun 24 #Javascript
jQuery下拉框的简单应用
Jun 24 #Javascript
浅谈json取值(对象和数组)
Jun 24 #Javascript
json对象与数组以及转换成js对象的简单实现方法
Jun 24 #Javascript
You might like
PHP中实现汉字转区位码应用源码实例解析
2010/06/14 PHP
PHP下通过file_get_contents的代理使用方法
2011/02/16 PHP
再Docker中架设完整的WordPress站点全攻略
2015/07/29 PHP
php如何控制用户对图片的访问 PHP禁止图片盗链
2016/03/25 PHP
PHP递归实现层级树状展开
2016/04/01 PHP
PHP中让json_encode不自动转义斜杠“/”的方法
2017/02/28 PHP
TP5框架页面跳转样式操作示例
2020/04/05 PHP
javascript  Error 对象 错误处理
2008/05/18 Javascript
深入理解javascript的执行顺序
2014/04/04 Javascript
JavaScript立即执行函数的三种不同写法
2014/09/05 Javascript
JavaScript必知必会(六) delete in instanceof
2016/06/08 Javascript
JavaScript动态添加css样式和script标签
2016/07/19 Javascript
JavaScript中数据类型转换总结
2016/12/25 Javascript
javascript作用域链与执行环境详解
2017/03/25 Javascript
vue服务端渲染的实例代码
2017/08/28 Javascript
js正则相关知识点专题
2018/05/10 Javascript
vue-router实现编程式导航的代码实例
2019/01/19 Javascript
vue 实现Web端的定位功能 获取经纬度
2019/08/08 Javascript
Python中的默认参数详解
2015/06/24 Python
Python的Flask框架及Nginx实现静态文件访问限制功能
2016/06/27 Python
Python使用reportlab模块生成PDF格式的文档
2019/03/11 Python
Python3实现汉语转换为汉语拼音
2019/07/08 Python
Pytho爬虫中Requests设置请求头Headers的方法
2020/09/22 Python
GAP欧盟网上商店:GAP EU
2016/09/13 全球购物
中东最大的在线宠物店:Dubai Pet Food
2020/06/11 全球购物
加拿大户外探险购物网站:SAIL
2020/06/27 全球购物
高三家长寄语
2014/04/03 职场文书
涉及车辆房产分割的离婚协议书范文
2014/10/12 职场文书
先进个人申报材料
2014/12/30 职场文书
辞职信格式模板
2015/02/27 职场文书
2015年房产销售工作总结范文
2015/05/22 职场文书
python实现Thrift服务端的方法
2021/04/20 Python
python3+PyQt5+Qt Designer实现界面可视化
2021/06/10 Python
MySQL 数据类型详情
2021/11/11 MySQL
动画「进击的巨人」第86话播出感谢绘公开
2022/03/21 日漫
Win11怎么添加用户?Win11添加用户账户的方法
2022/07/15 数码科技