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 相关文章推荐
javascript模拟的Ping效果代码 (Web Ping)
Mar 13 Javascript
jquery设置元素的readonly和disabled的写法
Sep 22 Javascript
jtable列中自定义button示例代码
Nov 21 Javascript
Javascript Memoizer浅析
Oct 16 Javascript
angularjs指令中的compile与link函数详解
Dec 06 Javascript
Node.js巧妙实现Web应用代码热更新
Oct 22 Javascript
很棒的Bootstrap选项卡切换效果
Jul 01 Javascript
Node.js测试中的Mock文件系统详解
Nov 21 Javascript
Angular的$http与$location
Dec 26 Javascript
echarts学习笔记之图表自适应问题详解
Nov 22 Javascript
layui实现数据表格table分页功能(ajax异步)
Jul 27 Javascript
vue 关闭浏览器窗口的时候,清空localStorage的数据示例
Nov 06 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
网站当前的在线人数
2006/10/09 PHP
第4章 数据处理-php字符串的处理-郑阿奇(续)
2011/07/04 PHP
php+ajax实现异步上传文件或图片功能
2017/07/18 PHP
safari下载文件自动加了html后缀问题
2018/11/09 PHP
js 如何实现对数据库的增删改查
2012/11/23 Javascript
JavaScript设计模式之单件模式介绍
2014/12/28 Javascript
JavaScript运动减速效果实例分析
2015/08/04 Javascript
JS实现的简洁纵向滑动菜单(滑动门)效果
2015/10/19 Javascript
jQuery实现页面下拉100像素出现悬浮窗口的方法
2016/09/05 Javascript
JS变量及其作用域
2017/03/29 Javascript
ES6教程之for循环和Map,Set用法分析
2017/04/10 Javascript
JavaScript实现QQ聊天消息展示和评论提交功能
2017/05/22 Javascript
运用jQuery写的验证表单(实例讲解)
2017/07/06 jQuery
前端主流框架vue学习笔记第一篇
2017/07/26 Javascript
JavaScript学习笔记之函数记忆
2017/09/06 Javascript
解决Vue.js由于延时显示了{{message}}引用界面的问题
2018/08/25 Javascript
vue实现导航标题栏随页面滚动渐隐渐显效果
2020/03/12 Javascript
JavaScript日期库date-fn.js使用方法解析
2020/09/09 Javascript
[01:20]DOTA2 2017国际邀请赛冠军之路无止竞
2017/06/19 DOTA
[50:50]完美世界DOTA2联赛PWL S3 INK ICE vs DLG 第一场 12.20
2020/12/23 DOTA
python简单的函数定义和用法实例
2015/05/07 Python
Python中字典的基础知识归纳小结
2015/08/19 Python
python爬虫入门教程--快速理解HTTP协议(一)
2017/05/25 Python
Python自定义线程池实现方法分析
2018/02/07 Python
python3+PyQt5实现支持多线程的页面索引器应用程序
2018/04/20 Python
python中用ctypes模拟点击的实例讲解
2020/11/26 Python
HTML5移动端手机网站开发流程
2016/04/25 HTML / CSS
英国IT硬件供应商,定制游戏PC:Mesh Computers
2019/03/28 全球购物
英国No.1体育用品零售商:SportsDirect.com
2019/10/16 全球购物
市场部经理岗位职责
2014/04/10 职场文书
组工干部演讲稿
2014/09/02 职场文书
个人专业技术总结
2015/03/05 职场文书
大学毕业论文致谢词
2015/05/14 职场文书
公司庆典主持词
2015/07/04 职场文书
MySQL 中如何归档数据的实现方法
2022/03/16 SQL Server