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实现锚点(Anchor)间平滑跳转
Sep 08 Javascript
改变javascript函数内部this指针指向的三种方法
Apr 23 Javascript
在JQuery dialog里的服务器控件 事件失效问题
Dec 08 Javascript
laypage分页控件使用实例详解
May 19 Javascript
详解js中Number()、parseInt()和parseFloat()的区别
Dec 20 Javascript
vue中v-model动态生成的实例详解
Oct 27 Javascript
jQuery实现form表单序列化转换为json对象功能示例
May 23 jQuery
jQuery+Datatables实现表格批量删除功能【推荐】
Oct 24 jQuery
vue实现微信二次分享以及自定义分享的示例
Mar 20 Javascript
Vue.js组件props数据验证实现详解
Oct 19 Javascript
浅谈nuxtjs校验登录中间件和混入(mixin)
Nov 06 Javascript
详细聊聊浏览器是如何看闭包的
Nov 11 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实现的封装验证码类详解
2013/06/18 PHP
php采用file_get_contents代替使用curl实例
2014/11/07 PHP
php+Mysqli利用事务处理转账问题实例
2015/02/11 PHP
php支付宝手机网页支付类实例
2015/03/04 PHP
php微信公众号开发之翻页查询
2018/10/20 PHP
Javascript的一种模块模式
2008/03/22 Javascript
JavaScript 未结束的字符串常量常见解决方法
2010/01/24 Javascript
js分页代码分享
2014/04/28 Javascript
JavaScript中如何通过arguments对象实现对象的重载
2014/05/12 Javascript
JavaScript函数参数使用带参数名的方式赋值传入的方法
2015/03/19 Javascript
jquery超简单实现手风琴效果的方法
2015/06/05 Javascript
让图片跳跃起来  javascript图片轮播特效
2016/02/16 Javascript
第二次聊一聊JS require.js模块化工具的基础知识
2016/04/17 Javascript
JS模拟bootstrap下拉菜单效果实例
2016/06/17 Javascript
又一枚精彩的弹幕效果jQuery实现
2016/07/25 Javascript
Vue iview-admin框架二级菜单改为三级菜单的方法
2018/07/03 Javascript
vue文件运行的方法教学
2019/02/12 Javascript
解决vue单页面修改样式无法覆盖问题
2019/08/05 Javascript
微信内置浏览器图片查看器的代码实例
2019/10/08 Javascript
[00:09]DOTA2新版本PA至宝特效动作展示
2014/11/19 DOTA
[02:39]我与DAC之Newbee.Moogy:从论坛到TI
2018/03/26 DOTA
深入讲解Python中面向对象编程的相关知识
2015/05/25 Python
Python selenium 三种等待方式解读
2016/09/15 Python
python绘制多个曲线的折线图
2020/03/23 Python
对Python3中bytes和HexStr之间的转换详解
2018/12/04 Python
Python设计模式之桥接模式原理与用法实例分析
2019/01/10 Python
详解CSS的border边框属性及其在CSS3中的新特性
2016/05/10 HTML / CSS
深入理解HTML5定时器requestAnimationFrame的使用
2018/12/12 HTML / CSS
历史学专业个人的自我评价
2013/10/13 职场文书
车间操作工岗位职责
2013/12/19 职场文书
公司采购主管岗位职责
2014/06/17 职场文书
个人工作总结范文2014
2014/11/07 职场文书
2016婚礼主持词开场白
2015/11/24 职场文书
2019年幼儿园家长接送责任书
2019/10/29 职场文书
进行数据处理的6个 Python 代码块分享
2022/04/06 Python
Java异常体系非正常停止和分类
2022/06/14 Java/Android