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 相关文章推荐
jQuery探测位置的提示弹窗(toolTip box)详细解析
Nov 14 Javascript
让input框实现类似百度的搜索提示(基于jquery事件监听)
Jan 31 Javascript
JavaScript判断undefined类型的正确方法
Jun 30 Javascript
JS打字效果的动态菜单代码分享
Aug 21 Javascript
javascript中字体浮动效果的简单实例演示
Nov 18 Javascript
纯css下拉菜单 无需js
Aug 15 Javascript
jQuery获取选中单选按钮radio的值
Dec 27 Javascript
jQuery使用eraser.js插件实现擦除、刮刮卡效果的方法【附eraser.js下载】
Apr 28 jQuery
webstorm和.vue中es6语法报错的解决方法
May 08 Javascript
JS事件绑定的常用方式实例总结
Mar 02 Javascript
js常用正则表达式集锦
May 17 Javascript
关于uniApp editor微信滑动问题
Jan 15 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遍历数组的几种方法
2012/03/22 PHP
php无限极分类递归排序实现方法
2014/11/11 PHP
PDO预处理语句PDOStatement对象使用总结
2014/11/20 PHP
php获取指定(访客)IP所有信息(地址、邮政编码、国家、经纬度等)的方法
2015/07/06 PHP
php 开发中加密的几种方法总结
2017/03/22 PHP
PHP获取redis里不存在的6位随机数应用示例【设置24小时过时】
2017/06/07 PHP
php框架CI(codeigniter)自动加载与自主创建对象操作实例分析
2020/06/06 PHP
如何在PHP中读写文件
2020/09/07 PHP
基于jquery的一个图片hover的插件
2010/04/24 Javascript
JQUERY获取form表单值的代码
2010/07/17 Javascript
再论Javascript的类继承
2011/03/05 Javascript
javascript 二进制运算技巧解析
2012/11/27 Javascript
js图片向右一张张滚动效果实例代码
2013/11/23 Javascript
javascript的变量、传值、传址、参数之间关系
2015/07/26 Javascript
jquery 一键复制到剪切板的实例
2017/09/20 jQuery
react-native-fs实现文件下载、文本存储的示例代码
2017/09/22 Javascript
vue下history模式刷新后404错误解决方法
2018/08/18 Javascript
vue根据值给予不同class的实例
2018/09/29 Javascript
详细分析Node.js 模块系统
2020/06/28 Javascript
vue组件讲解(is属性的用法)模板标签替换操作
2020/09/04 Javascript
JS如何操作DOM基于表格动态展示数据
2020/10/15 Javascript
解决vue props传Array/Object类型值,子组件报错的情况
2020/11/07 Javascript
微信跳一跳python代码实现
2018/01/05 Python
基于Python中单例模式的几种实现方式及优化详解
2018/01/09 Python
python3使用smtplib实现发送邮件功能
2018/05/22 Python
pycharm使用matplotlib.pyplot不显示图形的解决方法
2018/10/28 Python
对Python函数设计规范详解
2019/07/19 Python
python:按行读入,排序然后输出的方法
2019/07/20 Python
PyQt5高级界面控件之QTableWidget的具体使用方法
2020/02/23 Python
python+OpenCV实现图像拼接
2020/03/05 Python
详解CSS3媒体查询响应式布局bootstrap 框架原理实战(推荐)
2020/11/16 HTML / CSS
印度尼西亚最完整和最大的在线药房网站:Farmaku.com
2019/11/23 全球购物
澳大利亚在线奢侈品时尚零售平台:Azura Runway
2021/01/13 全球购物
妈妈的账单教学反思
2014/02/06 职场文书
单位推荐信范文
2015/03/27 职场文书
利用Python网络爬虫爬取各大音乐评论的代码
2021/04/13 Python