深入浅出分析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 相关文章推荐
Extjs的FileUploadField文件上传出现了两个上传按钮
Apr 29 Javascript
javascript实现瀑布流加载图片原理
Feb 02 Javascript
微信小程序 教程之注册程序
Oct 17 Javascript
微信小程序(应用号)开发新闻客户端实例
Oct 24 Javascript
js事件源window.event.srcElement兼容性写法(详解)
Nov 25 Javascript
正则表达式,替换所有HTML标签的简单实例
Nov 28 Javascript
bootstrap警告框使用方法解析
Jan 13 Javascript
Vue封装Swiper实现图片轮播效果
Feb 06 Javascript
了解ESlint和其相关操作小结
May 21 Javascript
extjs4图表绘制之折线图实现方法分析
Mar 06 Javascript
nuxt 服务器渲染动态设置 title和seo关键字的操作
Nov 05 Javascript
JavaScript构造函数原理及实现流程解析
Nov 19 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
PHP 中 Orientation 属性判断上传图片是否需要旋转
2015/10/16 PHP
php使用高斯算法实现图片的模糊处理功能示例
2016/11/11 PHP
一步一步制作jquery插件Tabs实现过程
2010/07/06 Javascript
JQuery 获取json数据$.getJSON方法的实例代码
2013/08/02 Javascript
利用jquery包将字符串生成二维码图片
2013/09/12 Javascript
js中hash和ico的关联分析
2015/02/05 Javascript
AngularJS基础 ng-srcset 指令简单示例
2016/08/03 Javascript
利用Node.JS实现邮件发送功能
2016/10/21 Javascript
Vue.js鼠标悬浮更换图片功能
2017/05/17 Javascript
用vue构建多页面应用的示例代码
2017/09/20 Javascript
vue addRoutes实现动态权限路由菜单的示例
2018/05/15 Javascript
js计算两个时间差 天 时 分 秒 毫秒的代码
2019/05/21 Javascript
js笔试题-接收get请求参数
2019/06/15 Javascript
详解JS预解析原理
2020/06/16 Javascript
JavaScript日期库date-fn.js使用方法解析
2020/09/09 Javascript
[47:35]VP vs Pain 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/20 DOTA
Python递归遍历列表及输出的实现方法
2015/05/19 Python
Python修改MP3文件的方法
2015/06/15 Python
python实现图像识别功能
2018/01/29 Python
Django REST framework内置路由用法
2019/07/26 Python
Python 利用高德地图api实现经纬度与地址的批量转换
2019/08/14 Python
解决Python使用列表副本的问题
2019/12/19 Python
浅谈TensorFlow之稀疏张量表示
2020/06/30 Python
python程序如何进行保存
2020/07/03 Python
记一次Django响应超慢的解决过程
2020/09/17 Python
python 检测图片是否有马赛克
2020/12/01 Python
教你一分钟在win10终端成功安装Pytorch的方法步骤
2021/01/28 Python
一些常用的HTML5模式(pattern) 总结
2015/07/14 HTML / CSS
Raffaello Network西班牙:意大利拉斐尔时尚购物网
2019/03/12 全球购物
加拿大户外探险购物网站:SAIL
2020/06/27 全球购物
保证书格式范文
2014/04/28 职场文书
机关搬迁方案
2014/05/18 职场文书
2014年留守儿童工作总结
2014/12/10 职场文书
幼儿教师辞职信
2015/02/27 职场文书
2019公司管理制度
2019/04/19 职场文书
创业计划之特色精品店
2019/08/12 职场文书