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计算页面执行时间的函数
Dec 07 Javascript
获取任意Html元素与body之间的偏移距离 offsetTop、offsetLeft (For:IE5+ FF1 )[
Dec 22 Javascript
js类后台管理菜单类-MenuSwitch
Sep 12 Javascript
jQuery UI Autocomplete 1.8.16 中文输入修正代码
Apr 16 Javascript
引用外部js乱码问题分析及解决方案
Apr 12 Javascript
使用CSS样式position:fixed水平滚动的方法
Feb 19 Javascript
JavaScript替换当前页面的方法
Apr 03 Javascript
炫酷的js手风琴效果
Oct 13 Javascript
jQuery.datatables.js插件用法及api实例详解
Oct 28 Javascript
解决vue-cli + webpack 新建项目出错的问题
Mar 20 Javascript
JavaScript array常用方法代码实例详解
Sep 02 Javascript
js基础语法与maven项目配置教程案例
Jul 15 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 ob_start()控制浏览器cache、生成html实现代码
2010/02/16 PHP
php木马webshell扫描器代码
2012/01/25 PHP
PHP 的异常处理、错误的抛出及回调函数等面向对象的错误处理方法
2012/12/07 PHP
php的sprintf函数的用法 控制浮点数格式
2014/02/14 PHP
PHP模板引擎Smarty自定义变量调解器用法
2016/04/11 PHP
利用PHP将图片转换成base64编码的实现方法
2016/09/13 PHP
List the Codec Files on a Computer
2007/06/11 Javascript
JavaScript 函数调用规则
2009/09/14 Javascript
Fastest way to build an HTML string(拼装html字符串的最快方法)
2011/08/20 Javascript
我的Node.js学习之路(二)NPM模块管理
2014/07/06 Javascript
js实现宇宙星空背景效果的方法
2015/03/03 Javascript
数据分析软件之FineReport教程:[5]参数界面JS(全)
2015/08/13 Javascript
使用jQuery调用XML实现无刷新即时聊天
2016/08/07 Javascript
js实现上传文件添加和删除文件选择框
2016/10/24 Javascript
vue2.0结合Element实现select动态控制input禁用实例
2017/05/12 Javascript
浅谈在vue项目中如何定义全局变量和全局函数
2017/10/24 Javascript
用Vue写一个分页器的示例代码
2018/04/22 Javascript
详解vue 不同环境配置不同的打包命令
2019/04/07 Javascript
浅谈 Webpack 如何处理图片(开发、打包、优化)
2019/05/15 Javascript
Vue data的数据响应式到底是如何实现的
2020/02/11 Javascript
Python中利用sorted()函数排序的简单教程
2015/04/27 Python
不要用强制方法杀掉python线程
2017/02/26 Python
Python使用迭代器捕获Generator返回值的方法
2017/04/05 Python
python不换行之end=与逗号的意思及用途
2017/11/21 Python
python K近邻算法的kd树实现
2018/09/06 Python
简单了解python的一些位运算技巧
2019/07/13 Python
Python3基本输入与输出操作实例分析
2020/02/14 Python
pycharm 2020.2.4 pip install Flask 报错 Error:Non-zero exit code的问题
2020/12/04 Python
纯CSS实现右侧底部悬浮效果(悬浮QQ、微信、微博、邮箱等联系方式)
2015/04/24 HTML / CSS
CSS3实现大小不一的粒子旋转加载动画
2016/04/21 HTML / CSS
iframe与window.onload如何使用详解
2020/05/07 HTML / CSS
海量信息软件测试笔试题
2015/08/08 面试题
大学总结自我鉴定
2014/01/18 职场文书
JAVA程序员自荐书
2014/01/30 职场文书
2014酒店客房部工作总结
2014/12/16 职场文书
数学教师个人工作总结
2015/02/06 职场文书