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 相关文章推荐
js字符串的各种格式的转换 ToString,Format
Aug 08 Javascript
基于jQuery的星级评分插件
Aug 12 Javascript
ToolTips JQEURY插件之简洁小提示框效果
Nov 19 Javascript
jQuery+PHP星级评分实现方法
Oct 02 Javascript
Bootstrap入门书籍之(四)菜单、按钮及导航
Feb 17 Javascript
AngularJS Ajax详解及示例代码
Aug 17 Javascript
webpack入门必知必会
Jan 16 Javascript
解决Vue2.0自带浏览器里无法打开的原因(兼容处理)
Jul 28 Javascript
浅谈angular4生命周期钩子
Sep 05 Javascript
基于Swiper实现移动端页面图片轮播效果
Dec 28 Javascript
详解jQuery设置内容和属性
Apr 11 jQuery
原生JavaScript实现购物车
Jan 10 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中实现中文字符进制转换原理分析
2011/12/06 PHP
用php实现百度网盘图片直链的代码分享
2012/11/01 PHP
php + nginx项目中的权限详解
2017/05/23 PHP
PHP Class SoapClient not found解决方法
2018/01/20 PHP
购物车实现的几种方式优缺点对比
2018/05/02 PHP
JsEasy简介 JsEasy是什么?与下载
2007/03/07 Javascript
js 加载并解析XML字符串的代码
2009/12/13 Javascript
EasyUi tabs的高度与宽度根据IE窗口的变化自适应代码
2010/10/26 Javascript
jquery.zclip轻量级复制失效问题
2017/01/08 Javascript
JavaScript数据结构之广义表的定义与表示方法详解
2017/04/12 Javascript
几种响应式文字详解
2017/05/19 Javascript
详解vue中axios的使用与封装
2019/03/20 Javascript
详解vue 路由跳转四种方式 (带参数)
2019/04/28 Javascript
vue框架中props的typescript用法详解
2020/02/17 Javascript
Vue+Vant 图片上传加显示的案例
2020/11/03 Javascript
[01:16]2014DOTA2 TI专访C9战队EE:中国五强中会占三席
2014/07/10 DOTA
布同自制Python函数帮助查询小工具
2011/03/13 Python
Python yield 使用浅析
2015/05/28 Python
浅谈Python生成器generator之next和send的运行流程(详解)
2017/05/08 Python
python编程培训 python培训靠谱吗
2018/01/17 Python
PyQt5+requests实现车票查询工具
2019/01/21 Python
将tensorflow模型打包成PB文件及PB文件读取方式
2020/01/23 Python
Python正则表达式高级使用方法汇总
2020/06/18 Python
基于Pytorch版yolov5的滑块验证码破解思路详解
2021/02/25 Python
Bootstrap 学习分享
2012/11/12 HTML / CSS
英国足球店:UK Soccer Shop
2017/11/19 全球购物
Carter’s官方旗舰店:美国受欢迎的婴童服装品牌
2018/01/21 全球购物
法国滑雪假期的专家:Ski Planet
2019/11/02 全球购物
信息部岗位职责
2013/11/12 职场文书
合伙经营协议书
2014/04/18 职场文书
岗位说明书怎么写
2014/07/30 职场文书
房屋买卖协议样本
2014/11/16 职场文书
ktv服务员岗位职责
2015/02/09 职场文书
广播体操比赛主持词
2015/06/29 职场文书
sql通过日期判断年龄函数的示例代码
2021/07/16 SQL Server
SpringBoot 集成短信和邮件 以阿里云短信服务为例
2022/04/22 Java/Android