JavaScript中this的用法及this在不同应用场景的作用解析


Posted in Javascript onApril 13, 2017

由于其运行期绑定的特性,JavaScript 中的 this 含义要丰富得多,它可以是全局对象、当前对象或者任意对象,这完全取决于函数的调用方式。

JavaScript 中函数的调用有以下几种方式:作为函数调用,作为对象方法调用,作为构造函数调用,和使用 apply 或 call 调用。下面我们将按照调用方式的不同,分别讨论 this 的含义。

情况一:纯粹的函数调用

这是函数的最通常用法,属于全局性调用,因此this就代表全局对象Global。

1、函数也可以直接被调用,此时 this 绑定到全局对象。

function makeNoSense(x) { 
  this.x = x; 
} 
makeNoSense(5); 
console.log(x);// x 已经成为一个值为 5 的全局变量
function test(){
this.x = 1;

alert(this.x);
}
test(); // 1

情况二:作为对象方法的调用

函数还可以作为某个对象的方法调用,这时this指代对象内部属性被调用。

var myObject = {
value :0,

increment:function (inc){


this.value += typeof inc ==='number' ? inc:1;

}
};
myObject.increment();
console.log(myObject.value); //1
myObject.increment(2);
console.log(myObject.value); //3

情况三 :作为构造函数调用

javaScript 支持面向对象式编程,与主流的面向对象式编程语言不同,JavaScript 并没有类(class)的概念,而是使用基于原型(prototype)的继承方式。

相应的,JavaScript 中的构造函数也很特殊,如果不使用 new 调用,则和普通函数一样。作为又一项约定俗成的准则,构造函数以大写字母开头,提醒调用者使用正确的方式调用。如果调用正确,this 绑定到新创建的对象上。

所谓构造函数,就是通过这个函数生成一个新对象(object)。这时,this就指这个新对象。

function Point(x, y){ 
  this.x = x; 
  this.y = y; 
 }
var p1 = new Point(3,2);
console.log(p1.x+","+p1.y);//3,2

为了表明这时this不是全局对象,我对代码做一些改变:

var x = 4;
function Point(x, y){ 
  this.x = x; 
  this.y = y; 
 }
var p1 = new Point(3,2);
console.log(p1.x+","+p1.y);//3,2

情况四: apply或call调用

让我们再一次重申,在 JavaScript 中函数也是对象,对象则有方法,apply 和 call 就是函数对象的方法。这两个方法异常强大,他们允许切换函数执行的上下文环境(context),即 this 绑定的对象。很多 JavaScript 中的技巧以及类库都用到了该方法。让我们看一个具体的例子:

function Point(x, y){ 
  this.x = x; 
  this.y = y; 
  this.moveTo = function(x, y){ 
    this.x = x; 
    this.y = y; 
    console.log(this.x+","+this.y);
  } 
} 
var p1 = new Point(0, 0); 
var p2 = {x: 0, y: 0}; 
p1.moveTo(1, 1); //1,1
p1.moveTo.apply(p2, [10, 10]);//10,10

在上面的例子中,我们使用构造函数生成了一个对象 p1,该对象同时具有 moveTo 方法;使用对象字面量创建了另一个对象 p2,我们看到使用 apply 可以将 p1 的方法应用到 p2 上,这时候 this 也被绑定到对象 p2 上。另一个方法 call 也具备同样功能,不同的是最后的参数不是作为一个数组统一传入,而是分开传入的。本文通过对JavaScript中经常容易混淆的this在四中应用场景中的使用方法进行了讲解,希望对您有所帮助,喜欢的话,请推荐一下哦。

