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中函数声明优先于变量声明的实例分析
Mar 01 Javascript
让AJAX不依赖后端接口实现方案
Dec 03 Javascript
js统计页面的来访次数实现代码
May 09 Javascript
基于jQuery实现网页打印功能
Dec 01 Javascript
AngularJS入门之动画
Jul 27 Javascript
jQuery树形控件zTree使用小结
Aug 02 Javascript
微信小程序使用第三方库Underscore.js步骤详解
Sep 27 Javascript
AngularJS实现页面跳转后自动弹出对话框实例代码
Aug 02 Javascript
清空元素html("") innerHTML="" 与 empty()的区别和应用(推荐)
Aug 14 Javascript
关于自定义Egg.js的请求级别日志详解
Dec 12 Javascript
浅谈Vue.js中如何实现自定义下拉菜单指令
Jan 06 Javascript
通过实例了解JS 连续赋值
Sep 24 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
Windows IIS PHP 5.2 安装与配置方法
2009/06/08 PHP
深入理解PHP之源码目录结构与功能说明
2016/06/01 PHP
YII分模块加载路由的实现方法
2018/10/01 PHP
php中的钩子理解及应用实例分析
2019/08/30 PHP
10个实用的脚本代码工具
2010/05/04 Javascript
js利用事件的阻止冒泡实现点击空白模态框的隐藏
2014/01/24 Javascript
PHP开发者必须掌握的6个关键字
2014/04/14 Javascript
jQuery源码分析之jQuery中的循环技巧详解
2014/09/06 Javascript
JavaScript利用HTML DOM进行文档操作的方法
2016/03/28 Javascript
js倒计时显示实例
2016/12/11 Javascript
vue.js学习笔记:如何加载本地json文件
2017/01/17 Javascript
详解Vue Elememt-UI构建管理后台
2018/02/27 Javascript
浅谈Node.js 中间件模式
2018/06/12 Javascript
微信小程序indexOf的替换方法(推荐)
2020/01/14 Javascript
使用BeautifulSoup爬虫程序获取百度搜索结果的标题和url示例
2014/01/19 Python
python实现的文件夹清理程序分享
2014/11/22 Python
总结python爬虫抓站的实用技巧
2016/08/09 Python
Python环境变量设置方法
2016/08/28 Python
Python随机读取文件实现实例
2017/05/25 Python
分享一下如何编写高效且优雅的 Python 代码
2017/09/07 Python
python pytest进阶之conftest.py详解
2019/06/27 Python
Python之time模块的时间戳,时间字符串格式化与转换方法(13位时间戳)
2019/08/12 Python
Python 使用xlwt模块将多行多列数据循环写入excel文档的操作
2020/11/10 Python
python 爬取百度文库并下载(免费文章限定)
2020/12/04 Python
CSS3按钮鼠标悬浮实现光圈效果源码
2016/09/11 HTML / CSS
AMAVII眼镜官网:时尚和设计师太阳镜
2019/05/05 全球购物
Nordgreen美国官网:在线购买极简主义斯堪的纳维亚手表
2019/07/24 全球购物
体育教育个人自荐信范文
2013/12/01 职场文书
会计应聘求职信范文
2013/12/17 职场文书
毕业生自荐信格式
2014/03/07 职场文书
房产授权委托书范本
2014/09/22 职场文书
刑事法律意见书
2015/06/04 职场文书
如何制定销售人员薪酬制度?
2019/07/09 职场文书
pytorch 运行一段时间后出现GPU OOM的问题
2021/06/02 Python
Mysql 如何实现多张无关联表查询数据并分页
2021/06/05 MySQL
在Docker容器中部署SQL Server
2022/04/11 Servers