Javascript中this的用法详解


Posted in Javascript onSeptember 22, 2014

前些日子面试的时候用到了this,面试官说我的理解有点偏差,回来看了下书和一些博客,做了点测试,发现自己的理解的确有误

1.全局变量

应该是最常用的吧,函数中调用一个this,这里其实就是全局变量

var value="0"; function mei(){ 
 var value="1"; 
 console.log(this.value); //0  console.log(value);   //1 } 
mei();

输出0就是因为this指向的是全局

2.构造函数

这是我比较熟悉的用法,构造函数中用this,new一个新的对象后this就指向了这个新的对象

var value="window"; function mei(){ 
 this.value=1; 
 this.show=function(){ 
  console.log(this.value) 
 } 
} var m=new mei(); 
console.log(m.value);  //1 m.show();        //1

可以看到输出的是1而并不是window,可见由于构造函数,这里的this已经指向新的对象了而不是全局变量

3.call和apply

直接借用我的call和apply的博客中的例子

var p="456"; 
 function f1(){ 
  this.p="123"; 
 } 
 function f2() { 
  console.log(this.p); 
 } 
 f2();       //456  f2.call(f1());  //123  f2.apply(f1());  //123

第一行输出456很好理解,this指向全局,后面的123是因为使用了call或者apply后,f2中的this指向了f1,而f1中的p为123,具体解释直接戳那篇博文

4.函数作为某个对象的方法调用(我出错的地方)

当时让我写一个对象有几个方法,我脑子一抽定义了个全局变量,然后在对象的方法里用this调用,面试官问我这个this是什么?我说应该是window,因为这种方式我用的少,以为只有new或者call才会改变this的指向,他就说不对,让我回去自己看看,现在试了试,我还真是错了,贴代码

var value="father"; function mei(){} 
mei.value="child"; 
mei.get=function(){console.log(this.value)}; 
mei.show=function(){console.log(value)}; 
mei.get();   //child mei.show();  //father

由于get是作为mei的方法调用的,因此这里的this指向了mei.value所以输出child

至于father我是这样理解的,show指向的函数是定义在全局环境下的,由于作用域链,在show中没有找到value,于是就去定义他的环境中找,这就找到了全局的value,如果这里有理解错误的话希望有朋友可以指出来!

Javascript 相关文章推荐
Jquery事件的连接使用示例
Jun 18 Javascript
js setTimeout opener的用法示例详解
Oct 23 Javascript
z-blog SyntaxHighlighter 长代码无法换行解决办法(jquery)
Nov 16 Javascript
常见的jQuery选择器汇总
Nov 24 Javascript
js事件源window.event.srcElement兼容性写法(详解)
Nov 25 Javascript
form表单序列化详解(推荐)
Aug 15 Javascript
JavaScript判断输入是否为数字类型的方法总结
Sep 28 Javascript
微信小程序实现自上而下字幕滚动
Jul 14 Javascript
Vue CLI 3搭建vue+vuex最全分析(推荐)
Sep 27 Javascript
JS实现图片拖拽交换效果
Nov 30 Javascript
vue-router重定向和路由别名的使用讲解
Jan 19 Javascript
微信二次分享报错invalid signature问题及解决方法
Apr 01 Javascript
JavaScript的作用域和块级作用域概念理解
Sep 21 #Javascript
JavaScript中双叹号!!作用示例介绍
Sep 21 #Javascript
原生JavaScript实现合并多个数组示例
Sep 21 #Javascript
仿淘宝TAB切换搜索框搜索切换的相关内容
Sep 21 #Javascript
将数字转换成大写的人民币表达式的js函数
Sep 21 #Javascript
判断window.onload是否多次使用的方法
Sep 21 #Javascript
使用JavaScript进行进制转换将字符串转换为十进制
Sep 21 #Javascript
You might like
Zerg兵种介绍
2020/03/14 星际争霸
全局记录程序片段的运行时间 正确找到程序逻辑耗时多的断点
2011/01/06 PHP
理解和运用PHP中的多态性[译]
2011/08/02 PHP
详解PHP数组赋值方法
2015/11/07 PHP
thinkPHP基于ajax实现的菜单与分页示例
2016/07/12 PHP
Javascript 各浏览器的 Javascript 效率对比
2008/01/23 Javascript
jquery 操作日期、星期、元素的追加的实现代码
2012/02/07 Javascript
jquery的flexigrid无法显示数据提示获取到数据
2013/07/19 Javascript
javascript获取下拉列表框当中的文本值示例代码
2013/07/31 Javascript
禁用Tab键JS代码兼容Firefox和IE
2014/04/18 Javascript
详解Node.js实现301、302重定向服务
2017/04/07 Javascript
JS 验证密码 不能为空,必须含有数字、字母、特殊字符,长度在8-12位
2017/06/21 Javascript
11个教程中不常被提及的JavaScript小技巧(推荐)
2019/04/17 Javascript
vue-cli3访问public文件夹静态资源报错的解决方式
2020/09/02 Javascript
原生js生成图片验证码
2020/10/11 Javascript
跟老齐学Python之有容乃大的list(4)
2014/09/28 Python
使用IronPython把Python脚本集成到.NET程序中的教程
2015/03/31 Python
python中字典(Dictionary)用法实例详解
2015/05/30 Python
基于python yield机制的异步操作同步化编程模型
2016/03/18 Python
python中利用队列asyncio.Queue进行通讯详解
2017/09/10 Python
Python分析学校四六级过关情况
2017/11/22 Python
python3中os.path模块下常用的用法总结【推荐】
2018/09/16 Python
python实现几种归一化方法(Normalization Method)
2019/07/31 Python
python无序链表删除重复项的方法
2020/01/17 Python
python正则表达式 匹配反斜杠的操作方法
2020/08/07 Python
Python如何使用ConfigParser读取配置文件
2020/11/12 Python
英国领先的葡萄酒专家:Majestic Wine
2017/05/30 全球购物
小米旗下精品生活电商平台:小米有品
2018/12/18 全球购物
应征英语教师求职信
2013/11/27 职场文书
医学实习生自我鉴定
2013/12/12 职场文书
某同学的自我鉴定范文
2013/12/26 职场文书
节能环保演讲稿
2014/08/28 职场文书
超市工作总结范文2014
2014/12/19 职场文书
Python合并多张图片成PDF
2021/06/09 Python
Python实现列表拼接和去重的三种方式
2021/07/02 Python
Go语言读取txt文档的操作方法
2022/01/22 Golang