深入浅出分析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 相关文章推荐
JavaScript返回当前会话cookie全部键值对照的方法
Apr 03 Javascript
Vuejs第七篇之Vuejs过渡动画案例全面解析
Sep 05 Javascript
jQuery动态改变多行文本框高度的方法
Sep 07 Javascript
AngularJS实现用户登录状态判断的方法(Model添加拦截过滤器,路由增加限制)
Dec 12 Javascript
laydate.js日期时间选择插件
Jan 04 Javascript
webpack教程之webpack.config.js配置文件
Jul 05 Javascript
VueJs使用Amaze ui调整列表和内容页面
Nov 30 Javascript
Angular刷新当前页面的实现方法
Nov 21 Javascript
微信小程序使用蓝牙小插件
Sep 23 Javascript
Vue插槽_特殊特性slot,slot-scope与指令v-slot说明
Sep 04 Javascript
vue 全局封装loading加载教程(全局监听)
Nov 05 Javascript
微信小程序APP的事件绑定以及传递参数时的冒泡和捕获
Apr 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
对淘宝URL中ID提取的PHP代码
2013/09/01 PHP
curl不使用文件存取cookie php使用curl获取cookie示例
2014/01/26 PHP
php计算两个日期相差天数的方法
2015/03/14 PHP
Yii框架小部件(Widgets)用法实例详解
2020/05/15 PHP
Avengerls vs Newbee BO3 第三场2.18
2021/03/10 DOTA
Prototype使用指南之enumerable.js
2007/01/10 Javascript
javascript 在firebug调试时用console.log的方法
2012/05/10 Javascript
jQuery Tools tab使用介绍
2012/07/14 Javascript
Javascript基础教程之比较操作符
2015/01/18 Javascript
JS+CSS实现Li列表隔行换色效果的方法
2015/02/16 Javascript
JavaScript面向对象之私有静态变量实例分析
2016/01/14 Javascript
jQuery插件uploadify实现ajax效果的图片上传
2016/06/18 Javascript
Vue学习之路之登录注册实例代码
2017/07/06 Javascript
详解nuxt 微信公众号支付遇到的问题与解决
2019/08/26 Javascript
[01:30:55]VG vs Mineski Supermajor 败者组 BO3 第三场 6.6
2018/06/07 DOTA
Python创建文件和追加文件内容实例
2014/10/21 Python
遍历python字典几种方法总结(推荐)
2016/09/11 Python
批量将ppt转换为pdf的Python代码 只要27行!
2018/02/26 Python
python批量实现Word文件转换为PDF文件
2018/03/15 Python
利用Python+阿里云实现DDNS动态域名解析的方法
2019/04/01 Python
Python读取stdin方法实例
2019/05/24 Python
Python通用函数实现数组计算的方法
2019/06/13 Python
python异步实现定时任务和周期任务的方法
2019/06/29 Python
python批量修改ssh密码的实现
2019/08/08 Python
python利用dlib获取人脸的68个landmark
2019/11/27 Python
详解从Django Allauth中进行登录改造小结
2019/12/18 Python
python3实现在二叉树中找出和为某一值的所有路径(推荐)
2019/12/26 Python
Python3.x+迅雷x 自动下载高分电影的实现方法
2020/01/12 Python
使用CSS3配合IE滤镜实现渐变和投影的效果
2015/09/06 HTML / CSS
结合CSS3的布局新特征谈谈常见布局方法
2016/01/22 HTML / CSS
工程造价自荐信
2013/10/09 职场文书
《草虫的村落》教学反思
2014/02/16 职场文书
军训口号
2014/06/13 职场文书
MySQL 如何分析查询性能
2021/05/12 MySQL
Mysql存储过程、触发器、事件调度器使用入门指南
2022/01/22 MySQL
Python 居然可以在 Excel 中画画你知道吗
2022/02/15 Python