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 window.opener的用法分析
Apr 07 Javascript
javascript笛卡尔积算法实现方法
Apr 08 Javascript
JQuery中节点遍历方法实例
May 18 Javascript
flag和jq on 的绑定多个对象和方法(必看)
Feb 27 Javascript
jquery中关于bind()方法的使用技巧分享
Mar 30 jQuery
用Webpack构建Vue项目的实践
Nov 07 Javascript
基于vue2.0的活动倒计时组件countdown(附源码下载)
Oct 09 Javascript
laydate如何根据开始时间或者结束时间限制范围
Nov 15 Javascript
JavaScript对象拷贝与赋值操作实例分析
Dec 10 Javascript
JavaScript 替换所有匹配内容及正则替换方法
Feb 12 Javascript
vue 自定义组件的写法与用法详解
Mar 04 Javascript
微信小程序实现多图上传
Jun 19 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
高分R级DC动画剧《哈莉·奎茵》第二季正式预告首发
2020/04/09 欧美动漫
php获取文件大小的方法
2014/02/26 PHP
配置Nginx+PHP的正确思路与过程
2016/05/10 PHP
PHP设计模式之工厂模式详解
2017/10/24 PHP
javaScript 数值型和字符串型之间的转换
2009/07/25 Javascript
分享一个asp.net pager分页控件
2012/01/04 Javascript
浅析hasOwnProperty方法的应用
2013/11/20 Javascript
JavaScript中常见的字符串操作函数及用法汇总
2015/05/04 Javascript
有关Promises异步问题详解
2015/11/13 Javascript
利用JS实现简单的日期选择插件
2017/01/23 Javascript
jQuery插件HighCharts实现的2D对数饼图效果示例【附demo源码下载】
2017/03/09 Javascript
微信小程序五子棋游戏AI实现方法【附demo源码下载】
2019/02/20 Javascript
原生js canvas实现鼠标跟随效果
2020/08/02 Javascript
el-form 多层级表单的实现示例
2020/09/10 Javascript
sublime python3 输入换行不结束的方法
2018/04/19 Python
详解基于python的多张不同宽高图片拼接成大图
2019/09/26 Python
django实现HttpResponse返回json数据为中文
2020/03/27 Python
Python如何操作docker redis过程解析
2020/08/10 Python
python3从网络摄像机解析mjpeg http流的示例
2020/11/13 Python
python中的时区问题
2021/01/14 Python
Python绘制数码晶体管日期
2021/02/19 Python
HTML5+CSS3 诱人的实例:3D立方体旋转动画实例
2016/12/30 HTML / CSS
美体小铺瑞典官方网站:The Body Shop瑞典
2018/01/27 全球购物
蹦床仓库:Trampoline Warehouse
2018/12/06 全球购物
Stuarts London美国/加拿大:世界领先的独立男装零售商之一
2019/03/18 全球购物
个人简历的自荐信
2013/10/23 职场文书
先进班级集体事迹材料
2014/01/30 职场文书
有关爱国演讲稿
2014/05/07 职场文书
白岩松演讲
2014/05/21 职场文书
汽车服务工程专业自荐信
2014/09/02 职场文书
群众路线教育实践活动对照检查材料
2014/09/22 职场文书
群众路线党员自我评议范文2014
2014/09/24 职场文书
简易离婚协议书范本
2014/10/24 职场文书
党员干部学法用法心得体会
2016/01/21 职场文书
python 使用Tensorflow训练BP神经网络实现鸢尾花分类
2021/05/12 Python
日本官方排名前10的动漫,名侦探柯南上榜,第一是一部创造历史的动漫
2022/03/18 日漫