function变量困惑
- var name = "The Window";
- var object = {
- name : "My Object",
- getNameFunc : function(){
- return function(){
- return this.name;
- };
- }
- };
一个经典的代码,在高程也出现过的,意在说明 this 和 闭包变量作用域。
以前写过一篇记录一下,最近在sf看到一博客文章,又突然陷入深思。
http://blog.segmentfault.com/findingea/1190000000537129
首先,说一下2个关键点:
1.function的作用域:在function中访问一变量,首先看function执行体内是否存在该变量,不存在,则往function的调用环境,去查询,如果是多层调用,则会遵循内部找不到就往外部查找,一直到全局作用域,这也就是作用域链。
1.1一般说来,闭包,即内部函数调用了外部函数的变量,并返回自身给外部使用,此时,即可访问到外部函数的变量,这里能不能说其实也是套用了所谓的作用域链原理呢。
2. function的作用域内,本身执行体的执行环境包含参数arguments和this两个自带的,不会导致需要去外部找变量,上面的经典问题中,this.name之所以返回的是 the window 即全局变量,那是因为function自身的调用环境决定的,这个return的闭包,不属于object对象本身的属性,因此,自然而然,其调用主题是全局window。
通过需要后,即可达到访问object.name的效果.
- var name = "The Window";
- var object = {
- name : "My Object",
- getNameFunc : function(){
- var that = this;
- return function(){
- return that.name;
- };
- }
- };
这里用that存了this,getNameFunc本身就是object的属性,因此this指向的是object,而that作为最底层的function的外部函数的作用域之一,刚好function内部没有that的申明,所以自然内部调用that访问的就是外部函数的作用域的that。
而我本来觉得这样好理解,突然想,那么不要this呢?
- var name = "The Window";
- var object = {
- name : "My Object",
- getNameFunc : function(){
- return function(){
- return name;
- };
- }
- };
一开始以为,根据作用域链,最终得到的name应该是object.name,结果一运行,不对,为什么呢?
一开始搞不明白。
但是,回想起来,首先,getNameFunc这里如果调用name同样得到的是全局的name. 想想,假设我加一句代码进去,
- var name = "The Window";
- var object = {
- name : "My Object",
- getNameFunc : function(){
- console.log(name); //这里name是全局name
- return function(){
- return name;
- };
- }
- };
正如我注释的那里,这里直接调用name,跟调用this.name的不同,在于this.name是对象的属性,直接调用,则是查找作用域里声明的name,明显与对象属性不是同一个概念,正如
var name = 0; 和 obj.name="dont"; 不能相提并论,不知道这么解释对不对。
也正因为作用域里不存在独立的name声明,因此最终找到的是全局的作用域声明的name: The Window.
function变量困惑的更多相关文章
- this指针与function变量--this究竟指向哪里?
参考文章:<深入浅出 JavaScript 中的 this> http://www.ibm.com/developerworks/cn/web/1207_wangqf_jsthis/ Ja ...
- 六天玩转javascript:javascript变量与表达式(1)
说明 本系列属于进阶系列,语常用语法等不在本系列介绍范围之内. 在我刚开始做一个程序员并开发项目的时候,我总是喜欢使用开发语言的各种特性,每次m$发布新版C#的时候我总是会把开发者预览版下好,亲自体验 ...
- 在javascript中关于变量与函数的提升
在javascript中关于变量与函数的提升 一.简介 在javascript中声明变量与函数的执行步骤: 1.先预解析变量或函数声明代码,会把用var声明的变量或者函数声明的代码块进行提升操作 2. ...
- js变量和函数声明的提升
函数声明和变量声明总是会被解释器悄悄地被“提升”到方法体的最顶部 请注意,变量赋值并没有被提升,只是声明被提升了. 函数的声明比变量的声明具有高的优先级. 下面的程序是什么结果? var foo = ...
- JS基础——变量
引用类型:对象 数组 函数 }; var b =a ; b.age = ; console.log(a.age);// 21 传递的是地址, a,b同地址 值类型: var a =100; var ...
- js变量和函数声明的提升(转)
原文:http://zha-zi.iteye.com/blog/2037026 下面的程序是什么结果? var foo = 1; function bar() { if (!foo) { var fo ...
- [转]js 判断js函数、变量是否存在
本文转自:http://blog.csdn.net/liang4571231/article/details/4042519 在进行js编程时,总会出现可能一些函数或者变量未定义而被引用,导致报错的情 ...
- JavaScript变量提升 面试题
<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8&quo ...
- Javascript作用域和变量提升
下面的程序是什么结果? var foo = 1; function bar() { if (!foo) { var foo = 10; } alert(foo); } bar(); 结果是10: 那么 ...
随机推荐
- 【阿里云配置端口开放】使用 iptables
要知道: 1.目前(16年-12-10)阿里云主机只要有服务开启,所有端口是默认开启的.这样很不好,安全做法是,需要开启外网端口时,由开发人员去配置. 2.想要开放端口,就需要使用iptables命令 ...
- java 对象序列化与反序列化
Java序列化与反序列化是什么? 为什么需要序列化与反序列化? 如何实现Java序列化与反序列化? 本文围绕这些问题进行了探讨. 1.Java序列化与反序列化 Java序列化是指把Java对象转换为 ...
- CentOS系统中基于Apache+php+mysql的许愿墙网站的搭建
1.首先,我们需要两台虚拟机(CentOS7,Linux文本). 2.给两台虚拟机配置网络环境分别为桥接模式 CentOS7 ip为192.168.100.139.24,linux文本ip为192.1 ...
- HP网络打印机--如何添加打印机
HP网络打印机采用web服务形式,应添加打印机-通过Internet的打印机--填写网址http://192.168.1.10:80(从其他win7电脑-计算机-网络-网络设备中双击添加打印机,然后在 ...
- 还敢说你是程序员?一律师闲着没事写了个app,用户量600万
今天周五,是我在上海上班的第五天. 这几天怎么说呢,跟混日子差不多,因为处处有“”惊喜”. 上班第一天领来办公电脑,登上自己的公司邮箱,惊喜来了!我的擦擦擦,全TM是英文呐!作为一个从村儿里来的码农, ...
- Eclipse 一些小知识
快速查找未完成事项 eg: // TODO 通过模板格式化代码 Window --> Preferences --> Java --> Editor --> Template ...
- sql中NVARCHAR(MAX) 性能和占空间分析 varchar(n),nvarchar(n) 长度性能及所占空间分析
varchar(n),nvarchar(n) 中的n怎么解释: nvarchar(n)最多能存n个字符,不区分中英文. varchar(n)最多能存n个字节,一个中文是两个字节. 所占空间: nvar ...
- Ueditor之前后端源码的学习和简单的研究
这是我的项目目录 这里写图片描述 1.从访问路径http://localhost:8081/Test/_examples/simpleDemo.html,我们主要是要看看,富文本框被加载出来之前,会调 ...
- 常用命令[Linux]
Linux文件类型 -:普通文件(f) d:目录文件 b:块设备文件(block) c:字符设备文件(character) l:符号链接文件(symbolic link file) p:命名管道文件( ...
- [译]:Xamarin.Android开发入门——Hello,Android Multiscreen快速上手
原文链接:Hello, Android Multiscreen Quickstart. 译文链接:Hello,Android Multiscreen快速上手 本部分介绍利用Xamarin.Androi ...