深入浅出分析javaScript中this用法


Posted in Javascript onMay 09, 2015

本文实例讲述了javaScript中this用法。分享给大家供大家参考。具体分析如下:

之前学javascript的时候总搞不清this,这个this不像java里的this那么好理解。我后来也是看了许多别人写的文章,才理解过来的。现在把别人写的东西搬过来,怕以后忘记。

总得来说 this的指向分三种。指向全局window,该对象,构造函数。

结论:在Javascript中,this指向函数执行时的当前对象。  简单点说就是调用的方法属于哪个对象,this就指向那个对象。

1. 全局window

简单代码

var message = "this in window";
var printMessage = function(){
  console.info(this === window);
  console.info(this.message);
};
printMessage();

因为调用方法printMessage是属于window的,所以输出结果为:

true   this in window

现在如果将代码改复杂点

var message = "this in window";
var printMessage = function(){
  console.info(this === window);
  console.info(this.message);
};
var obj = {
  message: 'this in obj',
  printMsg : function(){
 printMessage();
  }
};
obj.printMessage();

此时printMessage方法是属于window的,所以他的this还是指向window。obj.printMessage 方法是属于obj对象的,看看下面的分析。

所以输出结果还是为:true   this in window

2. 该对象

现在看看该对象的,稍微改一下代码

var message = "this in window";
var printMessage = function(){
  console.info(this === window);
  console.info(this.message);
};
var obj = {
  message: 'this in obj',
  printMessage : window.printMessage
};
obj.printMessage();

结果:

false        this in obj

对的,你想的没错 , 还是上一步的结论,obj.printMessage 方法是属于obj对象的,所以this是指向obj的。

好的再呕心点,看代码:

var message = "this in window";
var printMessage = function(){
  console.info(this === window);
  console.info(this.message);
};
var obj = {
  message: 'this in obj',
  printMessage : function(){
 var obj2 = {
   message:'this in obj2',
   printMessage: window.printMessage
 };
 obj2.printMessage();
  }
};
obj.printMessage();

最终调用的是 obj2.printMessage(),所以执行到this的时候,那个this是obj2

结果:

false,this in obj2

哈哈,是不是和你想的一样,谁调用的,就指向谁。

3. 构造函数

var Person = function(){
  this.age = 1;
  this.name = 'no name';
};
var p = new Person();
console.info('age = ' + p.age);
console.info('name = ' + p.name);

结果:

age = 1 name = no name。

那么构造函数对this作了什么呢?  前面讲的《深入浅出理解javaScript原型链》  有对new做分析。

var Person = function(){};
var p = new Person();

new的过程拆分成以下三步:
(1) var p={}; 也就是说,初始化一个对象p
(2) p.__proto__ = Person.prototype;
(3) Person.call(p); 也就是说构造p,也可以称之为初始化p

那么就来说说call。

call 方法

应用于:Function 对象
调用一个对象的一个方法,以另一个对象替换当前对象。

call([thisObj[,arg1[, arg2[,   [,.argN]]]]])

参数:
thisObj
可选项。将被用作当前对象的对象。
arg1, arg2, , argN
可选项。将被传递方法参数序列。

说明:
call 方法可以用来代替另一个对象调用一个方法。call 方法可将一个函数的对象上下文从初始的上下文改变为由 thisObj 指定的新对象。如果没有提供 thisObj 参数,那么 Global 对象被用作 thisObj。

解释一下,call方法的作用其实是更改默认方法的this指向。调用call方法的肯定是一个方法对象,当调用call,方法对象的this指向会变成call方法的第一个参数,就这么简单。

var p = new Person(); 

当调用构造函数Person时,可能是通过call来处理,使Person内的this指向了p,this.age = 1 就相当于p.age = 1,这样就张p添加了age这个属性。

希望本文所述对大家的javascript程序设计有所帮助。

