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 相关文章推荐
IE6/IE7中JavaScript json提示缺少标识符、字符串或数字问题处理
Dec 16 Javascript
浅谈JavaScript事件的属性列表
Mar 01 Javascript
jQuery给多个不同元素添加class样式的方法
Mar 26 Javascript
Node.js 异步编程之 Callback介绍(一)
Mar 30 Javascript
浅谈javascript的Array.prototype.slice.call
Aug 31 Javascript
jquery实现的Accordion折叠面板效果代码
Sep 02 Javascript
JS实现的N多简单无缝滚动代码(包含图文效果)
Nov 06 Javascript
实例讲解避免javascript冲突的方法
Jan 03 Javascript
JavaScript实现简单的树形菜单效果
Jun 23 Javascript
浅谈vue项目如何打包扔向服务器
May 08 Javascript
vue弹窗插件实战代码
Sep 08 Javascript
layer插件实现在弹出层中弹出一警告提示并关闭弹出层的方法
Sep 24 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
PHP函数utf8转gb2312编码
2006/12/21 PHP
php array_slice函数的使用以及参数详解
2008/08/30 PHP
PHP 网页过期时间的控制代码
2009/06/29 PHP
thinkphp视图模型查询提示ERR: 1146:Table 'db.pr_order_view' doesn't exist的解决方法
2014/10/30 PHP
PHP生成短网址方法汇总
2016/07/12 PHP
PHP调试及性能分析工具Xdebug详解
2017/02/09 PHP
jQuery live( type, fn ) 委派事件实现
2009/10/11 Javascript
判断用户是否在线的代码
2011/03/05 Javascript
页面调用单个swf文件,嵌套出多个方法。
2011/11/21 Javascript
js禁止页面使用右键(简单示例代码)
2013/11/13 Javascript
js拖动div 当鼠标移动时整个div也相应的移动
2013/11/21 Javascript
js控制href内容的连接内容的变化示例
2014/04/30 Javascript
JQuery自动触发事件的方法
2015/06/13 Javascript
JavaScript学习笔记之创建对象
2016/03/25 Javascript
Vue 表单控件绑定的实现示例
2017/08/11 Javascript
微信小程序6位或多位验证码密码输入框功能的实现代码
2018/05/29 Javascript
微信小程序制作表格的方法
2019/02/14 Javascript
基于python元祖与字典与集合的粗浅认识
2017/08/23 Python
python交互式图形编程实例(三)
2017/11/17 Python
Python3对称加密算法AES、DES3实例详解
2018/12/06 Python
Python OpenCV 使用滑动条来调整函数参数的方法
2019/07/08 Python
Python内置数据类型list各方法的性能测试过程解析
2020/01/07 Python
浅谈python 中的 type(), dtype(), astype()的区别
2020/04/09 Python
解决Opencv+Python cv2.imshow闪退问题
2020/04/24 Python
浅谈keras 模型用于预测时的注意事项
2020/06/27 Python
Python Pandas list列表数据列拆分成多行的方法实现
2020/12/14 Python
html如何对span设置宽度
2019/10/30 HTML / CSS
Fabletics官网:美国运动服饰品牌,由好莱坞女演员凯特·哈德森创立
2019/10/19 全球购物
C++程序员求职信
2014/05/07 职场文书
竞聘演讲稿精彩开头和结尾
2014/05/14 职场文书
小学师德师风演讲稿
2014/09/02 职场文书
民事诉讼代理授权委托书
2014/10/11 职场文书
干部四风问题整改措施思想汇报
2014/10/13 职场文书
工程催款通知书
2015/04/17 职场文书
运输公司工作总结
2015/08/11 职场文书
成本低的5个创业项目:投资小、赚钱快
2019/08/20 职场文书