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 相关文章推荐
为JavaScript类型增加方法的实现代码(增加功能)
Dec 29 Javascript
jQuery-onload让第一次页面加载时图片是淡入方式显示
May 23 Javascript
Jquery增加鼠标中间功能mousewheel的实例代码
Sep 05 Javascript
JS折半插入排序算法实例
Dec 02 Javascript
SpringMVC返回json数据的三种方式
Dec 10 Javascript
微信小程序 教程之WXML
Oct 18 Javascript
js对字符串进行编码的方法总结(推荐)
Nov 10 Javascript
jQuery Autocomplete简介_动力节点Java学院整理
Jul 17 jQuery
详解JavaScript 中 if / if...else...替换方式
Jul 15 Javascript
详解使用React.memo()来优化函数组件的性能
Mar 19 Javascript
微信小程序如何实现在线客服功能
Oct 16 Javascript
浅谈vue在html中出现{{}}的原因及解决方式
Nov 16 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
Laravel中encrypt和decrypt的实现方法
2017/09/24 PHP
PHP ADODB实现分页功能简单示例
2018/05/25 PHP
Thinkphp5 如何隐藏入口文件index.php(URL重写)
2019/10/16 PHP
gearman管理工具GearmanManager的安装与php使用方法示例
2020/02/27 PHP
js checkbox(复选框) 使用集锦
2009/04/28 Javascript
JQUERY的属性选择符和自定义选择符使用方法(二)
2011/04/07 Javascript
分享8款优秀的 jQuery 加载动画和进度条插件
2012/10/24 Javascript
基于jquery实现的定时显示与隐藏div广告的实现代码
2013/08/22 Javascript
javascript实现颜色渐变的方法
2013/10/30 Javascript
JS获取当前网址、主机地址项目根路径
2013/11/19 Javascript
jquery实现弹出窗口效果的实例代码
2013/11/28 Javascript
this,this,再次讨论javascript中的this,超全面(经典)
2016/01/05 Javascript
Bootstrap Search Suggest使用例子
2016/12/21 Javascript
JavaScript中附件预览功能实现详解(推荐)
2017/08/15 Javascript
NodeJs实现定时任务的示例代码
2017/12/05 NodeJs
基于layui实现高级搜索(筛选)功能
2019/07/26 Javascript
基于vue-draggable 实现三级拖动排序效果
2020/01/10 Javascript
JavaScript中的执行环境和作用域链
2020/09/04 Javascript
[40:53]完美世界DOTA2联赛PWL S3 Magma vs DLG 第二场 12.18
2020/12/20 DOTA
本地文件上传到七牛云服务器示例(七牛云存储)
2014/01/11 Python
解决Pycharm中import时无法识别自己写的程序方法
2018/05/18 Python
python一键去抖音视频水印工具
2018/09/14 Python
pandas筛选某列出现编码错误的解决方法
2018/11/07 Python
PYTHON EVAL的用法及注意事项解析
2019/09/06 Python
Python 字符串、列表、元组的截取与切片操作示例
2019/09/17 Python
Python 如何优雅的将数字转化为时间格式的方法
2019/09/26 Python
canvas如何实现多张图片编辑的图片编辑器
2020/03/10 HTML / CSS
ROSEFIELD手表荷兰官方网上商店:北欧极简设计女士腕表品牌
2018/01/24 全球购物
外语专业毕业生自我评价分享
2013/10/05 职场文书
应聘教师自荐信
2013/10/12 职场文书
销售类求职信
2014/06/13 职场文书
医院见习报告范文
2014/11/03 职场文书
护士年终个人总结
2015/02/13 职场文书
基于CSS3画一个iPhone
2021/04/21 HTML / CSS
Mysql分库分表之后主键处理的几种方法
2022/02/15 MySQL
mysql数据库隔离级别详解
2022/06/16 MySQL