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 animate 动画效果使用说明
Nov 04 Javascript
使用phantomjs进行网页抓取的实现代码
Sep 29 Javascript
2种jQuery 实现刮刮卡效果
Feb 01 Javascript
简单理解vue中Props属性
Oct 27 Javascript
Angular2 Service实现简单音乐播放器服务
Feb 24 Javascript
vue使用stompjs实现mqtt消息推送通知
Jun 22 Javascript
Vue官方文档梳理之全局配置
Nov 22 Javascript
JS计算两个时间相差分钟数的方法示例
Jan 10 Javascript
微信小程序实现的绘制table表格功能示例
Apr 26 Javascript
微信小程序用户授权,以及判断登录是否过期的方法
May 10 Javascript
layui固定下拉框的显示条数(有滚动条)的方法
Sep 10 Javascript
Map与WeakMap类型在JavaScript中的使用详解
Nov 18 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实现文件编码批量转换
2014/03/10 PHP
ThinkPHP中__initialize()和类的构造函数__construct()用法分析
2014/11/29 PHP
php中使用base HTTP验证的方法
2015/04/20 PHP
PHP register_shutdown_function()函数的使用示例
2015/06/23 PHP
php 判断IP为有效IP地址的方法
2018/01/28 PHP
PHP常见字符串操作函数与用法总结
2019/03/04 PHP
JavaScript isArray()函数判断对象类型的种种方法
2010/10/11 Javascript
jQuery结合PHP+MySQL实现二级联动下拉列表[实例]
2011/11/15 Javascript
JS修改css样式style浅谈
2013/05/06 Javascript
详解JavaScript函数绑定
2013/08/18 Javascript
js不能获取隐藏的div的宽度只能先显示后获取
2014/09/04 Javascript
bootstrap学习笔记之初识bootstrap
2016/06/21 Javascript
js精准的倒计时函数分享
2016/06/29 Javascript
JavaScript算法系列之快速排序(Quicksort)算法实例详解
2016/09/04 Javascript
详解JavaScript的闭包、IIFE、apply、函数与对象
2016/12/21 Javascript
很棒的一组js图片轮播特效
2017/01/12 Javascript
使用BootStrap实现标签切换原理解析
2017/03/14 Javascript
详解微信小程序 template添加绑定事件
2017/06/23 Javascript
Vue使用高德地图搭建实时公交应用功能(地图 + 附近站点+线路详情 + 输入提示+换乘详情)
2018/05/16 Javascript
vue+eslint+vscode配置教程
2019/08/09 Javascript
微信小程序之左右布局的实现代码
2019/12/13 Javascript
jQuery 实现扁平式小清新导航
2020/07/07 jQuery
Python+Socket实现基于UDP协议的局域网广播功能示例
2017/08/31 Python
Django Admin实现三级联动的示例代码(省市区)
2018/06/22 Python
Python线程指南分享
2019/11/19 Python
python实现猜拳游戏
2020/03/04 Python
Django中Aggregation聚合的基本使用方法
2020/07/09 Python
HTML5 CSS3打造相册效果附源码下载
2014/06/16 HTML / CSS
基于html5绘制圆形多角图案
2016/04/21 HTML / CSS
浅析HTML5 meta viewport参数
2020/10/28 HTML / CSS
Fossil美国官网:Fossil手表、手袋、珠宝及配件
2017/02/01 全球购物
OSPF有什么优点?为什么OSPF比RIP收敛快?
2013/02/13 面试题
最新的咖啡店创业计划书
2013/12/30 职场文书
工厂总经理岗位职责
2014/02/07 职场文书
处世之道:关于真诚相待的名言推荐
2019/12/02 职场文书
Python机器学习之基础概述
2021/05/19 Python