Javascript 相关文章推荐
JS俄罗斯方块,包含完整的设计理念
Dec 11 Javascript
IE中jquery.form中ajax提交没反应解决方法分享
Sep 11 Javascript
js 上下左右键控制焦点(示例代码)
Dec 14 Javascript
jQuery.trim() 函数及trim()用法详解
Oct 26 Javascript
利用node.js爬取指定排名网站的JS引用库详解
Jul 25 Javascript
vue.js添加一些触摸事件以及安装fastclick的实例
Aug 28 Javascript
Node.js console控制台简单用法分析
Jan 04 Javascript
js中值引用和地址引用实例分析
Jun 21 Javascript
vue搜索页开发实例代码详解(热门搜索,历史搜索,淘宝接口演示)
Apr 11 Javascript
微信小程序的引导页实现代码
Jun 24 Javascript
element-ui中dialog弹窗关闭按钮失效的解决
Sep 22 Javascript
解决ant-design-vue中menu菜单无法默认展开的问题
Oct 31 Javascript
深入浅出理解javaScript原型链
May 09 #Javascript
js实现从右向左缓缓浮出网页浮动层广告的方法
May 09 #Javascript
JS动画效果打开、关闭层的实现方法
May 09 #Javascript
js实现顶部可折叠的菜单工具栏效果实例
May 09 #Javascript
JS实现带缓冲效果打开、关闭、移动一个层的方法
May 09 #Javascript
javascript实现淡蓝色的鼠标拖动选择框实例
May 09 #Javascript
javasript实现密码的隐藏与显示
May 08 #Javascript
You might like
杏林同学录(四)
2006/10/09 PHP
php md5下16位和32位的实现代码
2008/04/09 PHP
ThinkPHP查询返回简单字段数组的方法
2014/08/25 PHP
php中switch语句用法详解
2015/08/17 PHP
php bootstrap实现简单登录
2016/03/08 PHP
按下Enter焦点移至下一个控件的实现js代码
2013/12/11 Javascript
JavaScript实现为指定对象添加多个事件处理程序的方法
2015/04/17 Javascript
js本地图片预览实现代码
2016/10/09 Javascript
微信小程序 二维码canvas绘制实例详解
2017/01/06 Javascript
详解Angualr 组件间通信
2017/01/21 Javascript
微信小程序中用WebStorm使用LESS
2017/03/08 Javascript
jQuery实现的动态文字变化输出效果示例【附演示与demo源码下载】
2017/03/24 jQuery
vue+ElementUI实现订单页动态添加产品数据效果实例代码
2017/07/13 Javascript
对vue.js中this.$emit的深入理解
2018/02/23 Javascript
nodeJS进程管理器pm2的使用
2019/01/09 NodeJs
JS实现TITLE悬停长久显示效果完整示例
2020/02/11 Javascript
[02:26]2016国际邀请赛8月3日开战 中国军团出征西雅图
2016/08/02 DOTA
python进阶教程之词典、字典、dict
2014/08/29 Python
Python3遍历目录树实现方法
2015/05/22 Python
python对json的相关操作实例详解
2017/01/04 Python
Python3实现的Mysql数据库操作封装类
2018/06/06 Python
使用Python获取并处理IP的类型及格式方法
2018/11/01 Python
Python利用神经网络解决非线性回归问题实例详解
2019/07/19 Python
Python爬虫实现使用beautifulSoup4爬取名言网功能案例
2019/09/15 Python
python 监测内存和cpu的使用率实例
2019/11/28 Python
韩国爱茉莉太平洋化妆品美国站:Amore Pacific US
2016/10/28 全球购物
七一表彰活动方案
2014/01/18 职场文书
党员自我批评与反省材料
2014/02/10 职场文书
有创意的广告词
2014/03/18 职场文书
中秋节主持词
2014/04/02 职场文书
2014年教师个人工作总结
2014/11/10 职场文书
幼儿园中班个人总结
2015/02/28 职场文书
小区保洁员岗位职责
2015/04/10 职场文书
预备党员半年考察意见
2015/06/01 职场文书
PyTorch 如何设置随机数种子使结果可复现
2021/05/12 Python
总结一些Java常用的加密算法
2021/06/11 Java/Android