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)
随机推荐
- 织梦DEDE文章列表前面自动加递增数字标签
实现的办法很简单,只须要在序号递增的处所加上这段代码就行 [field:global runphp=""yes"" name=autoindex][/field ...
- gpg XXX NO_PUBKEY XXX
手动添加PPA源遇到找不到公钥的情况 1. gpg --keyserver keyserver.ubuntu.com --recv-keys XXX gpg --armor --export XXX ...
- POJ 3419 Difference Is Beautiful(RMQ+二分 或者 模拟)
Difference Is Beautiful Time Limit:5000MS Memory Limit:65536KB 64bit IO Format:%lld & %l ...
- 学习笔记——建造者模式Builder
构造者模式.外部场景如果需要一个汽车类,它不需要关心如何构造,它只需要告诉Director需要什么,就可以从Director获得. 如:CDirector(IBuilder* aBuilder); 场 ...
- equal与==区别
对于String中的“equal方法”和“==”一直有点混肴,今天重新看了一下他们两点的区别,记录下来让自己以后不在忘记! 先说“==”: “==”是用来比较两个String对象在内存中的存放地址是否 ...
- android 5.0新特性学习--视图轮廓
ViewOutlineProvider -- 视图轮廓setOutlineProvider--可以使用View.setClipToOutline方法去剪切一个视图的outline区域.只有rectan ...
- meta 常用标签总结
声明:并非原创 meta元素工有3个可选属性(http-equiv.name.scheme)和一个必选属性(content),content定义与http-equiv或name属性相关的元信息 可选属 ...
- 交换数组中两个元素的位置,元素包括key和value 一维数组
/*author: yangyu@sina.cndescription: 交换数组中两个元素的位置,元素包括key和value,具体用法见下面的例子*/$arr = array(11=>'a', ...
- Android Studio的使用(九)--设置IDE编码格式
1.打开设置 2.勾选编码格式,在这里可以设置分别设置IDE.Project.File等级别的编码格式. 3.查看.修改各个文件的编码 4.当右击编辑界面时,可以直接设置当前文件的编码
- 业务零影响!如何在Online环境中巧用MySQL传统复制技术【转】
业务零影响!如何在Online环境中巧用MySQL传统复制技术 这篇文章我并不会介绍如何部署一个MySQL复制环境或keepalived+双主环境,因为此类安装搭建的文章已经很多,大家也很熟悉.在这篇 ...