很多人都会被JavaScript中this的指向(也就是函数在调用时的调用上下文)弄晕,这里做一下总结:

首先,顶层的this指向全局对象。

函数中的this按照调用方法的不同,其指向也不同:

1、函数调用中的this指向全局对象

2、方法调用的函数中的this指向调用函数的对象:

function AnObject(name){
this.name = name;
this.getThis = function(){
console.log(this);
}
}
var ob = new AnObject('test');
ob.getThis(); //AnObject {name: "test"}

这里方法getThis被对象ob调用,故这里的this指向ob对象{name: "test"};

function getThis(){
console.log(this);
}
getThis(); // Window
console.log(window.getThis); //function getThis(){......}

这里getThis是直接在顶层作用域下定义的一个方法,这里的this返回全局对象Window。我们都知道全局变量其实是作为全局对象的属性来实现的,这里的函数也是如此。用function getThis(){......}的写法等同于 var getThis = function() {......}。

而关于”顶层的this指向全局对象“,我的个人理解是:  顶层的代码段可以理解为全局作用域下的一个匿名函数,暨全局对象的一个方法,执行完毕后就销毁。那么这个方法中的this自然指向全局对象了。在REPL或者浏览器的控制台交互中,我们都可以感受到这样的性质。

3、构造函数中的this指向新创建的对象

function AnObject(name) {
this.name = name;
console.log(this);
}
var ob = new AnObject('another test');// AnObject {name: "another test"}

4、使用了apply、call、bind方法时,指向方法所指定的对象

function AnObject(name){
this.name = name;
this.getThis = function(){
console.log(this);
}
}
var ob = new AnObject('test'); ob.getThis.call({name: ' surprise '}); //Object {name: " surprise "}
ob.getThis.apply({name: ' surprise '});//Object {name: " surprise "}
var a = ob.getThis.bind({name: ' surprise '});
a(); //Object {name: " surprise "}

为了化简,这里忽略了”参数列表“这个参数,仅仅传入了新的作用域。可以看到,这时this的指向是我们所指定的对象。

JavaScript中 this 的指向的更多相关文章

  1. javascript中this的指向

    作为一个前端小白在开发中对于this的指向问题有时候总是会模糊,于是花时间研究了一番. 首先this是JS的关键字,this是js函数在运行是生成的一个内部对象,生成的这个this只能在函数内部使用. ...

  2. Javascript中的this指向。

    一.JavaScript中的函数 在了解this指向之前,要先弄明白函数执行时它的执行环境是如何创建的,这样可以更清楚的去理解JavaScript中的this指向. function fn(x,y,n ...

  3. 前端面试之JavaScript中this的指向【待完善!】

    JavaScript中this的指向问题! 另一个特殊的对象是 this,它在标准函数和箭头函数中有不同的行为. 在标准函数中, this 引用的是把函数当成方法调用的上下文对象,这时候通常称其为 t ...

  4. JavaScript中的this指向

    this是谁 技术一般水平有限,有什么错的地方,望大家指正. this代指当前对象super调用父类的构造函数,应表会运网数物,加载驱动建立链接执行SQL处理结果,直到现在每想起这三点就能想起我上大学 ...

  5. Javascript 中的this 指向的对象,你搞清楚了吗?

    Javascript 中的this 总让人感到困惑,你能分清以下三种test1(),test2(),test3() 情况下的输出吗? 注:以下Javascript运行环境中为浏览器 //1 this在 ...

  6. javascript中的this指向问题

    在深入学习JavaScript之后,我们越来越多的会遇到函数或者在对象内部中,对于this的指向问题的疑惑,其实基本上每一个编程语言中都有一个this,这个this的指向都是大同小异,你也可以汉化它的 ...

  7. 谈谈 JavaScript 中的 this 指向问题

    JavaScript 中的 this 为一个重难点,它不像静态语言 C#.Java 一样,就表示当前对象.而在 JS 中, this 是运行时确定,而并非定义时就已确定其值. 谈起 this ,必须少 ...

  8. JavaScript中this的指向问题

    this是面向对象语言中一个重要的关键字,理解并掌握该关键字的使用对于我们代码的健壮性及优美性至关重要.而javascript的this又有区别于Java.C#等纯面向对象的语言,这使得this更加扑 ...

  9. 轻松几句搞定【Javascript中的this指向】问题

    this关键字在JavaScript中扮演了至关重要的角色,每次它的出现都伴随着它的指向问题,这也是很多初学者容易出错的地方. 不过,这篇文章将会带你一次性搞定this指向的问题,望能给大家提供帮助! ...

随机推荐

  1. 【bzoj3064】 CPU监控

    http://www.lydsy.com/JudgeOnline/problem.php?id=3064 (题目链接) 题意 给出一个长度为$n$的数列$A$,同时定义一个辅助数组$B$,$B$开始与 ...

  2. AtCoder Grand Contest 018 E Sightseeing Plan

    题意: 给定三个矩形,选定三个点,答案加上第一个点出发经过第二个点在第三个点结束的方案数,只能往右或往下走. 折腾了我半个多下午的题. 设三个矩形为$A,B,C$一个思路是枚举$B$的那个点$s(x, ...

  3. [SDOI2016]储能表——数位DP

    挺隐蔽的数位DP.少见 其实减到0不减了挺难处理.....然后就懵了. 其实换个思路: xor小于k的哪些都没了, 只要留下(i^j)大于等于k的那些数的和以及个数, 和-个数*k就是答案 数位DP即 ...

  4. 洛谷P5163 WD与地图

    只有洛谷的毒瘤才会在毒瘤月赛里出毒瘤题...... 题意:三个操作,删边,改变点权,求点x所在强连通分量内前k大点权之和. 解:狗屎毒瘤数据结构乱堆...... 整体二分套(tarjan+并查集) + ...

  5. 【洛谷P1429】平面最近点对

    题解:直接在输入点对的基础上建立 kd-tree,再每次以每个节点的坐标查询离这个点最近的点即可,同时需要忽略这个点本身对该点答案的贡献. 另外,直接在这些点上建立 kd-tree 会比一个一个插入点 ...

  6. 【POJ3666】Making the Grade 离散化+DP

    学到了一个引理:在满足S最小化的条件下,一定存在一种构造序列B的方案,使得序列B中的数值都来自于A中.(数学归纳法+中位数定理得证) 对于状态的表示来说,首先肯定有一个 i ,表示选到了第 i 个数时 ...

  7. css3硬件加速

    你知道我们可以在浏览器中用css开启硬件加速,使GPU (Graphics Processing Unit) 发挥功能,从而提升性能吗? 现在大多数电脑的显卡都支持硬件加速.鉴于此,我们可以发挥GPU ...

  8. NCBI上查看SNP位点在哪个基因座上(locus)

    首先,进入NCBI的主页网站:https://www.ncbi.nlm.nih.gov/variation/view/ 进入后,在下图红色框框位置输入目的SNP,比如rs608139 输完后,出现如下 ...

  9. laravel Schema 查看索引是否存在

    Schema::connection('')->table($tableName, function (Blueprint $table) { $sm = Schema::getConnecti ...

  10. 九、java容器

    目录 一.容器的概念 二.Cpllection接口 三.Iterator接口 四.增强的for循环 五.Set接口 六.List接口和Comparable接口 八.Map接口 九.自动打包/解包 十. ...