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 相关文章推荐
js 鼠标点击事件及其它捕获
Jun 04 Javascript
javascript动画浅析
Aug 30 Javascript
Js数组的操作push,pop,shift,unshift等方法详细介绍
Dec 28 Javascript
jQuery动态设置form表单的enctype值(实现代码)
Jul 04 Javascript
JavaScript简单实现网页回到顶部功能
Nov 12 Javascript
JS版元素周期表实现方法
Aug 05 Javascript
Three.js学习之文字形状及自定义形状
Aug 01 Javascript
利用nginx + node在阿里云部署https的步骤详解
Dec 19 Javascript
vue项目中将element-ui table表格写成组件的实现代码
Jun 12 Javascript
微信小程序引入模块中wxml、wxss、js的方法示例
Aug 09 Javascript
vue动态渲染svg、添加点击事件的实现
Mar 13 Javascript
使用JavaScript实现贪吃蛇游戏
Sep 29 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
自己前几天写的无限分类类
2007/02/14 PHP
php自定义hash函数实例
2015/05/05 PHP
动手学习无线电
2021/03/10 无线电
用JS实现3D球状标签云示例代码
2013/12/01 Javascript
jquery插件推荐 jquery.cookie
2014/11/09 Javascript
浅谈javascript对象模型和function对象
2014/12/26 Javascript
js实现数字每三位加逗号的方法
2015/02/05 Javascript
深入JavaScript高级程序设计之对象、数组(栈方法,队列方法,重排序方法,迭代方法)
2015/12/01 Javascript
浅谈bootstrap源码分析之scrollspy(滚动侦听)
2016/06/06 Javascript
jQuery插件 Jqplot图表实例
2016/06/18 Javascript
js 将input框中的输入自动转化成半角大写(税号输入框)
2017/02/16 Javascript
Vue2.0 实现移动端图片上传功能
2018/05/30 Javascript
vue axios数据请求get、post方法及实例详解
2018/09/11 Javascript
javascript删除数组元素的七个方法示例
2019/09/09 Javascript
javascript 模块依赖管理的本质深入详解
2020/04/30 Javascript
在vue中封装的弹窗组件使用队列模式实现方法
2020/07/23 Javascript
[02:39]DOTA2国际邀请赛助威团西雅图第一天
2013/08/08 DOTA
Python中staticmethod和classmethod的作用与区别
2018/10/11 Python
python3 读取Excel表格中的数据
2018/10/16 Python
Python SELENIUM上传文件或图片实现过程
2019/10/28 Python
关于tf.nn.dynamic_rnn返回值详解
2020/01/20 Python
Pytorch 高效使用GPU的操作
2020/06/27 Python
linux mint中搜狗输入法导致pycharm卡死的问题
2020/10/28 Python
基于HTML5的WebGL实现json和echarts图表展现在同一个界面
2017/10/26 HTML / CSS
捐书寄语赠言
2014/01/18 职场文书
知名企业招聘广告词大全
2014/03/18 职场文书
异地年检委托书范本
2014/09/24 职场文书
孕妇离婚协议书范本
2014/11/20 职场文书
会议接待欢迎词范文
2015/01/26 职场文书
关于颐和园的导游词
2015/01/30 职场文书
撤诉申请怎么写
2015/05/19 职场文书
2016公司年会主持词
2015/07/01 职场文书
建筑工程挂靠协议书
2016/03/23 职场文书
python如何在word中存储本地图片
2021/04/07 Python
彻底理解golang中什么是nil
2021/04/29 Golang
css清除浮动clearfix:after的用法详解(附完整代码)
2023/05/21 HTML / CSS