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 相关文章推荐
JavaScript DOM 学习第五章 表单简介
Feb 19 Javascript
在父页面调用子页面的JS方法
Sep 29 Javascript
JavaScript作用域链示例分享
May 27 Javascript
JavaScript事件委托技术实例分析
Feb 06 Javascript
Bootstrap基础学习
Jun 16 Javascript
jquery实现图片放大镜功能
Nov 23 Javascript
基于JavaScript实现移动端无限加载分页
Mar 27 Javascript
微信小程序 生命周期函数详解
May 24 Javascript
Ionic + Angular.js实现验证码倒计时功能的方法
Jun 12 Javascript
Vue 实现展开折叠效果的示例代码
Aug 27 Javascript
原生JS检测CSS3动画是否结束的方法详解
Jan 27 Javascript
Vue 自定义指令实现一键 Copy功能
Sep 16 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
ThinkPHP 连接Oracle数据库的详细教程[全]
2012/07/16 PHP
php 常用算法和时间复杂度
2013/07/01 PHP
php json与xml序列化/反序列化
2013/10/28 PHP
PHP微信开发之微信消息自动回复下所遇到的坑
2016/05/09 PHP
PHP加密技术的简单实现
2016/09/04 PHP
Jquery Ajax学习实例6 向WebService发出请求,返回DataSet(XML) 异步调用
2010/03/18 Javascript
C#中TrimStart,TrimEnd,Trim在javascript上的实现
2011/01/17 Javascript
用JQuery实现表格隔行变色和突出显示当前行的代码
2012/02/10 Javascript
用js判断页面是否加载完成实现代码
2012/12/11 Javascript
时间戳转换为时间 年月日时间的JS函数
2013/08/19 Javascript
点击弹出层外区域关闭弹出层jquery特效示例
2013/08/25 Javascript
Nodejs中的this详解
2016/03/26 NodeJs
使用JavaScript为一张图片设置备选路径的方法
2017/01/04 Javascript
JS实现的DIV块来回滚动效果示例
2017/02/07 Javascript
python访问sqlserver示例
2014/02/10 Python
Python实现删除列表中满足一定条件的元素示例
2017/06/12 Python
Python+Socket实现基于TCP协议的客户与服务端中文自动回复聊天功能示例
2017/08/31 Python
Numpy 将二维图像矩阵转换为一维向量的方法
2018/06/05 Python
浅析Python四种数据类型
2018/09/26 Python
python 表格打印代码实例解析
2019/10/12 Python
pytorch实现用CNN和LSTM对文本进行分类方式
2020/01/08 Python
Python响应对象text属性乱码解决方案
2020/03/31 Python
Python判断三段线能否构成三角形的代码
2020/04/12 Python
PySide2出现“ImportError: DLL load failed: 找不到指定的模块”的问题及解决方法
2020/06/10 Python
Pycharm Git 设置方法
2020/09/15 Python
美国祛痘、抗衰老药妆品牌:Murad
2016/08/27 全球购物
惠普墨西哥官方商店:HP墨西哥
2016/12/01 全球购物
一级方程式赛车官方网上商店:F1 Store(支持中文)
2018/01/12 全球购物
SNIDEL官网:日本VIVI杂志人气少女第一品牌
2020/03/12 全球购物
德国净水壶和滤芯品牌:波尔德PearlCo(家用净水器)
2020/04/29 全球购物
社区十八大感言
2014/01/19 职场文书
带薪年假请假条
2014/02/04 职场文书
《广玉兰》教学反思
2014/04/14 职场文书
汽车销售助理岗位职责
2015/04/14 职场文书
2016年母亲节广告语
2016/01/28 职场文书
用php如何解决大文件分片上传问题
2021/07/07 PHP