由于其运行期绑定的特性,JavaScript 中的 this 含义要丰富得多,它可以是全局对象、当前对象或者任意对象,这完全取决于函数的调用方式。
JavaScript 中函数的调用有以下几种方式:作为函数调用,作为对象方法调用,作为构造函数调用,和使用 apply 或 call 调用。下面我们将按照调用方式的不同,分别讨论 this 的含义。
情况一:纯粹的函数调用
这是函数的最通常用法,属于全局性调用,因此this就代表全局对象Global。
1、函数也可以直接被调用,此时 this 绑定到全局对象。
function makeNoSense(x) {
this.x = x;
}
makeNoSense();
console.log(x);// x 已经成为一个值为 5 的全局变量
function test(){
  this.x = ;
  alert(this.x);
}
test(); //

情况二:作为对象方法的调用

函数还可以作为某个对象的方法调用,这时this指代对象内部属性被调用。

var myObject = {
  value :,
  increment:function (inc){
    this.value += typeof inc ==='number' ? inc:;
  }
};
myObject.increment();
console.log(myObject.value); //
myObject.increment();
console.log(myObject.value); //

情况三 :作为构造函数调用

javaScript 支持面向对象式编程,与主流的面向对象式编程语言不同,JavaScript 并没有类(class)的概念,而是使用基于原型(prototype)的继承方式。
相应的,JavaScript 中的构造函数也很特殊,如果不使用 new 调用,则和普通函数一样。作为又一项约定俗成的准则,构造函数以大写字母开头,提醒调用者使用正确的方式调用。如果调用正确,this 绑定到新创建的对象上。
所谓构造函数,就是通过这个函数生成一个新对象(object)。这时,this就指这个新对象。
function Point(x, y){
this.x = x;
this.y = y;
}
var p1 = new Point(,);
console.log(p1.x+","+p1.y);//3,2

为了表明这时this不是全局对象,我对代码做一些改变:

var x = ;
function Point(x, y){
this.x = x;
this.y = y;
}
var p1 = new Point(,);
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(, );
var p2 = {x: , y: };
p1.moveTo(, ); //1,1
p1.moveTo.apply(p2, [, ]);//10,10

在上面的例子中,我们使用构造函数生成了一个对象 p1,该对象同时具有 moveTo 方法;使用对象字面量创建了另一个对象 p2,我们看到使用 apply 可以将 p1 的方法应用到 p2 上,这时候 this 也被绑定到对象 p2 上。另一个方法 call 也具备同样功能,不同的是最后的参数不是作为一个数组统一传入,而是分开传入的。本文通过对JavaScript中经常容易混淆的this在四中应用场景中的使用方法进行了讲解,希望对您有所帮助,喜欢的话,请推荐一下哦。

