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中几个重要的属性(this、constructor、prototype)介绍
May 19 Javascript
Google Maps API地图应用示例分享
Oct 23 Javascript
基于jQuery实现返回顶部实例代码
Jan 01 Javascript
手机端图片缩放旋转全屏查看PhotoSwipe.js插件实现
Aug 25 Javascript
JS实现表单验证功能(验证手机号是否存在,验证码倒计时)
Oct 11 Javascript
微信小程序学习(4)-系统配置app.json详解
Jan 12 Javascript
ionic3 懒加载
Aug 16 Javascript
使用Nuxt.js改造已有项目的方法
Aug 07 Javascript
微信小程序实现的一键连接wifi功能示例
Apr 24 Javascript
vue实现页面滚动到底部刷新
Aug 16 Javascript
Js和VUE实现跑马灯效果
May 25 Javascript
Vue2项目中对百度地图的封装使用详解
Jun 16 Vue.js
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
基于mysql的bbs设计(一)
2006/10/09 PHP
九个你必须知道而且又很好用的php函数和特点
2013/08/08 PHP
php分页代码学习示例分享
2014/02/20 PHP
10个简化PHP开发的工具
2014/12/25 PHP
浅谈PHP发送HTTP请求的几种方式
2017/07/25 PHP
PHP实现数据库统计时间戳按天分组输出数据的方法
2017/10/10 PHP
Laravel 实现密码重置功能
2018/02/23 PHP
用javascript实现给出的盒子的序列是否可连为一矩型
2007/08/30 Javascript
js中单引号与双引号冲突问题解决方法
2013/10/04 Javascript
jQuery实现统计输入文字个数的方法
2015/03/11 Javascript
HTML5之WebSocket入门3 -通信模型socket.io
2015/08/21 Javascript
AngularJS向后端ASP.NET API控制器上传文件
2016/02/03 Javascript
对js eval()函数的一些见解
2016/08/15 Javascript
Bootstrap选项卡动态切换效果
2016/11/28 Javascript
JavaScript调试的多个必备小Tips
2017/01/15 Javascript
javascript数据结构中栈的应用之符号平衡问题
2017/04/11 Javascript
AngularJS中ng-class用法实例分析
2017/07/06 Javascript
浅谈关于axios和session的一些事
2017/07/13 Javascript
js设置默认时间跨度过程详解
2019/07/17 Javascript
[01:50:49]DOTA2-DPC中国联赛 正赛 PSG.LGD vs Aster BO3 第三场 1月24日
2021/03/11 DOTA
Python生成验证码实例
2014/08/21 Python
将Django项目部署到CentOs服务器中
2018/10/18 Python
python pexpect ssh 远程登录服务器的方法
2019/02/14 Python
python傅里叶变换FFT绘制频谱图
2019/07/19 Python
一行Python代码过滤标点符号等特殊字符
2019/08/12 Python
python groupby 函数 as_index详解
2019/12/16 Python
Python虚拟环境库virtualenvwrapper安装及使用
2020/06/17 Python
Scrapy-Redis之RedisSpider与RedisCrawlSpider详解
2020/11/18 Python
荷兰电脑专场:Paradigit
2018/05/05 全球购物
简述网络文件系统NFS,并说明其作用
2016/10/19 面试题
黄金搭档广告词
2014/03/21 职场文书
《观舞记》教学反思
2014/04/16 职场文书
幼儿评语大全
2014/04/30 职场文书
诉讼财产保全担保书
2014/05/20 职场文书
工作证明格式及范本
2014/09/12 职场文书
关于CSS自定义属性与前端页面的主题切换问题
2022/03/21 HTML / CSS