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实现在Repeater控件中创建可隐藏区域的代码
Sep 16 Javascript
深入理解JavaScript系列(8) S.O.L.I.D五大原则之里氏替换原则LSP
Jan 15 Javascript
Jquery动态更改一张位图的src与Attr的使用
Jul 31 Javascript
通过length属性判断jquery对象是否存在
Oct 18 Javascript
js实现漂浮回顶部按钮实例
May 06 Javascript
javascript实现在网页任意处点左键弹出隐藏菜单的方法
May 13 Javascript
javascript比较两个日期相差天数的方法
Jul 23 Javascript
如何利用JQuery实现从底部回到顶部的功能
Dec 27 Javascript
Vue实现类似Spring官网图片滑动效果方法
Mar 01 Javascript
js实现开关灯效果
Mar 30 Javascript
element的el-table中记录滚动条位置的示例代码
Nov 06 Javascript
JavaScript实现简单的图片切换功能(实例代码)
Apr 10 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
德生PL330测评
2021/03/02 无线电
php牛逼的面试题分享
2013/01/18 PHP
深入分析php之面向对象
2013/05/15 PHP
zen cart实现订单中增加paypal中预留电话的方法
2016/07/12 PHP
PHP简单创建压缩图的方法
2016/08/24 PHP
一段实现页面上的图片延时加载的js代码
2010/02/11 Javascript
13 个JavaScript 性能提升技巧分享
2012/07/26 Javascript
用js实现in_array的方法
2013/11/05 Javascript
jQuery实现点击小图显示大图代码分享
2015/08/25 Javascript
JQuery中Ajax()的data参数类型实例分析
2015/12/15 Javascript
浅谈js函数中的实例对象、类对象、局部变量(局部函数)
2016/11/20 Javascript
JQuery统计input和textarea文字输入数量(代码分享)
2016/12/29 Javascript
微信小程序开发教程-手势解锁实例
2017/01/06 Javascript
简单实现js倒计时功能
2017/02/13 Javascript
vue绑定设置属性的多种方式(5)
2017/08/16 Javascript
纯JavaScript实现实时反馈系统时间
2017/10/26 Javascript
vue+Vue Router多级侧导航切换路由(页面)的实现代码
2018/12/20 Javascript
微信小程序分包加载代码实现方法详解
2019/09/23 Javascript
关于angular引入ng-zorro的问题浅析
2020/09/09 Javascript
关于ES6尾调用优化的使用
2020/09/11 Javascript
nuxt 每个页面head标签内容设置方式
2020/11/05 Javascript
javascript实现倒计时关闭广告
2021/02/09 Javascript
基于python编写的微博应用
2014/10/17 Python
python fabric使用笔记
2015/05/09 Python
Python时间模块datetime、time、calendar的使用方法
2016/01/13 Python
使用pytorch进行图像的顺序读取方法
2018/07/27 Python
Python实现的在特定目录下导入模块功能分析
2019/02/11 Python
解决Pycharm后台indexing导致不能run的问题
2019/06/27 Python
python matplotlib如何给图中的点加标签
2019/11/14 Python
Python要求O(n)复杂度求无序列表中第K的大元素实例
2020/04/02 Python
基于python实现模拟数据结构模型
2020/06/12 Python
工业自动化专业毕业生推荐信
2013/11/18 职场文书
节能环保家庭事迹材料
2014/08/27 职场文书
Java生成读取条形码和二维码的简单示例
2021/07/09 Java/Android
java后台调用接口及处理跨域问题的解决
2022/03/24 Java/Android
Oracle锁表解决方法的详细记录
2022/06/05 Oracle