javascript中的this作用域详解

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是调用一个数组。具体的会在以后的博文中单独阐述。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • 有关js的变量作用域和this指针的讨论

    一.变量作用域:[P71] 这一句话说的非常精辟:"在ECMAScript中,只有两种执行环境,全局环境和函数环境,每个函数都是一个执行环境,包括嵌套函数.换句话说,其他情况下即使变量声明在一对大括号中,在括号外部仍然可以访问这些变量".以下给出例子: 复制代码 代码如下: for(var i=0; i<5; i++) { var num = 20; // 在for语句中声明的变量 } alert(num); // 在for语句外部调用变量,仍然可以得到num的值 对异常语句也同

  • JS this作用域以及GET传输值过长的问题解决方法

    在开发项目的时候,前端遇到两个比较隐蔽的问题. 问题一.专IE7浏览器,IE URL参数过长问题,引发HTTP Status 122报错 原因:在IE6.8下没有什么问题,但在IE7就不兼容get参数过长,google上说"Don't use the GET method in Ajax Apps, if you can void it, because IE7 craps out with more than 2032 characters in a get string" 解决方法

  • 深入理解js函数的作用域与this指向

    函数的作用域与this指向是js中很重要的一部分,理清这点东西需要个逻辑,看看我的逻辑怎么样... 下面是个提纲,可以直接挑你感兴趣的条目阅读. • 函数的定义方式:直接定义(window下,内部定义),对象的方法,对象原型的方法: • 函数的调用方式:直接调用,call/apply,with • 对于直接定义的函数和对象的方法,作用域默认状态下是它的定义处的作用域链. • 对于直接定义的函数,this指向window. • 对于对象的方法,this指向实例化对象(对应于实例化对象默认返回thi

  • 深入理解Javascript中this的作用域

    大家在使用Javascript的时候经常被this这个家伙搞得晕头转向的.对大多数有OOP开发经验的开发人员来说this是当前作用域中引用普通元素的标识符,但是在Javascript中它却显得古灵精怪的,因为它不是固定不变的,而是随着它的执行环境的改变而改变.在Javascript中this总是指向调用它所在方法的对象. 举一个简单的例子: 复制代码 代码如下: function test(){ alert(this); } var obj=function(){ var name='testO

  • JS作用域闭包、预解释和this关键字综合实例解析

    本文实例分析了JS作用域闭包.预解释和this关键字.分享给大家供大家参考,具体如下: var number = 2; var obj = {number : 5, fn1 : ( function() { this.number *= 2; number=number*2; var number=3; return function() { this.number *= 2; number*=3; alert(number); } } )() }; var fn1 = obj.fn1; ale

  • JavaScript中变量的作用域详解

    JavaScript中变量的作用域详解

    一.变量的分类 在JavaScript中变量分为两种: 全局变量 局部变量 二.变量的作用域 1.局部变量的作用域 局部变量:在函数内部定义的变量称为局部变量,其作用域为该函数内部,在该函数外部不能被访问.看下面的例子: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" co

  • javascript中的this作用域详解

    Javascript中this的指向一直是困扰我很久的问题,在使用中出错的机率也非常大.在面向对象语言中,它代表了当前对象的一个引用,而在js中却经常让我觉得混乱,它不是固定不变的,而是随着它的执行环境的改变而改变. 在Javascript中this总是指向调用它所在方法的对象.因为this是在函数运行时,自动生成的一个内部对象,只能在函数内部使用. 下面我们分几种情况深入分析this的用法: 1.全局的函数调用 function globalTest() { this.name = "glob

  • JavaScript中eval()函数用法详解

    eval() 函数计算 JavaScript 字符串,并把它作为脚本代码来执行. 如果参数是一个表达式,eval() 函数将执行表达式.如果参数是Javascript语句,eval()将执行 Javascript 语句. 语法 复制代码 代码如下: eval(string) 参数 描述 string 必需.要计算的字符串,其中含有要计算的 JavaScript 表达式或要执行的语句. eval()函数用法详解: 此函数可能使用的频率并不是太高,但是在某些情况下具有很大的作用,下面就介绍一下eva

  • javascript中Array()数组函数详解

    在程序语言中数组的重要性不言而喻,JavaScript中数组也是最常使用的对象之一,数组是值的有序集合,由于弱类型的原因,JavaScript中数组十分灵活.强大,不像是Java等强类型高级语言数组只能存放同一类型或其子类型元素,JavaScript在同一个数组中可以存放多种类型的元素,而且是长度也是可以动态调整的,可以随着数据增加或减少自动对数组长度做更改. Array()是一个用来构建数组的内建构造器函数.数组主要由如下三种创建方式: array = new Array() array =

  • JavaScript中 ES6 generator数据类型详解

    1. generator简介 generator 是ES6引入的新的数据类型, 看上去像一个函数,除了使用return返回, yield可以返回多次. generator 由function* 定义, (注意*号), 2. 示例 函数无法保存状态, 有时需要全局变量来保存数字: 2.1 'use strict'; function next_id(){ var id = 1; while(id<100){ yield id; id++; } return id; } // 测试: var x,

  • javascript 中的继承实例详解

    javascript 中的继承实例详解 阅读目录 原型链继承 借用构造函数 组合继承 寄生组合式继承 后记 继承有两种方式:接口继承和实现继承.接口继承只继承方法签名,而实现继承则继承实际的方法. 由于函数没有签名,在ECMAScript中无法实现接口继承.ECMAScript只支持实现继承,而且实现继承主要依靠原型链来实现. 下面介绍几种js的继承: 原型链继承 原型链继承实现的本质是重写原型对象,代之以一个新类型的实例.代码如下: function SuperType() { this.pr

  • JavaScript中的函数式编程详解

    函数式编程 函数式编程是一种编程范式,是一种构建计算机程序结构和元素的风格,它把计算看作是对数学函数的评估,避免了状态的变化和数据的可变,与函数式编程相对的是命令式编程.我们有这样一个需求,给数组的每个数字加一: // 数组每个数字加一, 命令式编程 let arr = [1, 2, 3, 4]; let newArr = []; for(let i = 0; i < arr.length; i++){ newArr.push(arr[i] + 1); } console.log(newArr)

  • Javascript中window.name属性详解

    关于window下自带name的属性 不知道大家有没有发现这样一种情况 在控制台里直接输出未声明变量,正常情况应该是会报错的,而且声明未赋值的变量输出应该是undefined var a; //undefined b; //报错 但是偏偏就个别特例,就是name属性 其实window自身就带有name这个属性,在控制台输入window可以可以看到 打开 往下翻就可以找到 window.name直译过来是窗口名字,主要用于为超链接和表单设置目标(targets),什么意思呢,我们做个案例 建立两个

  • JavaScript中BOM和DOM详解

    目录 BOM(浏览器对象模型) 1. window 获取浏览器c窗口尺寸 2. screen 获取电脑屏幕大小 3. window 开启关闭窗口 4. 浏览器事件 5. location 6. history 7. navigator 获取浏览器相关信息 8. 弹窗 DOM (文档对象模型) DOM 分类 DOM对象 Document文档对象 element文档对象 DOM事件操作 鼠标事件 键盘事件 触屏事件 特殊事件 表单事件 浏览器兼容处理 兼容性写法,封装工具 BOM(浏览器对象模型)

  • Python中变量的作用域详解

    目录 1.作用于的概念 2.局部变量 3.全局变量 4.变量的查找 5.作用域中可变数据类型变量 6.多函数程序执行流程 总结 1.作用于的概念 变量作用域指的是变量生效的范围,在Python中一共有两种作用域. 全局作用域 全局作用域在程序执行时创建,在程序执行结束时销毁.所有函数以外的区域都是全局作用域.在全局作用域中定义的变量,都属于全局变量,全局变量可以在程序的任意位置被访问. 函数作用域 函数作用域在函数调用时创建,在调用结束时销毁.函数每调用一次就会产生一个新的函数作用域(不调用不产

随机推荐