深入浅出分析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每次Title显示不同的名言
Sep 25 Javascript
Jquery index()方法 获取相应元素索引值
Oct 12 Javascript
javascript中简单的进制转换代码实例
Oct 26 Javascript
jQuery Migrate 1.1.0 Released 注意事项
Jun 14 Javascript
Js控制滑轮左右滑动实例
Feb 13 Javascript
详解iframe与frame的区别
Jan 13 Javascript
Angular2.js实现表单验证详解
Jun 23 Javascript
vue中引用阿里字体图标的方法
Feb 10 Javascript
iview table高度动态设置方法
Mar 14 Javascript
JavaScript中toLocaleString()和toString()的区别实例分析
Aug 14 Javascript
通过JS运行机制的角度说说作用域
Mar 12 Javascript
js+canvas实现刮刮奖功能
Sep 13 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 getimagesize 上传图片的长度和宽度检测代码
2010/05/15 PHP
PHP命名空间(Namespace)简明教程
2014/06/11 PHP
Symfony数据校验方法实例分析
2015/01/26 PHP
用PHP写的一个冒泡排序法的函数简单实例
2016/05/26 PHP
解决php用mysql方式连接数据库出现Deprecated报错问题
2019/12/25 PHP
jQuery获取css z-index在各种浏览器中的返回值
2010/09/15 Javascript
《JavaScript高级程序设计》阅读笔记(一) ECMAScript基础
2012/02/27 Javascript
JS实现遮罩层效果的简单实例
2013/11/12 Javascript
jquery获取radio值实例
2014/10/16 Javascript
javascript中数组的定义及使用实例
2015/01/21 Javascript
jquery实现简单的轮换出现效果实例
2015/07/23 Javascript
纯jquery实现模仿淘宝购物车结算
2015/08/20 Javascript
jquery+php实现滚动的数字特效
2015/11/29 Javascript
利用jQuery插件imgAreaSelect实现图片上传裁剪(放大缩小)
2016/12/02 Javascript
微信小程序 navbar实例详解
2017/05/11 Javascript
基于node.js之调试器详解
2017/08/22 Javascript
纯html+css+javascript实现楼层跳跃式的页面布局(实例代码)
2017/10/25 Javascript
vue父组件异步获取数据传给子组件的方法
2018/07/26 Javascript
Vue实现返回顶部按钮实例代码
2020/10/21 Javascript
Python实现的拟合二元一次函数功能示例【基于scipy模块】
2018/05/15 Python
Python打印特殊符号及对应编码解析
2020/05/07 Python
Pytorch框架实现mnist手写库识别(与tensorflow对比)
2020/07/20 Python
python如何运行js语句
2020/09/09 Python
Giglio俄罗斯奢侈品购物网:男士、女士、儿童高级时装
2018/07/27 全球购物
Gibson London官网:以地道的英国男装而著称
2019/12/06 全球购物
俄罗斯香水和化妆品在线商店:Aroma-butik
2020/02/28 全球购物
Android面试题及答案
2015/09/04 面试题
网络工程师职业规划
2014/02/10 职场文书
岗位聘任书范文
2014/03/29 职场文书
怎样拟定创业计划书
2014/05/01 职场文书
材料成型及控制工程专业求职信
2014/06/19 职场文书
缓刑人员思想汇报
2014/10/11 职场文书
少年雷锋观后感
2015/06/10 职场文书
python实现三阶魔方还原的示例代码
2021/04/28 Python
源码解读Spring-Integration执行过程
2021/06/11 Java/Android