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 相关文章推荐
Raphael带文本标签可拖动的图形实现代码
Feb 20 Javascript
浅谈Javascript变量作用域问题
Dec 16 Javascript
js漂浮广告实现代码
Aug 15 Javascript
JS中对象与字符串的互相转换详解
May 20 Javascript
JavaScript高仿支付宝倒计时页面及代码实现
Oct 21 Javascript
Vue cli 引入第三方JS和CSS的常用方法分享
Jan 20 Javascript
微信小程序页面生命周期详解
Jan 31 Javascript
vue实现父子组件之间的通信以及兄弟组件的通信功能示例
Jan 29 Javascript
仿vue-cli搭建属于自己的脚手架的方法步骤
Apr 17 Javascript
基于vue-cli 路由 实现类似tab切换效果(vue 2.0)
May 08 Javascript
详解无限滚动插件vue-infinite-scroll源码解析
May 12 Javascript
jquery实现图片放大镜效果
Dec 23 jQuery
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 图像尺寸调整代码
2010/05/26 PHP
PHP stripos()函数及注意事项的分析
2013/06/08 PHP
在PHP中使用redis
2013/11/04 PHP
十大使用PHP框架的理由
2015/09/26 PHP
PHP实现字母数字混合验证码功能
2019/07/11 PHP
php实现映射操作实例详解
2019/10/02 PHP
当json键为数字时的取值方法解析
2013/11/15 Javascript
Javascript实现滚动图片新闻的实例代码
2013/11/27 Javascript
基于Arcgis for javascript实现百度地图ABCD marker的效果
2015/09/12 Javascript
Vue+axios 实现http拦截及路由拦截实例
2017/04/25 Javascript
从0到1构建vueSSR项目之路由的构建
2019/03/07 Javascript
layui动态加载多表头的实例
2019/09/05 Javascript
Element实现表格嵌套、多个表格共用一个表头的方法
2020/05/09 Javascript
vue项目接口域名动态获取操作
2020/08/13 Javascript
Vue通过阿里云oss的url连接直接下载文件并修改文件名的方法
2020/12/25 Vue.js
k8s node节点重新加入master集群的实现
2021/02/22 Javascript
python检测某个变量是否有定义的方法
2015/05/20 Python
Python实现获取磁盘剩余空间的2种方法
2017/06/07 Python
Python3结合Dlib实现人脸识别和剪切
2018/01/24 Python
opencv python 傅里叶变换的使用
2018/07/21 Python
tensorflow 用矩阵运算替换for循环 用tf.tile而不写for的方法
2018/07/27 Python
使用Pandas的Series方法绘制图像教程
2019/12/04 Python
Python代码块及缓存机制原理详解
2019/12/13 Python
keras读取训练好的模型参数并把参数赋值给其它模型详解
2020/06/15 Python
Python numpy大矩阵运算内存不足如何解决
2020/11/19 Python
eDreams巴西:廉价机票,酒店优惠和度假套餐
2017/04/14 全球购物
新西兰领先的鞋类和靴子网上商城:Merchant 1948
2017/09/08 全球购物
Sandro法国官网:法国成衣品牌
2019/08/28 全球购物
机关作风建设剖析材料
2014/10/11 职场文书
2014年测量员工作总结
2014/12/12 职场文书
先进典型事迹材料
2014/12/29 职场文书
2015年度服装销售工作总结
2015/03/31 职场文书
家电创业计划书
2019/08/05 职场文书
python中requests库+xpath+lxml简单使用
2021/04/29 Python
vue中使用mockjs配置和使用方式
2022/04/06 Vue.js
MyBatis XPathParser解析器使用范例详解
2022/07/15 Java/Android