深入解析Javascript中面向对象编程中的this关键字

在Javascript中this关键字代表函数运行时,自动生成的一个内部对象,只能在函数内部使用。比如:

function TestFunction(){this.demoVal='This is  a demo variable';
};

View Code

随着函数使用的场合不同,this的值会发生改变。但是有一个总的原则:this指的是调用函数的那个对象。

接下来分情况讨论this关键字的使用:

1. 纯粹的函数调用(这是函数的通常用法,属于全局性调用),this代表全局性对象Global.Demo程序如下:

function TestFunction(){this.demoVal='This is a demo variable';alert(this.demoVal);
};TestFunction();        //This is a demo variable

View Code

接下来证明此时的this代表全局对象,Demo程序如下:

var globalVal='This is a demo global variable';function TestFunction(){alert(this.globalVal);
};TestFunction();        //This is a demo global variable

View Code

2. 作为对象的方法调用(这时this指向上一级对象),Demo程序如下:

function TestFunction(){alert(this.demoVal);
};var obj={};
obj.CallFunction=TestFunction;
obj.demoVal='This is a object variable';obj.CallFunction();        //This is a object variable

View Code

3. 作为构造函数调用,所谓的构造函数就是通过这个函数生成一个新的Object对象。此时,this就是指向这个新对象。Demo程序如下:

function TestFunction(){this.deomVal='This is a demo variable';
};var obj=new TestFunction();alert(obj.deomVal);        //This is a demo variable

View Code

接下来的代码证明this不是指向全局对象:

var demoVal='This is a global variable';function TestFunction(){this.demoVal='This is a local variable';
};var obj=new TestFunction();alert(demoVal);        //This is a global variable

View Code

以上代码显示demoVal值根本没有改变,因此证明this不是指向全局的对象。

4. 使用apply调用,apply函数可以改变函数的执行上下文,apply是函数对象的一个方法,它的作用是改变函数的调用对象,即函数的执行上下文。它的第一个参数表示改变后调用这个函数的对象, 因此,this指向的是第一个参数,Demo实例如下:

var demoVal='This is a demo variable';function TestFunction(){alert(this.demoVal);
};var obj={};
obj.demoVal='This is an object demo variable';
obj.TestFunction=TestFunction;obj.TestFunction.apply();    //This is a demo variable

View Code

apply()的参数为空时,默认调用全局对象。因此,这时的运行结果为:'This is a demo variable',证明this指的是全局对象。

如果将以上代码的最后一行改为:obj.TestFunction.apply(obj),则输出的结果为:'This is an object demo variable'。证明此时的this指向obj。

转载于:https://www.cnblogs.com/chengbing2011/p/4226285.html

深入解析Javascript中this关键字的使用相关推荐

  1. php中this的使用技巧,JavaScript中this关键字使用方法详解

    JavaScript中this关键字使用方法详解 在面向对象编程语言中,对于this关键字我们是非常熟悉的.比如C++.C#和Java等都提供了这个关键字,虽然在开始学习的时候觉得比较难,但只要理解了 ...

  2. 解析JavaScript中的字符串类型与字符编码支持

    JavaScript中的字符串也像Python那样支持反斜杠的转移,并且字符集方面默认为Unicode,下面就来详细解析JavaScript中的字符串类型与字符编码支持 定义 字符串就是零个或多个排在 ...

  3. JavaScript中this关键字的使用比较

    JavaScript中this关键字的使用比较 this关键字在JavaScript中,用的不能说比较多,而是非常多.那么熟悉this关键字的各种用法则显得非常关键. this有时候就是我们经常说的上 ...

  4. JavaScript中this关键字使用方法详解

    在面向对象编程语言中,对于this关键字我们是非常熟悉的.比如C++.C#和Java等都提供了这个关键字,虽然在开始学习的时候觉得比较难,但只要理解了,用起来是非常方便和意义确定的.JavaScrip ...

  5. Javascript中的关键字和保留字

    ECMA-262 描述了一组具有特定用途的关键字.这些关键字可用于表示控制语句的开始或结束,或者用于执行特定操作等.按照规则,关键字也是语言保留的,不能用作标识符.以下就是ECMAScript的全部关 ...

  6. datagridview 当前上下文中不存在bind_全面解析JavaScript中this指向问题

    this指向 参考文章: * this JavaScript中this指向分为以下几种情况: 普通函数或作为对象属性 事件绑定 构造函数 箭头函数 call/apply/bind指定 下面我们来进行一 ...

  7. JavaScript中var关键字的使用详解

    作用声明作用:如声明个变量. 语法 ? 1 var c = 1; 省略var在javascript中,若省略var关键字而直接赋值,那么这个变量为全局变量,哪怕是在function里定义的. ? 1 ...

  8. 详细解析JavaScript中的继承(包括组合继承和寄生式继承)

    继承:相信很多学习过Java等面向对象语言的同学,都会接触过继承,它们实现继承的主要方式是接口继承和实现继承.但由于JavaScript函数没有签名,所以无法实现接口继承.ECMAScript支持实现 ...

  9. 针对还没搞懂javascript中this关键字的同学

    本篇文章主要针对搞不清this指向的的同学们!不定期更新文章都是我学习过程中积累下的经验,还请大家多多关注我的文章以帮助更多的同学,不对的地方还望留言支持改进! 首先,必须搞清楚在JS里面,函数的几种 ...

最新文章

  1. non-member function cannot have cv-qualifier
  2. 微软新冠: 数据分析网站 COVID Insights
  3. 几个常见的网络故障分析
  4. linux怎么用两个进程传值,linux下的C开发14,可执行程序如何传递参数?模拟shell执行命令...
  5. 软考-信息系统项目管理师-组织级项目管理
  6. 洛谷P4413 R2
  7. web farm 讨论引出
  8. div/span强制不换行
  9. Redis学习笔记--Redis数据过期策略详解==转
  10. Flask笔记-使用flask-sqlacodegen自动生成model
  11. 浏览器测试基本跑分网站
  12. Ubuntu14.04 indigo ROS的一些使用指令
  13. 【软件项目管理】知识点整理
  14. vue项目中出现cannot get/的解决办法
  15. js 浅拷贝(浅复制、浅克隆)、深拷贝(深复制、深克隆)
  16. 语文学科html代码,语文教育专业介绍 [代码660201]
  17. Ubuntu 使用上的一些小tip
  18. acc 蓝牙_蓝牙音频传输格式:ACC,SBC,APTX和LDAC
  19. sqlserver排序规则介绍以及修改
  20. Java编程笔记2:初始化和清理

热门文章

  1. 关于kali相关的参考文章
  2. Wix 安装部署教程(十四) -- 多语言安装包之用户许可协议
  3. SQL server 数据库——T-SQL语句基础
  4. 业务逻辑实现方式选择
  5. HDU2602-Bone Collector
  6. 基于Chrome开源提取的界面开发框架 三
  7. RebornDB:下一代分布式Key-Value数据库
  8. 简单理解Ext.DomQuery操作CSS3选择器
  9. 地图与定位之大头针视图
  10. Linux对外连接端口数限制