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 相关文章推荐
document.body.scrollTop 值总为0的解决方法 比较常见的标准问题
Nov 30 Javascript
JavaScript prototype属性深入介绍
Nov 27 Javascript
js去除重复字符串两种实现方法
Jan 09 Javascript
仿当当网淘宝网等主流电子商务网站商品分类导航菜单
Sep 25 Javascript
jQuery基于图层模仿五星星评价功能的方法
May 07 Javascript
jquery图片滚动放大代码分享(2)
Aug 28 Javascript
vue中post请求以a=a&b=b 的格式写遇到的问题
Apr 27 Javascript
JavaScript callback回调函数用法实例分析
May 08 Javascript
node基于async/await对mysql进行封装
Jun 20 Javascript
微信小程序中悬浮窗功能的实现代码
Aug 02 Javascript
vue中npm包全局安装和局部安装过程
Sep 03 Javascript
Vue组件基础用法详解
Feb 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
PHP OPCode缓存 APC详细介绍
2010/10/12 PHP
PHP实现文件下载详解
2014/11/27 PHP
浅谈php冒泡排序
2014/12/30 PHP
php实现RSA加密类实例
2015/03/26 PHP
Laravel框架Request、Response及Session操作示例
2019/05/06 PHP
js tab效果的实现代码
2009/12/26 Javascript
jquery ready()的几种实现方法小结
2010/06/18 Javascript
filters.revealTrans.Transition使用方法小结
2010/08/19 Javascript
js写一个字符串转成驼峰的实例
2013/06/21 Javascript
顶部缓冲下拉菜单导航特效的JS代码
2013/08/27 Javascript
js调试系列 源码定位与调试[基础篇]
2014/06/18 Javascript
Nodejs全栈框架StrongLoop推荐
2014/11/09 NodeJs
整理一下常见的IE错误
2016/11/18 Javascript
Jquery把获取到的input值转换成json
2017/05/15 jQuery
Vue前后端不同端口的实现方法
2018/09/19 Javascript
15分钟深入了解JS继承分类、原理与用法
2019/01/19 Javascript
利用Bootstrap Multiselect实现下拉框多选功能
2019/04/08 Javascript
jquery操作select常见方法大全【7种情况】
2019/05/28 jQuery
js定义类的方法示例【ES5与ES6】
2019/07/30 Javascript
jQuery 实现DOM元素拖拽交换位置的实例代码
2020/07/14 jQuery
解决Vue-cli3没有vue.config.js文件夹及配置vue项目域名的问题
2020/12/04 Vue.js
[01:32:50]DOTA2-DPC中国联赛 正赛 DLG vs XG BO3 第一场 1月25日
2021/03/11 DOTA
pymssql数据库操作MSSQL2005实例分析
2015/05/25 Python
浅析Python3中的对象垃圾收集机制
2019/06/06 Python
Python实现基于socket的udp传输与接收功能详解
2019/11/15 Python
python tkinter GUI绘制,以及点击更新显示图片代码
2020/03/14 Python
浅谈Python线程的同步互斥与死锁
2020/03/22 Python
机电专业毕业生求职信
2013/10/27 职场文书
商务英语大学生职业生涯规划书范文
2014/01/01 职场文书
化妆师职业生涯规划书
2014/02/16 职场文书
电工工作职责范本
2014/02/22 职场文书
陈欧广告词
2014/03/14 职场文书
开除员工通知
2015/04/22 职场文书
看上去很美观后感
2015/06/10 职场文书
2016高中社会实践心得体会范文
2016/01/14 职场文书
Python  序列化反序列化和异常处理的问题小结
2022/12/24 Python