javascript中的this作用域详解


Posted in Javascript onJuly 15, 2019

Javascript中this的指向一直是困扰我很久的问题,在使用中出错的机率也非常大。在面向对象语言中,它代表了当前对象的一个引用,而在js中却经常让我觉得混乱,它不是固定不变的,而是随着它的执行环境的改变而改变。

在Javascript中this总是指向调用它所在方法的对象。因为this是在函数运行时,自动生成的一个内部对象,只能在函数内部使用。

下面我们分几种情况深入分析this的用法:

1.全局的函数调用

function globalTest() {
    this.name = "global this";
    console.log(this.name);
  }
  globalTest(); //global this

以上代码中,globalTest()是全局性的方法,属于全局性调用,因此this就代表全局对象window。为了充分证明this是window,对代码做如下更改:

var name = "global this";

  function globalTest() {
    console.log(this.name);
  }
  globalTest(); //global this

name作为一个全局变量,运行结果仍然是“global this”,说明this指向的是window。在方法体中我们尝试更改全局name,再次调用方法输出“rename global this”, 说明全局的name在方法内部被更改。代码如下:

var name = "global this";

  function globalTest() {
    this.name = "rename global this"
    console.log(this.name);
  }
  globalTest(); //rename global this

根据以上三段代码,我们得出结论:对于全局的方法调用,this指向的是全局对象window,即调用方法所在的对象。

2.对象方法的调用

如果函数作为对象的方法调用,this指向的是这个上级对象,即调用方法的对象。 在以下代码中,this指向的是obj对象。

function showName() {
    console.log(this.name);
  }
  var obj = {};
  obj.name = "ooo";
  obj.show = showName;
  obj.show(); //ooo

3.构造函数的调用

构造函数中的this指向新创建的对象本身。

function showName() {
    this.name = "showName function";
  }
  var obj = new showName();
  console.log(obj.name); //showName function

上述代码中,我们通过new关键字创建一个对象的实例,new关键字可以改变this的指向,将这个this指向对象obj。
我们再增加一个全局的name,用以证明this指向的不是global:

var name = "global name";

  function showName() {
    this.name = "showName function";
  }
  var obj = new showName();

  console.log(obj.name); //showName function
  console.log(name); //global name

在构造函数的内部,我们对this.name进行赋值,但并没有改变全局变量name。

4.apply/call调用时的this

apply和call都是为了改变函数体内部的this指向。 其具体的定义如下:

call方法:

语法:call(thisObj,Object)

定义:调用一个对象的一个方法,以另一个对象替换当前对象。

说明:

call 方法可以用来代替另一个对象调用一个方法。call 方法可将一个函数的对象上下文从初始的上下文改变为由 thisObj 指定的新对象。

如果没有提供 thisObj 参数,那么 Global 对象被用作 thisObj。

apply方法:

语法:apply(thisObj,[argArray])

定义:应用某一对象的一个方法,用另一个对象替换当前对象。

说明:

如果 argArray 不是一个有效的数组或者不是 arguments 对象,那么将导致一个 TypeError。

如果没有提供 argArray 和 thisObj 任何一个参数,那么 Global 对象将被用作 thisObj, 并且无法被传递任何参数。

var value = "Global value";

  function FunA() {
    this.value = "AAA";
  }

  function FunB() {
    console.log(this.value);
  }
  FunB(); //Global value 因为是在全局中调用的FunB(),this.value指向全局的value
  FunB.call(window); //Global value,this指向window对象,因此this.value指向全局的value
  FunB.call(new FunA()); //AAA, this指向参数new FunA(),即FunA对象

  FunB.apply(window); //Global value
  FunB.apply(new FunA()); //AAA

