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 相关文章推荐
超级简单的图片防盗(HTML),好用
Apr 08 Javascript
用JS操作FRAME中的IFRAME及其内容的实现代码
Jul 26 Javascript
javascript特殊日历控件分享
Mar 07 Javascript
浅谈JavaScript中的this指针和引用知识
Aug 05 Javascript
html+javascript+bootstrap实现层级多选框全层全选和多选功能
Mar 09 Javascript
iOS + node.js使用Socket.IO框架进行实时通信示例
Apr 14 Javascript
ionic3实战教程之随机布局瀑布流的实现方法
Dec 28 Javascript
angularJs-$http实现百度搜索时的动态下拉框示例
Feb 27 Javascript
react 创建单例组件的方法
Apr 26 Javascript
vue在自定义组件中使用v-model进行数据绑定的方法
Mar 25 Javascript
ionic2.0双击返回键退出应用
Sep 17 Javascript
nuxt.js写项目时增加错误提示页面操作
Nov 05 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
全国FM电台频率大全 - 22 重庆市
2020/03/11 无线电
如何用C语言编写PHP扩展的详解
2013/06/13 PHP
javascript转换字符串为dom对象(字符串动态创建dom)
2010/05/10 Javascript
JQuery实现点击div以外的位置隐藏该div窗口
2013/09/13 Javascript
jQuery通过控制节点实现仅在前台通过get方法完成参数传递
2015/02/02 Javascript
js如何准确获取当前页面url网址信息
2020/09/13 Javascript
jQuery基础知识点总结(DOM操作)
2016/06/01 Javascript
Bootstrap学习笔记之css组件(3)
2016/06/07 Javascript
详解 vue.js用法和特性
2017/10/15 Javascript
vue 系列——vue2-webpack2框架搭建踩坑之路
2017/12/22 Javascript
vue 组件使用中的一些细节点
2018/04/25 Javascript
npm全局模块卸载及默认安装目录修改方法
2018/05/15 Javascript
Vue高版本中一些新特性的使用详解
2018/09/25 Javascript
详解vue几种主动刷新的方法总结
2019/02/19 Javascript
Vue使用watch监听一个对象中的属性的实现方法
2019/05/10 Javascript
vscode调试node.js的实现方法
2020/03/22 Javascript
[02:43]DOTA2英雄基础教程 圣堂刺客
2013/12/09 DOTA
Python写的服务监控程序实例
2015/01/31 Python
在Python的Django框架中simple-todo工具的简单使用
2015/05/30 Python
Python中的__slots__示例详解
2017/07/06 Python
解决Django模板无法使用perms变量问题的方法
2017/09/10 Python
django下创建多个app并设置urls方法
2020/08/02 Python
CSS3的column-fill属性对齐列内容高度的用法详解
2016/07/01 HTML / CSS
HTML5中input输入框默认提示文字向左向右移动的示例代码
2020/09/10 HTML / CSS
美国最好的葡萄酒网上商店:Wine Library
2019/11/02 全球购物
美国椅子和沙发制造商:La-Z-Boy
2020/10/25 全球购物
写出SQL四条最基本的数据操作语句(DML)
2012/12/12 面试题
swtich是否能作用在byte上,是否能作用在long上,是否能作用在String上
2013/07/06 面试题
写给老婆的检讨书
2014/02/21 职场文书
计算机网络及管理学专业求职信
2014/06/05 职场文书
大学拉赞助协议书范文
2014/09/26 职场文书
2015秋季小学开学寄语
2015/05/27 职场文书
2016情人节宣传语
2015/07/14 职场文书
SpringBoot实现quartz定时任务可视化管理功能
2021/08/30 Java/Android
python实现双向链表原理
2022/05/25 Python