深入浅出分析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.Jwin.js 基于jquery的弹出层插件代码
May 23 Javascript
使用JSLint提高JS代码质量方法分享
Dec 16 Javascript
解决bootstrap导航栏navbar在IE8上存在缺陷的方法
Jul 01 Javascript
Angular.Js中过滤器filter与自定义过滤器filter实例详解
May 08 Javascript
ES6学习笔记之map、set与数组、对象的对比
Mar 01 Javascript
Node.js 利用cheerio制作简单的网页爬虫示例
Mar 01 Javascript
vue地区选择组件教程详解
May 04 Javascript
在Vue组件中获取全局的点击事件方法
Sep 06 Javascript
微信小程序实现搜索指定景点周边美食、酒店
May 18 Javascript
JavaScript实现烟花绽放动画效果
Aug 04 Javascript
JavaScript实现商品评价五星好评
Nov 30 Javascript
vue 基于abstract 路由模式 实现页面内嵌的示例代码
Dec 14 Vue.js
深入浅出理解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
Classes and Objects in PHP5-面向对象编程 [1]
2006/10/09 PHP
php adodb连接不同数据库
2009/03/19 PHP
PHP求小于1000的所有水仙花数的代码
2012/01/10 PHP
PHP采集类Snoopy抓取图片实例
2014/06/19 PHP
php实现简单的语法高亮函数实例分析
2015/04/27 PHP
PHP实现登陆表单提交CSRF及验证码
2017/01/24 PHP
Javascript miscellanea -display data real time, using window.status
2007/01/09 Javascript
JavaScript DOM 学习第二章 编辑文本
2010/02/19 Javascript
js的逻辑运算符 ||
2010/05/31 Javascript
关于setInterval、setTimeout在jQuery中的使用注意事项
2011/09/28 Javascript
jquery实现将获取的颜色值转换为十六进制形式的方法
2014/12/20 Javascript
javascript的变量、传值、传址、参数之间关系
2015/07/26 Javascript
理解javascript定时器中的setTimeout与setInterval
2016/02/23 Javascript
JavaScript判断变量是否为数组的方法(Array)
2016/02/24 Javascript
为什么JavaScript没有块级作用域
2016/05/22 Javascript
简单理解vue中el、template、replace元素
2016/10/27 Javascript
Angular.Js的自动化测试详解
2016/12/09 Javascript
vue子组件使用自定义事件向父组件传递数据
2017/05/27 Javascript
vue mint-ui学习笔记之picker的使用
2017/10/11 Javascript
npm配置国内镜像资源+淘宝镜像的方法
2018/09/07 Javascript
jQuery实现条件搜索查询、实时取值及升降序排序的方法分析
2019/05/04 jQuery
JavaScript如何判断对象有某属性
2020/07/03 Javascript
Ant design vue中的联动选择取消操作
2020/10/31 Javascript
Vue中使用Echarts仪表盘展示实时数据的实现
2020/11/01 Javascript
python类:class创建、数据方法属性及访问控制详解
2016/07/25 Python
Python应用03 使用PyQT制作视频播放器实例
2016/12/07 Python
Python批量查询域名是否被注册过
2017/06/21 Python
Python3实现带附件的定时发送邮件功能
2020/12/22 Python
如何利用python检测图片是否包含二维码
2020/10/15 Python
python 还原梯度下降算法实现一维线性回归
2020/10/22 Python
华为慧通笔试题
2016/04/22 面试题
如何写一个Java类既可以用作applet也可以用作java应用
2016/01/18 面试题
大学自主招生自荐信范文
2014/02/26 职场文书
亲属关系公证书样本
2015/01/23 职场文书
爱护环境建议书
2015/09/14 职场文书
vue本地构建热更新卡顿的问题“75 advanced module optimization”完美解决方案
2022/08/05 Vue.js