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 相关文章推荐
CSS+JS构建的图片查看器
Jul 22 Javascript
jquery 多行滚动代码(附详细解释)
Jun 17 Javascript
jquer之ajaxQueue简单实现代码
Sep 15 Javascript
jquery图片不完全按比例自动缩小的简单代码
Jul 29 Javascript
js 自带的 map() 方法全面了解
Aug 16 Javascript
详解vue2.0组件通信各种情况总结与实例分析
Mar 22 Javascript
用p5.js制作烟花特效的示例代码
Mar 21 Javascript
js取小数点后两位四种方法
Jan 18 Javascript
Vue 3.0 前瞻Vue Function API新特性体验
Aug 12 Javascript
解决Layui中layer报错的问题
Sep 03 Javascript
微信小程序工具函数封装
Oct 28 Javascript
js与jquery获取input输入框中的值实例讲解
Feb 27 jQuery
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
PHP 加密/解密函数 dencrypt(动态密文,带压缩功能,支持中文)
2009/01/30 PHP
php实现的简单检验登陆类
2015/06/18 PHP
PHP下载远程图片的几种方法总结
2017/04/07 PHP
php删除一个路径下的所有文件夹和文件的方法
2018/02/07 PHP
PHP PDOStatement::closeCursor讲解
2019/01/30 PHP
yii框架结合charjs实现统计30天数据的方法
2020/04/04 PHP
IE event.srcElement和FF event.target 功能比较
2010/03/01 Javascript
通过JavaScript控制字体大小的代码
2011/10/04 Javascript
使用iframe window的scroll方法控制iframe页面滚动
2014/03/05 Javascript
jquery操作复选框checkbox的方法汇总
2015/02/05 Javascript
javascript实现网页字符定位的方法
2015/07/14 Javascript
jQuery设置Cookie及删除Cookie实例分析
2016/04/15 Javascript
JS仿QQ好友列表展开、收缩功能(第一篇)
2017/07/07 Javascript
JS分页的实现(同步与异步)
2017/09/16 Javascript
从0到1构建vueSSR项目之node以及vue-cli3的配置
2019/03/07 Javascript
[01:06]DOTA2隆重推出2016冬季勇士令状 内含上海特级锦标赛互动指南
2016/02/17 DOTA
python中的hashlib和base64加密模块使用实例
2014/09/02 Python
跟老齐学Python之类的细节
2014/10/13 Python
Python的Django应用程序解决AJAX跨域访问问题的方法
2016/05/31 Python
详解python的webrtc库实现语音端点检测
2017/05/31 Python
Django添加favicon.ico图标的示例代码
2018/08/07 Python
Python中asyncio模块的深入讲解
2019/06/10 Python
python实现上传文件到linux指定目录的方法
2020/01/03 Python
Python request使用方法及问题总结
2020/04/26 Python
python之语音识别speech模块
2020/09/09 Python
Python实现钉钉/企业微信自动打卡的示例代码
2021/02/02 Python
Europcar意大利:汽车租赁
2019/07/07 全球购物
意大利领先的奢侈品在线时装零售商:MCLABELS
2020/10/13 全球购物
Stokke美国官方网店:高级儿童家具、推车、汽车座椅和配件
2020/06/06 全球购物
偷看我的初中毕业鉴定
2014/01/29 职场文书
制冷与空调专业毕业生推荐信
2014/07/07 职场文书
医院护士工作检讨书
2014/10/26 职场文书
办公用房租赁协议书
2014/11/29 职场文书
求职自我评价范文
2015/03/09 职场文书
2015年学校总务处工作总结
2015/05/19 职场文书
2019年特色火锅店的创业计划书模板
2019/08/28 职场文书