JavaScript中的this关键字使用方法总结


Posted in Javascript onMarch 13, 2015

在javascritp中,不一定只有对象方法的上下文中才有this, 全局函数调用和其他的几种不同的上下文中也有this指代。
它可以是全局对象、当前对象或者任意对象,这完全取决于函数的调用方式。JavaScript 中函数的调用有以下几种方式:作为对象方法调用,作为函数调用,作为构造函数调用,和使用 apply 或 call 调用。

1.作为对象方法调用

在 JavaScript 中,函数也是对象,因此函数可以作为一个对象的属性,此时该函数被称为该对象的方法,在使用这种调用方式时,this 被自然绑定到该对象。

  

var point = { 

x : 0, 

y : 0, 

moveTo : function(x, y) { 

    this.x = this.x + x; 

    this.y = this.y + y; 

    } 

}; 

point.moveTo(1, 1)//this 绑定到当前对象,即 point 对象

2.作为函数调用

函数也可以直接被调用,此时 this 绑定到全局对象。在浏览器中,window 就是该全局对象。比如下面的例子:函数被调用时,this 被绑定到全局对象,接下来执行赋值语句,相当于隐式的声明了一个全局变量,这显然不是调用者希望的。

  

function makeNoSense(x) { 

this.x = x; 

} 

makeNoSense(5); 

x;// x 已经成为一个值为 5 的全局变量

对于内部函数,即声明在另外一个函数体内的函数,这种绑定到全局对象的方式会产生另外一个问题。我们仍然以前面提到的 point 对象为例,这次我们希望在 moveTo 方法内定义两个函数,分别将 x,y 坐标进行平移。结果可能出乎大家意料,不仅 point 对象没有移动,反而多出两个全局变量 x,y。

var point = { 

x : 0, 

y : 0, 

moveTo : function(x, y) { 

    // 内部函数

    var moveX = function(x) { 

    this.x = x;//this 绑定到了哪里?

   }; 

   // 内部函数

   var moveY = function(y) { 

   this.y = y;//this 绑定到了哪里?

   };
   moveX(x); 

   moveY(y); 

   } 

}; 

point.moveTo(1, 1); 

point.x; //==>0 

point.y; //==>0 

x; //==>1 

y; //==>1

这属于 JavaScript 的设计缺陷,正确的设计方式是内部函数的 this 应该绑定到其外层函数对应的对象上,为了规避这一设计缺陷,聪明的 JavaScript 程序员想出了变量替代的方法,约定俗成,该变量一般被命名为 that。

var point = { 

 x : 0, 

 y : 0, 

 moveTo : function(x, y) { 

      var that = this; 

     // 内部函数

     var moveX = function(x) { 

     that.x = x; 

     }; 

     // 内部函数

     var moveY = function(y) { 

     that.y = y; 

     } 

     moveX(x); 

     moveY(y); 

     } 

 }; 

 point.moveTo(1, 1); 

 point.x; //==>1 

 point.y; //==>1

作为构造函数调用

JavaScript 支持面向对象式编程,与主流的面向对象式编程语言不同,JavaScript 并没有类(class)的概念,而是使用基于原型(prototype)的继承方式。相应的,JavaScript 中的构造函数也很特殊,如果不使用 new 调用,则和普通函数一样。作为又一项约定俗成的准则,构造函数以大写字母开头,提醒调用者使用正确的方式调用。如果调用正确,this 绑定到新创建的对象上。

function Point(x, y){ 

   this.x = x; 

   this.y = y; 

}

使用 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; 

   } 

}
var p1 = new Point(0, 0); 

var p2 = {x: 0, y: 0}; 

p1.moveTo(1, 1); 

p1.moveTo.apply(p2, [10, 10]);

在上面的例子中,我们使用构造函数生成了一个对象 p1,该对象同时具有 moveTo 方法;使用对象字面量创建了另一个对象 p2,我们看到使用 apply 可以将 p1 的方法应用到 p2 上,这时候 this 也被绑定到对象 p2 上。另一个方法 call 也具备同样功能,不同的是最后的参数不是作为一个数组统一传入,而是分开传入的。

function Foo(){

//1.this引用的构造函数是argument.callee引用的对象

//说明是通过new操作符执行的构造函数

if(this.constructor==arguments.callee){

alert('Object Created');

}

//2.this是window, 那么是全局调用

if(this==window){

alert('normal call');

}

else{//3.否则是作为其他对象的方法来调用

alert('called by '+ this.constructor);

}

}