在上述代码中,this的指向在call和apply中是一致的,只不过是调用参数的形式不一样。call是一个一个调用参数,而apply是调用一个数组。具体的会在以后的博文中单独阐述。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
img标签中onerror用法
Aug 13 Javascript
扩展Jquery插件处理mouseover时内部有子元素时发生样式闪烁
Dec 08 Javascript
vue子组件使用自定义事件向父组件传递数据
May 27 Javascript
Angular2 父子组件数据通信实例
Jun 22 Javascript
详解webpack进阶之loader篇
Aug 23 Javascript
10个最优秀的Node.js MVC框架
Aug 24 Javascript
Web安全之XSS攻击与防御小结
Dec 13 Javascript
详解jquery和vue对比
Apr 16 jQuery
微信小程序传值以及获取值方法的详解
Apr 29 Javascript
微信小程序实现张图片合成为一张并下载
Jul 16 Javascript
jQuery实现可编辑的表格
Dec 11 jQuery
微信小程序实现弹框效果
May 26 Javascript
微信小程序页面上下滚动效果
Nov 18 #Javascript
node.js实现上传文件功能
Jul 15 #Javascript
js canvas实现5张图片合成一张图片
Jul 15 #Javascript
js使用文件流下载csv文件的实现方法
Jul 15 #Javascript
基于Taro的微信小程序模板消息-获取formId功能模块封装实践
Jul 15 #Javascript
微信小程序开发技巧汇总
Jul 15 #Javascript
微信小程序中如何计算距离某个节日还有多少天
Jul 15 #Javascript
You might like
常用的php ADODB使用方法集锦
2008/03/25 PHP
用mysql_fetch_array()获取当前行数据的方法详解
2013/06/05 PHP
PHP实现股票趋势图和柱形图
2015/02/07 PHP
浅谈PHP的$_SERVER[SERVER_NAME]
2017/02/04 PHP
php图片合成方法(多张图片合成一张)
2017/11/25 PHP
PHP中“=>
2019/03/01 PHP
laravel框架中视图的基本使用方法分析
2019/11/23 PHP
javascript:文字不间断向左移动的实例代码
2013/08/08 Javascript
基于jQuery的图片不完全按比例自动缩小
2014/07/11 Javascript
jquery+CSS实现的水平布局多级网页菜单效果
2015/08/24 Javascript
Highcharts入门之基本属性
2016/08/02 Javascript
javascript函数中的3个高级技巧
2016/09/22 Javascript
js微信扫描二维码登录网站技术原理
2016/12/01 Javascript
Angular.js中ng-if、ng-show和ng-hide的区别介绍
2017/01/20 Javascript
JS HTML图片显示Canvas 压缩功能
2017/07/21 Javascript
Javascript之图片的延迟加载的实例详解
2017/07/24 Javascript
Vue微信项目按需授权登录策略实践思路详解
2018/05/07 Javascript
通过webpack引入第三方库的方法
2018/07/20 Javascript
原生js实现抽奖小游戏
2019/06/27 Javascript
基于element-ui封装可搜索的懒加载tree组件的实现
2020/05/22 Javascript
jQuery弹框插件使用方法详解
2020/05/26 jQuery
uniapp,微信小程序中使用 MQTT的问题
2020/07/11 Javascript
小程序实现可拖动的悬浮按钮
2020/09/07 Javascript
js实现贪吃蛇游戏(简易版)
2020/09/29 Javascript
linecache模块加载和缓存文件内容详解
2018/01/11 Python
在 Python 中接管键盘中断信号的实现方法
2020/02/04 Python
Python 使用双重循环打印图形菱形操作
2020/08/09 Python
Django如何实现防止XSS攻击
2020/10/13 Python
大学团支书的自我评价分享
2013/12/14 职场文书
庆七一宣传标语
2014/10/08 职场文书
2015年超市收银员工作总结
2015/04/25 职场文书
风之谷观后感
2015/06/11 职场文书
2016教师六五普法学习心得体会
2016/01/21 职场文书
护士爱岗敬业心得体会
2016/01/25 职场文书
《唯一的听众》教学反思
2016/02/18 职场文书
Python OpenCV实现图像模板匹配详解
2022/04/07 Python