深入浅出分析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 相关文章推荐
Jquery动态添加及删除页面节点元素示例代码
Jun 16 Javascript
jquery用ajax方式从后台获取json数据后如何将内容填充到下拉列表
Aug 26 Javascript
javascript 四十条常用技巧大全
Sep 09 Javascript
JavaScript和jQuery获取input框的绝对位置实现方法
Oct 13 Javascript
基于JavaScript实现屏幕滚动效果
Jan 18 Javascript
js实现下拉框效果(select)
Mar 28 Javascript
关于在vue-cli中使用微信自动登录和分享的实例
Jun 22 Javascript
Bootstrap弹出框之自定义悬停框标题、内容和样式示例代码
Jul 11 Javascript
Vue cli3 库模式搭建组件库并发布到 npm的流程
Oct 12 Javascript
ES6 Map结构的应用实例分析
Jun 26 Javascript
微信小程序实现点击生成随机验证码
Sep 09 Javascript
JS实现简易图片自动轮播
Oct 16 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怎样调用MSSQL的存储过程
2006/10/09 PHP
使用淘宝IP库获取用户ip地理位置
2013/10/27 PHP
学习php设计模式 php实现状态模式
2015/12/07 PHP
laravel5创建service provider和facade的方法详解
2016/07/26 PHP
PHP数据库编程之MySQL优化策略概述
2017/08/16 PHP
laravel添加前台跳转成功页面示例
2019/10/22 PHP
JS/jQuery实现默认显示部分文字点击按钮显示全部内容
2013/05/13 Javascript
jQuery Validate表单验证深入学习
2015/12/18 Javascript
jQuery中bind(),live(),delegate(),on()绑定事件方法实例详解
2016/01/19 Javascript
AngularJS深入探讨scope,继承结构,事件系统和生命周期
2016/11/02 Javascript
AngularJS的依赖注入实例分析(使用module和injector)
2017/01/19 Javascript
mui上拉加载功能实例详解
2017/04/13 Javascript
nodeJS实现路由功能实例代码
2017/06/08 NodeJs
使用Webpack提高Vue.js应用的方式汇总(四种)
2017/07/10 Javascript
nodejs构建本地web测试服务器 如何解决访问静态资源问题
2017/07/14 NodeJs
jQuery实现简单的计时器功能实例分析
2017/08/29 jQuery
快速搭建React的环境步骤详解
2017/11/06 Javascript
vue webpack重写cookie路径的方法
2019/07/10 Javascript
JavaScript onclick事件使用方法详解
2020/05/15 Javascript
Python去除列表中重复元素的方法
2015/03/20 Python
在Mac OS系统上安装Python的Pillow库的教程
2015/11/20 Python
Pandas 合并多个Dataframe(merge,concat)的方法
2018/06/08 Python
有关Python的22个编程技巧
2018/08/29 Python
浅析Python四种数据类型
2018/09/26 Python
pycharm: 恢复(reset) 误删文件的方法
2018/10/22 Python
Python面向对象程序设计类变量与成员变量、类方法与成员方法用法分析
2019/04/12 Python
tensorflow 变长序列存储实例
2020/01/20 Python
Python selenium如何打包静态网页并下载
2020/08/12 Python
使用HTML5捕捉音频与视频信息概述及实例
2018/08/22 HTML / CSS
美国宠物美容和宠物用品购物网站:Cherrybrook
2018/12/07 全球购物
大学生毕业自我鉴定范文
2013/11/03 职场文书
2015年机关后勤工作总结
2015/05/26 职场文书
python实现自动化群控的步骤
2021/04/11 Python
教你如何让spark sql写mysql的时候支持update操作
2022/02/15 MySQL
Python的property属性详细讲解
2022/04/11 Python
oracle delete误删除表数据后如何恢复
2022/06/28 Oracle