js的this作用域
作者:zccst
this作用域以前专门学习研究过,但发现依然不够全面和完整。现在继续学习
先列出之前看过的结论:
函数在被调用的时候会意外接受两个参数:this和argument,其中this的值跟取决于函数的调用模式
1,方法调用模式 o.a() //this指的o
2,函数调用模式 a() //this指的windows
3,构造器调用模式 new a() //this为a的实例对象
4,apply(call)的间接调用模式 a.apply(xx,[yy]) //this指的xx
但是,上面的描述并没有指出背后的联系,换一种描述方式:
在这里列出this在ECMAScript中的不同含义:
(1) 在全局执行环境中使用this,表示Global对象,在浏览器中就是window对象。
(2) 当在函数执行环境中使用this时,情况就有些复杂了。如果函数没有明显的作为非window对象的属性,而只是定义了函数,不管这个函数是不是定义在另一个函数中,这个函数中的this仍然表示window对象。如果函数显示地作为一个非window对象的属性,那么函数中的this就代表这个对象。(当然可以使用apply或者call函数来取代默认this的引用,详见[P88])
(3) 当通过new运算符来调用函数时,函数被当做一个构造函数,this指向构造函数创建出来的对象。
参考:
《JavaScript基础与案例开发详解》清华大学出版社
场景一,一个函数的this与内部函数的this是否相等
var a = ;
function f1(){
this.a = ;
console.log(this.a+a);//
function f2(){
this.a = ;
console.log(this.a+a); // 6 如果注释掉this.a=3,则是4
}
f2();
}
f1();
根据新的描述,虽然嵌套定义,但只是定义了函数,所以this作用域仍是window。经测试,三层嵌套后,this也指向window。
很早就看过this的四种总结,但实际应用中还是远远不够,各种情况下还需要继续深入理解。
在 JavaScript 中,上下文对象就是 this 指针,即被调用函数所处的环境。上下文对象的作用是在一个函数内部引用调用它的对象本身。
在 JavaScript 中,本质上,函数类型的变量是指向这个函数实体的一个引用,在引用之间赋值不会对对象产生复制行为。我们可以通过函数的任何一个引用调用这个函数,不同之 处仅仅在于上下文。
仔细观察上面的例子,使用不同的引用来调用同一个函数时,this 指针永远是这个引用所属的对象
var scope = 'top';
var f1 = function() {
console.log(scope);
};
f1(); // 输出 top
var f2 = function() {
var scope = 'f2';
f1(); // 输出 top
};
f2();
函数作用域的嵌套关系是定义时决定的,而不是调用时决定的,也就是说,JavaScript 的作用域是静态作用域,又叫词法作用域,这是因为作用域的嵌套关系可以在语法分析时确定,而不必等到运行时确定
场景二,定义一个函数,在不同的作用域中调用时this指代不同
当this使用在函数代码中事情就变得有趣多了。这种情况是最难的也会引发很多的问题。在函数代码中,this值的第一(可能也是最重要的)特性就是不能 静态的绑定到一个函数上。正如上面已经提到的,this值在进入上下文时就已经被决定了,在函数代码的情形下,每次this值可以是完全不一样的。
然而,在代码运行时,this值是不可改变的。例如,不能给this赋一个新值,因为this不是变量(相反,python编程语言中,可以显式的定义self对象,在运行的时候self对象可重复改变)
var foo={x:10};
var bar={
x:20,
test:function(){
console.log(this===bar);//true
console.log(this.x);//20
//this=foo;//error,不能改变this值
}
};
//当进入上下文时,this值由"bar"对象决定的。为什么这样-将在下面详细讨论
bar.test();//true,20
foo.test=bar.test;
//然而,此时在这里的this将指向"foo"-即使我们调用同一个函数
foo.test();//false,10
(当我们在一些关于javascript 的文章和书本中会看到“this值由函数如何定义来决定:如果是全局函数,this值被设置为全局对象,如果函数时一个对象的方法,this值设置为这个 对象”-这是一个错误的描述)。从下面我们可以看出即使是一般的全局函数,也能够被产生不同this值的调用表达式所触发。
function foo(){
console.log(this);
}
foo();//打印this为Window
console.log(foo===foo.prototype.constructor);//true
//但是对于同一函数的另一种调用表达式形式,this值是不同的
foo.prototype.constructor();//打印this为foo
调用一个被定义为对象方法的函数,但是this值不会被设置为这个对象也是同样可能的:
var foo={
bar:function(){
console.log(this);
console.log(this===foo);
}
};
foo.bar();//foo,true
var exampleFunc=foo.bar;
console.log(exampleFunc===foo.bar);//true
//同一函数的另一种调用表达式形式,得到不同的this值
exampleFunc();//global,false
js的this作用域的更多相关文章
- js变量及其作用域(附例子及讲解)
Javascript和Java.C这些语言不同,它是一种无类型.弱检测的语言.它对变量的定义并不需要声明变量类型,我们只要通过赋值的形式,可以将各种类型的数据赋值给同一个变量 工具/原料 Ch ...
- 如何理解vue.js组件的作用域是独立的
vue.js组件的作用域是独立,可以从以下三个方面理解: 1.父组件模板在父组件作用域内编译,父组件模板的数据用父组件内data数据:2.子组件模板在子组件作用域内编译,子组件模板的数据用子组件内da ...
- js闭包的作用域以及闭包案列的介绍:
转载▼ 标签: it js闭包的作用域以及闭包案列的介绍: 首先我们根据前面的介绍来分析js闭包有什么作用,他会给我们编程带来什么好处? 闭包是为了更方便我们在处理js函数的时候会遇到以下的几 ...
- 聊一下JS中的作用域scope和闭包closure
聊一下JS中的作用域scope和闭包closure scope和closure是javascript中两个非常关键的概念,前者JS用多了还比较好理解,closure就不一样了.我就被这个概念困扰了很久 ...
- 详解js变量、作用域及内存
详解js变量.作用域及内存 来源:伯乐在线 作者:trigkit4 原文出处: trigkit4 基本类型值有:undefined,NUll,Boolean,Number和Strin ...
- JS的词法作用域
词法作用域定义实现的规则: 1 函数作用域实在定义的时候决定的,而不是在执行时候决定 2 为了实现这种词法作用域,函数内部不仅包含函数代码逻辑,还必须引用当前的作用域链. 3 函数对象可以通过作用域链 ...
- 第十八篇 js高级知识---作用域链
一直有想法去写写js方面的东西,我个人是最喜欢js这门语言,喜欢的他的自由和强大,虽然作为脚本语言有很多限制的地方,但也不失为一个好的语言,尤其是在H5出现之后.下面开始说说js的方面的东西,由于自己 ...
- JS中的作用域以及全局变量的问题
一. JS中的作用域 1.全局变量:函数外声明的变量,称为全部变量 局部变量:函数内部使用var声明的变量,称为局部变量在JS中,只有函数作用域,没有块级作用域!!!也就是说,if/for等有{}的结 ...
- JS变量、作用域、内存
写到这个题目<JS变量.作用域,内存>,我就不由自主想起了黄金三嫖客.可能是名字有点像,嗯,一定是这样子的! JS接触下来,应该是要比Java简单不少的,所以,要学好啊.立个flag半年后 ...
- js的函数作用域跟块级作用域
js的函数作用域跟块级作用域(原文地址:http://blog.csdn.net/huangjq36sysu/article/details/51085674)
随机推荐
- LightOJ 1341 Aladdin and the Flying Carpet 算数基本定理
题目大意:给出面积n,和最短边m,求能形成的矩形的个数(不能为正方形). 题目思路:根据算数基本定理有: 1.每个数n都能被分解为:n=p1^a1*p2^a2*^p3^a3……pn^an(p为素数); ...
- 【转】linux grep命令详解
简介 grep (global search regular expression(RE) and print out the line,全面搜索正则表达式并把行打印出来)是一种强大的文本搜索工具,它 ...
- 【转】使用ThinkPHP必须掌握的调试方法
经常看到有人问到findAll的返回数据类型是什么之类的问题,以及出错了不知道什么原因的情况,其实还是没有熟悉ThinkPHP内置的调试手段和方法,抛开IDE本身自带的调试方式不说,如果你正在用或者打 ...
- asm: Writing Inline Assembly
A usual IA includes these parts: asm [volatile] ( AssemblerTemplate : OutputOperands [ : InputOperan ...
- Rar related CMD
recursively add folder Document to archive: (with all the files) rar a *.rar Document recursively ad ...
- Objective-C相关Category的收集
Objective-C相关Category的收集 Categories是给你得不到源码的classes增加功能的一种方法.这个页面收集一些相关的Category,并且持续更新,你可以订阅关注.作者是F ...
- “找回” Envi 快捷方式
Envi+IDL文件夹挪到别的电脑,不用安装,直接可以使用.但是桌面和开始菜单没有了Envi,IDL,envi+idl的快捷方式,很不方便. 记录一下快捷方式命令行,备用: envi快捷方式 ...
- ViewHolder最简洁的写法
通用viewHolder工具类: public class ViewHolder { // I added a generic return type to reduce the casting no ...
- select 通过表单提交获取select中的值
<select class="txt" name="choice"> <option value="name" ...
- Android----基于多触控的图片缩放和拖动代码实现
引自:http://www.codefans.net/articles/584.shtml 一个android中自定义的ImageView控制,可对图片进行多点触控缩放和拖动类,包括了对图片放大和图片 ...