JavaScript中 this 的指向
很多人都会被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 的指向的更多相关文章
- javascript中this的指向
作为一个前端小白在开发中对于this的指向问题有时候总是会模糊,于是花时间研究了一番. 首先this是JS的关键字,this是js函数在运行是生成的一个内部对象,生成的这个this只能在函数内部使用. ...
- Javascript中的this指向。
一.JavaScript中的函数 在了解this指向之前,要先弄明白函数执行时它的执行环境是如何创建的,这样可以更清楚的去理解JavaScript中的this指向. function fn(x,y,n ...
- 前端面试之JavaScript中this的指向【待完善!】
JavaScript中this的指向问题! 另一个特殊的对象是 this,它在标准函数和箭头函数中有不同的行为. 在标准函数中, this 引用的是把函数当成方法调用的上下文对象,这时候通常称其为 t ...
- JavaScript中的this指向
this是谁 技术一般水平有限,有什么错的地方,望大家指正. this代指当前对象super调用父类的构造函数,应表会运网数物,加载驱动建立链接执行SQL处理结果,直到现在每想起这三点就能想起我上大学 ...
- Javascript 中的this 指向的对象,你搞清楚了吗?
Javascript 中的this 总让人感到困惑,你能分清以下三种test1(),test2(),test3() 情况下的输出吗? 注:以下Javascript运行环境中为浏览器 //1 this在 ...
- javascript中的this指向问题
在深入学习JavaScript之后,我们越来越多的会遇到函数或者在对象内部中,对于this的指向问题的疑惑,其实基本上每一个编程语言中都有一个this,这个this的指向都是大同小异,你也可以汉化它的 ...
- 谈谈 JavaScript 中的 this 指向问题
JavaScript 中的 this 为一个重难点,它不像静态语言 C#.Java 一样,就表示当前对象.而在 JS 中, this 是运行时确定,而并非定义时就已确定其值. 谈起 this ,必须少 ...
- JavaScript中this的指向问题
this是面向对象语言中一个重要的关键字,理解并掌握该关键字的使用对于我们代码的健壮性及优美性至关重要.而javascript的this又有区别于Java.C#等纯面向对象的语言,这使得this更加扑 ...
- 轻松几句搞定【Javascript中的this指向】问题
this关键字在JavaScript中扮演了至关重要的角色,每次它的出现都伴随着它的指向问题,这也是很多初学者容易出错的地方. 不过,这篇文章将会带你一次性搞定this指向的问题,望能给大家提供帮助! ...
随机推荐
- MT【5】蝴蝶效应:一道递推式为二次的数列
评:蝴蝶效应[蝴蝶效应(The Butterfly Effect)是指在一个动力系统中,初始条件下微小的变化能带动整个系统的长期的巨 ...
- 本地项目上传到github 报错“master -> master (non-fast-forward)”
接下来 第一步:建立git仓库 cd到你的本地项目根目录下,执行git命令,此命令会在当前目录下创建一个.git文件夹. git init 第二步:将项目的所有文件添加到仓库中 git add . 这 ...
- C#基础 常用语&数据类型定义&类型转换
int temp = Console.Read(); Console.WriteLine(temp); Console.Read(); Console.Write(" ");直接 ...
- DIV或者DIV里面的图片水平与垂直居中的方法
<div class=“box”> <img /> </div> 水平居中的常用方式: text-align:center ——这可以实现子元素字体,图片的水平居中 ...
- linux centos7安装python3
折腾 Python官网: https://www.python.org/ 查看相关评论,众人大呼python2与python3为两种语言,既然继承性不大,那我也就直接学python3了. 在系统选择, ...
- scrapy xpath、正则表达式、css选择器
scrapy xpath XPath即为XML路径语言,它是一种用来确定XML(标准通用标记语言的子集)文档中某部分位置的语言.XPath基于XML的树状结构,提供在数据结构树中找寻节点的能力. 学习 ...
- 我的 $OI$, 退役前写点东西
离 \(NOIp2018\) 还有五天, 总想写点什么 马上退役了啊 是什么时候喜欢上信息技术的呢 记不清了, 很小的时候就喜欢捣鼓关于电脑的东西 当时也不知道有算法这种东西 只是知道有黑客 巨 j8 ...
- Mysql忘记数据库密码以及用户授权案例展示
Mysql忘记数据库密码以及用户授权案例展示 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 大家在学习MySQL时如果很长一段时间不使用密码是不是就忘记MySQL的管理密码啦?这种 ...
- fastjson基本使用 (待继续完善)【原】
参考: http://blog.csdn.net/wx_962464/article/details/37612861 maven库下载 fastjson基本样例1 Cat.java package ...
- IdeaVim-常用操作
IdeaVim简介 IdeaVim是IntelliJ IDEA的一款插件,他提高了我们写代码的速度,对代码的跳转,查找也很友好. 安装位置 安装之后它在 Tools > Vim Emulator ...