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 相关文章推荐
使用JS读秒使用示例
Sep 21 Javascript
javascript实现无限级select联动菜单
Jan 02 Javascript
浅析Node.js的Stream模块中的Readable对象
Jul 29 Javascript
JS根据key值获取URL中的参数值及把URL的参数转换成json对象
Aug 26 Javascript
jQuery实现扑克正反面翻牌效果
Mar 10 Javascript
vue-axios使用详解
May 10 Javascript
vue学习之mintui picker选择器实现省市二级联动示例
Oct 12 Javascript
JS删除数组里的某个元素方法
Feb 03 Javascript
实战node静态文件服务器的示例代码
Mar 08 Javascript
vue element项目引入icon图标的方法
Jun 06 Javascript
详解element-ui表格中勾选checkbox,高亮当前行
Sep 02 Javascript
8个JS的reduce使用实例和reduce操作方式
Oct 05 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
15个小时----从修改程序到自己些程序
2006/10/09 PHP
PHP通过header实现文本文件下载的代码
2010/08/08 PHP
PHP生成随机用户名和密码的实现代码
2013/02/27 PHP
Mac系统下安装PHP Xdebug
2018/03/30 PHP
php文件上传原理与实现方法详解
2019/12/20 PHP
javascript实现的鼠标链接提示效果生成器代码
2007/06/28 Javascript
40款非常有用的 jQuery 插件推荐(系列一)
2011/12/21 Javascript
Table冻结表头示例代码
2013/08/20 Javascript
纯JavaScript实现获取onclick、onchange等事件的值
2014/12/29 Javascript
jquery实现的树形目录实例
2015/06/26 Javascript
jquery实现可横向和竖向展开的动态下滑菜单效果
2015/08/24 Javascript
实例代码详解jquery.slides.js
2015/11/16 Javascript
JSON字符串和对象相互转换实例分析
2016/06/16 Javascript
微信小程序实现跳转的几种方式总结(推荐)
2019/04/24 Javascript
微信小程序实现弹出菜单动画
2019/06/21 Javascript
JavaScript动态添加数据到表单并提交的几种方式
2019/06/26 Javascript
JS将时间秒转换成天小时分钟秒的字符串
2019/07/10 Javascript
vue实现修改图片后实时更新
2019/11/14 Javascript
nodejs环境使用Typeorm连接查询Oracle数据
2019/12/05 NodeJs
[01:14:05]《加油DOTA》第四期
2014/08/25 DOTA
python中尾递归用法实例详解
2015/04/28 Python
Python科学计算之NumPy入门教程
2017/01/15 Python
Python中asyncio与aiohttp入门教程
2018/10/16 Python
python 随机生成10位数密码的实现代码
2019/06/27 Python
如何在VSCode上轻松舒适的配置Python的方法步骤
2019/10/28 Python
如何基于pythonnet调用halcon脚本
2020/01/20 Python
Matplotlib animation模块实现动态图
2021/02/25 Python
Collection和Collections的区别
2016/05/02 面试题
接口中的方法可以是abstract的吗
2015/07/23 面试题
企业车辆管理制度
2014/01/24 职场文书
《飞向蓝天的恐龙》教学反思
2014/04/09 职场文书
大学生志愿者活动总结
2014/06/27 职场文书
借名购房协议书范本
2014/10/06 职场文书
员工自我工作评价
2015/03/06 职场文书
2015年中学图书馆工作总结
2015/07/22 职场文书
SQL CASE 表达式的具体使用
2022/03/21 SQL Server