深入浅出分析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 相关文章推荐
仅IE6/7/8中innerHTML返回值忽略英文空格的问题
Apr 07 Javascript
调用DOM对象的focus使文本框获得焦点
Feb 19 Javascript
关于JS数组追加数组采用push.apply的问题
Jun 09 Javascript
laytpl 精致巧妙的JavaScript模板引擎
Aug 29 Javascript
jQuery在页面加载时动态修改图片尺寸的方法
Mar 20 Javascript
简述JavaScript中正则表达式的使用方法
Jun 15 Javascript
JS实现中文汉字按拼音排序的方法
Oct 09 Javascript
vue解决使用webpack打包后keep-alive不生效的方法
Sep 01 Javascript
在Vue-cli里应用Vuex的state和mutations方法
Sep 16 Javascript
微信小程序左滑删除功能开发案例详解
Nov 12 Javascript
Vue中key的作用示例代码详解
Jun 10 Javascript
antd配置config-overrides.js文件的操作
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
php实现监听事件
2013/11/06 PHP
自己的js工具 Cookie 封装
2009/08/21 Javascript
JQuery 学习笔记01 JQuery初接触
2010/05/06 Javascript
JavaScript全排列的六种算法 具体实现
2013/06/29 Javascript
深入理解JavaScript是如何实现继承的
2013/12/12 Javascript
JavaScript编程的10个实用小技巧
2014/04/18 Javascript
jQuery DOM插入节点操作指南
2015/03/03 Javascript
使用js实现的简单拖拽效果
2015/03/18 Javascript
JavaScript中的slice()方法使用详解
2015/06/06 Javascript
jQuery插件datepicker 日期连续选择
2015/06/12 Javascript
Javascript的表单验证-提交表单
2016/03/18 Javascript
jQuery通过ajax快速批量提交表单数据
2016/10/25 Javascript
ES6入门教程之let和const命令详解
2017/05/17 Javascript
vue使用技巧及vue项目中遇到的问题
2018/06/04 Javascript
小程序实现自定义导航栏适配完美版
2019/04/02 Javascript
Vue数据绑定简析小结
2019/05/07 Javascript
微信小程序云开发详细教程
2019/05/16 Javascript
Vue切换div显示隐藏,多选,单选代码解析
2020/07/14 Javascript
在Python中使用Mako模版库的简单教程
2015/04/08 Python
python 读写、创建 文件的方法(必看)
2016/09/12 Python
Python 多核并行计算的示例代码
2017/11/07 Python
Django-Rest-Framework 权限管理源码浅析(小结)
2018/11/12 Python
python使用zip将list转为json的方法
2018/12/31 Python
python  logging日志打印过程解析
2019/10/22 Python
Pycharm2020最新激活码|永久激活(附最新激活码和插件的详细教程)
2020/09/29 Python
互斥锁解决 Python 中多线程共享全局变量的问题(推荐)
2020/09/28 Python
Monnier Frères美国官网:法国知名奢侈品网站
2016/11/22 全球购物
英国女性时尚鞋类的潮流制造者:Koi Footwear
2018/10/19 全球购物
会计师事务所审计实习自我鉴定
2013/09/20 职场文书
人事助理岗位职责
2013/11/18 职场文书
青年文明号创建承诺
2014/03/31 职场文书
国际会计专业求职信
2014/08/04 职场文书
入股合作协议书
2014/10/12 职场文书
上班迟到检讨书300字
2014/10/18 职场文书
拖欠货款起诉状
2015/05/20 职场文书
辞职信怎么写?你都知道吗?
2019/06/24 职场文书