以上所述是小编给大家介绍的JavaScript中this的用法及this在不同应用场景的作用解析,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
js,jQuery 排序的实现代码,网页标签排序的实现,标签排序
Apr 27 Javascript
JavaScript中的细节分析
Jun 30 Javascript
js/jquery去掉空格,回车,换行示例代码
Nov 05 Javascript
js 数组操作之pop,push,unshift,splice,shift
Jan 29 Javascript
JQuery弹出层示例可自定义
May 19 Javascript
js使用Array.prototype.sort()对数组对象排序的方法
Jan 28 Javascript
Jquery中使用show()与hide()方法动画显示和隐藏图片
Oct 08 Javascript
javascript实现查找数组中最大值方法汇总
Feb 13 Javascript
Bootstrap carousel轮转图的使用实例详解
May 17 Javascript
JavaScript插件Tab选项卡效果
Nov 14 Javascript
JQuery Ajax如何实现注册检测用户名
Sep 25 jQuery
详解JVM系列之内存模型
Jun 10 Javascript
vue如何引用其他组件(css和js)
Apr 13 #Javascript
JavaScript数据结构之二叉树的遍历算法示例
Apr 13 #Javascript
为Jquery EasyUI 组件加上清除功能的方法(详解)
Apr 13 #jQuery
vue组件如何被其他项目引用
Apr 13 #Javascript
微信小程序开发之数据存储 参数传递 数据缓存
Apr 13 #Javascript
为JQuery EasyUI 表单组件增加焦点切换功能的方法
Apr 13 #jQuery
老生常谈javascript中逻辑运算符&&和||的返回值问题
Apr 13 #Javascript
You might like
rrmdir php中递归删除目录及目录下的文件
2011/05/15 PHP
PHP处理大量表单字段的便捷方法
2015/02/07 PHP
PHP 生成微信红包代码简单
2016/03/25 PHP
3种方法轻松处理php开发中emoji表情的问题
2016/07/18 PHP
PHP判断用户是否已经登录(跳转到不同页面或者执行不同动作)
2016/09/22 PHP
PHP长连接实现与使用方法详解
2018/02/11 PHP
关于Curl在Swoole协程中的解决方案详析
2019/09/12 PHP
下载站控制介绍字数显示的脚本 显示全部 隐藏介绍等功能
2009/09/19 Javascript
jQuery LigerUI 使用教程入门篇
2012/01/18 Javascript
JS 页面计时器示例代码
2013/10/28 Javascript
php基于redis处理session的方法
2016/03/14 Javascript
Ubuntu系统下Angularjs开发环境安装
2016/09/01 Javascript
在 Vue 项目中引入 tinymce 富文本编辑器的完整代码
2018/05/04 Javascript
原生JS+HTML5实现的可调节写字板功能示例
2018/08/30 Javascript
swiper Scrollbar滚动条组件详解
2019/09/08 Javascript
javascript canvas检测小球碰撞
2020/04/17 Javascript
python根据距离和时长计算配速示例
2014/02/16 Python
Python二分查找详解
2015/09/13 Python
Python的Tornado框架的异步任务与AsyncHTTPClient
2016/06/27 Python
Python正则表达式完全指南
2017/05/25 Python
Python类的继承和多态代码详解
2017/12/27 Python
pandas通过索引进行排序的示例
2018/11/16 Python
浅谈Pandas Series 和 Numpy array中的相同点
2019/06/28 Python
python如何安装下载后的模块
2020/07/03 Python
2020版Python学习路线图(附学习资料)
2020/09/15 Python
CSS3动画animation实现云彩向左滚动
2014/05/09 HTML / CSS
日本著名的平价时尚女性购物网站:Fifth
2016/08/24 全球购物
公司领导推荐信
2013/11/12 职场文书
大学自我鉴定范文
2013/12/26 职场文书
大学生的自我鉴定范文
2014/01/21 职场文书
烹饪自我鉴定
2014/03/01 职场文书
岗位廉政承诺书
2014/03/27 职场文书
财务部岗位职责范本
2015/04/14 职场文书
货款欠条范本
2015/07/03 职场文书
Django如何与Ajax交互
2021/04/29 Python
javascript进阶篇深拷贝实现的四种方式
2022/07/07 Javascript