熟练掌握js中this的用法,解析this在不同应用场景的作用的更多相关文章

  1. [转载]js中return的用法

    一.返回控制与函数结果,语法为:return 表达式; 语句结束函数执行,返回调用函数,而且把表达式的值作为函数的结果 二.返回控制,无函数结果,语法为:return;  在大多数情况下,为事件处理函 ...

  2. js中this的用法

    经过近几周的模拟面试题,我查询了一些资料,今天就来说说,在js中this的用法吧.方法有四:第一,用作全局变量,第二,用作表该对象,第三,用作构造函数,第四,用作call和applay

  3. [JavaScript] JS中对Base64的解析

    JS中对Base64的解析 <script type="text/javascript"> /** * UTF16和UTF8转换对照表 * U+00000000 – U ...

  4. JQuery之append和appendTo的区别,还有js中的appendChild用法

    JQuery之append和appendTo的区别 append()前面是要选择的对象,后面是要在对象内插入的元素内容 appendTo()前面是要插入的元素内容且为Jquery对象,而后面是要选择的 ...

  5. JS中event.keyCode用法及keyCode对…

    js中event.keyCode用法及keyCode对照表 标签: javascriptJavaScriptJavascriptjavaScript 2012-12-11 15:11 HTML Jav ...

  6. 浅谈JS中 reduce() 的用法

    过去有很长一段时间,我一直很难理解 reduce() 这个方法的具体用法,平时也很少用到它.事实上,如果你能真正了解它的话,其实在很多地方我们都可以用得上,那么今天我们就来简单聊聊JS中 reduce ...

  7. JS中 reduce() 的用法

    过去有很长一段时间,我一直很难理解 reduce() 这个方法的具体用法,平时也很少用到它.事实上,如果你能真正了解它的话,其实在很多地方我们都可以用得上,那么今天我们就来简单聊聊JS中 reduce ...

  8. MATLAB中冒号的用法解析

    MATLAB中冒号的用法解析 1.: 表示所有的意思. (1)如:a(1,:) 表示a的第1行,示例: 结果: 同样的如果a(2,:)表示a的第2行 (2)反过来,a(:,2) 表示a的第3列,示例: ...

  9. JS中的this用法详解

    随着对js的深入学习和使用,你会发现它里面包含了很多令人困惑的机制,比如对象.闭包.原型链继承等等,而这其中肯定包含令你现在或者曾经费解的this,如果你不把心一横,花点时间还真不明白这个this的用 ...

随机推荐

  1. SignalR入门之多平台SignalR服务端

    之前创建SignalR服务端是基于Web应用程序而言的.那么能不能把SignalR服务端做成控制台应用程序.Winform或windows服务呢? 答案是肯定的. 之前尽管看起来好像是IIS和ASP. ...

  2. C#~异步编程在项目中的使用

    一些闲话 对异步编程没有了解的同学可以看我的这篇文章<C#~异步编程>,今天主要说一下,在项目中怎么就用到了异步编程!在进行WEB开发时,异步这块我们用的并不多,但当你的项目做到一定规模时 ...

  3. 背水一战 Windows 10 (7) - 控件 UI: VisualState, VisualStateManager, 控件的默认 UI

    [源码下载] 背水一战 Windows 10 (7) - 控件 UI: VisualState, VisualStateManager, 控件的默认 UI 作者:webabcd 介绍背水一战 Wind ...

  4. Wijmo 2016 V1 强势发布,全面支持Angular 2

    Wijmo UI控件支持Angular 2 从Angular的1.x时代开始,Wijmo就已经支持Angular了.最近,我们正在和Angular团队合作来支持Angular 2.有趣的是,对Angu ...

  5. MySQL Cursor

    MySQL Cursor Summary: in this tutorial, you will learn how to use MySQL cursor in stored procedures ...

  6. 开始自学H5前端-第一天

    自从iOS工作丢了后 就萌生了自学这个想法 但是一直在纠结学哪一门语言好 我是计算机科学与技术专业的 其实对于我来说 学啥都算是有点基础的 但是被iOS坑惨了之后 就会不自觉的进行各个方向和前景分析 ...

  7. 通过“回文字算法”复习C++语言。

    一.什么是回文字 给定一个字符串,从前往后读和从后往前读,字符串序列不变.例如,河北省农村信用社的客服电话是“96369”,无论从后往前读,还是从前后往后读,各个字符出现的位置不变. 二.功能实现 ( ...

  8. php高版本不再使用mysql_connect()来连接数据库

    想用php生成一个mysql数据字典导出来,用到下面代码会 $mysql_conn = mysql_connect ( "$dbserver", "$dbusername ...

  9. MAC 卸载 mysql

    怎样才能完全卸载mysql和删除它从你的Mac(包括所有数据库)执行以下操作: 打开终端窗口 使用mysqldump备份你的数据库将文本文件! 停止数据库服务器 sudo rm /usr/local/ ...

  10. java集合-HashMap

    HashMap基于哈希表的 Map 接口的实现,以 key-value 的形式存在.在 HashMap 中,key-value 总是会当做一个整体来处理,系统会根据 hash 算法来来计算 key-v ...