深入浅出分析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实现的抽象CSS圆角效果!!
May 03 Javascript
Javascript模块化编程(一)AMD规范(规范使用模块)
Jan 17 Javascript
打印json对象的内容及JSON.stringify函数应用
Mar 29 Javascript
面向对象继承实例(a如何继承b问题)(自写)
Jul 01 Javascript
jquery给图片添加鼠标经过时的边框效果
Nov 12 Javascript
js实现分享到随页面滚动而滑动效果的方法
Apr 10 Javascript
js变形金刚文字特效代码分享
Aug 20 Javascript
浅析Ajax语法
Dec 05 Javascript
node.js利用socket.io实现多人在线匹配联机五子棋
May 31 Javascript
node.js使用net模块创建服务器和客户端示例【基于TCP协议】
Feb 14 Javascript
微信小程序webSocket的使用方法
Feb 20 Javascript
如何在JavaScript中使用localStorage详情
Feb 04 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编程网上资源导航
2006/10/09 PHP
PHP setcookie设置Cookie用法(及设置无效的问题)
2011/07/13 PHP
PHP实现服务器状态监控的方法
2014/12/09 PHP
php连接odbc数据源并保存与查询数据的方法
2014/12/24 PHP
php实现的RSS生成类实例
2015/04/23 PHP
多个iframe自动调整大小的问题
2006/09/18 Javascript
基于jquery1.4.2的仿flash超炫焦点图播放效果
2010/04/20 Javascript
JS定义回车事件(实现代码)
2013/07/08 Javascript
JS实现文件动态顺序载入的方法
2015/03/07 Javascript
JS图片等比例缩放方法完整示例
2016/08/03 Javascript
如何利用模板将HTML从JavaScript中抽离
2016/10/08 Javascript
js实现canvas图片与img图片的相互转换的示例
2017/08/31 Javascript
vue中使用vue-router切换页面时滚动条自动滚动到顶部的方法
2017/11/28 Javascript
Vue入门之animate过渡动画效果
2018/04/08 Javascript
微信小程序实现的动态设置导航栏标题功能示例
2019/01/31 Javascript
基于Node.js的大文件分片上传示例
2019/06/19 Javascript
JavaScript Array对象使用方法解析
2019/09/24 Javascript
代码块高亮可复制显示js插件highlight.js+clipboard.js整合
2021/02/15 Javascript
Python中的defaultdict模块和namedtuple模块的简单入门指南
2015/04/01 Python
Python list操作用法总结
2015/11/10 Python
Python实现Linux的find命令实例分享
2017/06/04 Python
一篇文章了解Python中常见的序列化操作
2019/06/20 Python
在Django admin中编辑ManyToManyField的实现方法
2019/08/09 Python
django fernet fields字段加密实践详解
2019/08/12 Python
python类的实例化问题解决
2019/08/31 Python
解决Keras使用GPU资源耗尽的问题
2020/06/22 Python
使用BeautifulSoup4解析XML的方法小结
2020/12/07 Python
python爬虫scrapy框架的梨视频案例解析
2021/02/20 Python
HTML5打开手机扫码功能及优缺点
2017/11/27 HTML / CSS
幼儿园保教管理制度
2014/02/03 职场文书
2014年圣诞节促销方案
2014/03/14 职场文书
民生工作实施方案
2014/05/31 职场文书
重阳节慰问信
2015/02/15 职场文书
详解Go语言运用广度优先搜索走迷宫
2021/06/23 Python
golang 语言中错误处理机制
2021/08/30 Golang
idea下配置tomcat避坑详解
2022/04/12 Servers