Foo();//全局函数调用

Foo.call(new Object());//作为一个object对象的成员方法来调用

new Foo();//被new操作符调用,执行对象构造
Javascript 相关文章推荐
Javascript 类与静态类的实现(续)
Apr 02 Javascript
js实现双向链表互联网机顶盒实战应用实现
Oct 28 Javascript
hover的用法及live的用法介绍(鼠标悬停效果)
Mar 29 Javascript
提高jQuery性能的十个诀窍
Nov 14 Javascript
jquery通过load获取文件的内容并跳到锚点的方法
Jan 29 Javascript
JS生成某个范围的随机数【四种情况详解】
Apr 20 Javascript
Javascript之Date对象详解
Jun 07 Javascript
网页瀑布流布局jQuery实现代码
Oct 21 Javascript
详解node如何让一个端口同时支持https与http
Jul 04 Javascript
详解weex默认webpack.config.js改造
Jan 08 Javascript
基于vue v-for 多层循环嵌套获取行数的方法
Sep 26 Javascript
学习使用ExpressJS 4.0中的新Router的用法
Nov 06 Javascript
javascript中slice(),splice(),split(),substring(),substr()使用方法
Mar 13 #Javascript
在linux中使用包管理器安装node.js
Mar 13 #Javascript
JQuery中serialize() 序列化
Mar 13 #Javascript
JavaScript中通过prototype属性共享属性和方法的技巧实例
Mar 13 #Javascript
JQuery中$.each 和$(selector).each()的区别详解
Mar 13 #Javascript
JavaScript实现判断图片是否加载完成的3种方法整理
Mar 13 #Javascript
JavaScript检查弹出窗口是否被阻拦的方法技巧
Mar 13 #Javascript
You might like
必须收藏的23个php实用代码片段
2016/02/02 PHP
PHP ADODB生成HTML表格函数rs2html功能【附错误处理函数用法】
2018/05/29 PHP
js判断IE浏览器版本过低示例代码
2013/11/22 Javascript
jquery转盘抽奖功能实现
2015/11/13 Javascript
Bootstrap每天必学之响应式导航、轮播图
2016/04/25 Javascript
Bootstrap整体框架之JavaScript插件架构
2016/12/15 Javascript
js仿淘宝商品放大预览功能
2017/03/15 Javascript
Angular directive递归实现目录树结构代码实例
2017/05/05 Javascript
JavaScript 五大常见函数
2018/03/23 Javascript
详解vue几种主动刷新的方法总结
2019/02/19 Javascript
cordova+vue+webapp使用html5获取地理位置的方法
2019/07/06 Javascript
Vue项目打包部署到iis服务器的配置方法
2019/10/14 Javascript
mpvue实现左侧导航与右侧内容的联动
2019/10/21 Javascript
Node.js API详解之 console模块用法详解
2020/05/12 Javascript
聊聊vue 中的v-on参数问题
2021/01/29 Vue.js
[03:30]完美盛典趣味短片 CSGO2019年度名场面
2019/12/07 DOTA
[06:48]DOTA2-DPC中国联赛2月26日Recap集锦
2021/03/11 DOTA
利用Python批量生成任意尺寸的图片
2016/08/29 Python
老生常谈Python序列化和反序列化
2017/06/28 Python
python re模块findall()函数实例解析
2018/01/19 Python
Pytorch之Variable的用法
2019/12/31 Python
python系统指定文件的查找只输出目录下所有文件及文件夹
2020/01/19 Python
matlab 计算灰度图像的一阶矩,二阶矩,三阶矩实例
2020/04/22 Python
SneakerStudio英国:最佳运动鞋商店
2019/05/22 全球购物
高中生学习生活的自我评价
2013/11/27 职场文书
应用英语专业自荐信
2014/01/26 职场文书
家长对孩子评语
2014/01/30 职场文书
小学教师办公室制度
2014/02/03 职场文书
公益广告宣传方案
2014/02/28 职场文书
毕业生求职信范文
2014/06/29 职场文书
抗洪救灾感谢信
2015/01/22 职场文书
奖学金个人总结
2015/03/04 职场文书
资金申请报告范文
2015/05/14 职场文书
酒店开业主持词
2015/07/02 职场文书
上班旷工检讨书
2015/08/15 职场文书
如何使用vue3打造一个物料库
2021/05/08 Vue.js