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 相关文章推荐
基于jQuery的日期选择控件
Oct 27 Javascript
什么是json和jsonp,jQuery json实例详详细说明
Dec 11 Javascript
JQuery+Ajax无刷新分页的实例代码
Feb 08 Javascript
jQuery文件上传插件Uploadify使用指南
Jun 05 Javascript
js 判断各种数据类型的简单方法(推荐)
Aug 29 Javascript
js Canvas实现的日历时钟案例分享
Dec 25 Javascript
详解微信小程序 template添加绑定事件
Jun 23 Javascript
如何将你的AngularJS1.x应用迁移至React的方法
Feb 01 Javascript
Angularjs实现控制器之间通信方式实例总结
Mar 27 Javascript
微信小程序3D轮播实现代码
Sep 19 Javascript
ES6 proxy和reflect的使用方法与应用实例分析
Feb 15 Javascript
JavaScript实现猜数字游戏
May 20 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
Linux fgetcsv取得的数组元素为空字符串的解决方法
2011/11/25 PHP
浅析php插件 HTMLPurifier HTML解析器
2013/07/01 PHP
php简单实现多语言切换的方法
2016/05/09 PHP
Javascript String.replace的妙用
2009/09/08 Javascript
Jquery.TreeView结合ASP.Net和数据库生成菜单导航条
2010/08/27 Javascript
javascript实现的使用方向键控制光标在table单元格中切换
2010/11/17 Javascript
jquery indexOf使用方法
2013/08/19 Javascript
javascript实现数字+字母验证码的简单实例
2014/02/10 Javascript
使用jQuery.wechat构建微信WEB应用
2014/10/09 Javascript
JS+CSS实现简单滑动门(滑动菜单)效果
2015/09/19 Javascript
JavaScript重定向URL参数的两种方法小结
2016/10/19 Javascript
NodeJS创建最简单的HTTP服务器
2017/05/15 NodeJs
vue-cli结合Element-ui基于cropper.js封装vue实现图片裁剪组件功能
2018/03/01 Javascript
在Vue methods中调用filters里的过滤器实例
2018/08/30 Javascript
JAVA面试题 static关键字详解
2019/07/16 Javascript
layui异步加载table表中某一列数据的例子
2019/09/16 Javascript
ES6 Promise对象概念及用法实例详解
2019/10/15 Javascript
JS操作Fckeditor的一些常用方法(获取、插入等)
2020/02/19 Javascript
JavaScript实现五子棋小游戏
2020/10/26 Javascript
Python实现的Kmeans++算法实例
2014/04/26 Python
在Python中使用dict和set方法的教程
2015/04/27 Python
使用Python实现博客上进行自动翻页
2017/08/23 Python
详谈套接字中SO_REUSEPORT和SO_REUSEADDR的区别
2018/04/28 Python
Pycharm 创建 Django admin 用户名和密码的实例
2018/05/30 Python
对Python中plt的画图函数详解
2018/11/07 Python
使用python对文件中的数值进行累加的实例
2018/11/28 Python
Python Django 前后端分离 API的方法
2019/08/28 Python
Python3直接爬取图片URL并保存示例
2019/12/18 Python
python opencv圆、椭圆与任意多边形的绘制实例详解
2020/02/06 Python
logging level级别介绍
2020/02/21 Python
用CSS3打造HTML5的Logo(实现代码)
2016/06/16 HTML / CSS
中国旅游网站:途牛旅游网
2019/09/29 全球购物
经理助理岗位职责
2014/03/05 职场文书
爱国演讲稿500字
2014/05/04 职场文书
2015国庆节66周年标语
2015/07/30 职场文书
pytorch finetuning 自己的图片进行训练操作
2021/06/05 Python