javascript中的this作用域详解
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是调用一个数组。
javascript中的this作用域详解的更多相关文章
- javascript中=、==、===区别详解
javascript中=.==.===区别详解今天在项目开发过中发现在一个小问题.在判断n==""结果当n=0时 n==""结果也返回了true.虽然是个小问题 ...
- JavaScript中return的用法详解
JavaScript中return的用法详解 最近,跟身边学前端的朋友了解,有很多人对函数中的this的用法和指向问题比较模糊,这里写一篇博客跟大家一起探讨一下this的用法和指向性问题. 1定义 t ...
- javascript 中合并排序算法 详解
javascript 中合并排序算法 详解 我会通过程序的执行过程来给大家合并排序是如何排序的... 合并排序代码如下: <script type="text/javascript& ...
- JavaScript中this的用法详解
JavaScript中this的用法详解 最近,跟身边学前端的朋友了解,有很多人对函数中的this的用法和指向问题比较模糊,这里写一篇博客跟大家一起探讨一下this的用法和指向性问题. 1定义 thi ...
- JavaScript中数组Array方法详解
ECMAScript 3在Array.prototype中定义了一些很有用的操作数组的函数,这意味着这些函数作为任何数组的方法都是可用的. 1.Array.join()方法 Array.join()方 ...
- javascript中this,call,apply详解
javascript是一门解释型的语言,与很多面向对象语言相比有着不同特性,所以不能用面向对象的原理来理解this这个关键字. 在JS中,要真正理解this倒底指向哪个对象,必须先了解JS的作用域和原 ...
- JavaScript中的注释问题详解? 部分3
注释:解释代码的含义,浏览器中不执行. 方便其他程序员了解代码 ,也可以注释自己不需要的代码(开发过程中)! 1. 单行注释 // 用于一行代码上面 2.多行注释 /* */ 用于一段代码上面 或者是 ...
- javascript中的闭包closure详解
目录 简介 函数中的函数 Closure闭包 使用闭包实现private方法 闭包的Scope Chain 闭包常见的问题 闭包性能的问题 总结 简介 闭包closure是javascript中一个非 ...
- JavaScript中的async/await详解
1.前言 async函数,也就是我们常说的async/await,是在ES2017(ES8)引入的新特性,主要目的是为了简化使用基于Promise的API时所需的语法.async和await关键字 ...
随机推荐
- 北京Uber优步司机奖励政策(9月28日~10月4日)
用户组:优步北京人民优步A组(适用于9月28日-10月4日) 滴快车单单2.5倍,注册地址:http://www.udache.com/ 如何注册Uber司机(全国版最新最详细注册流程)/月入2万/不 ...
- 【LG1975】[国家集训队]排队
[LG1975][国家集训队]排队 题面 洛谷 题解 又是一个偏序问题 显然\(CDQ\) 交换操作不好弄怎么办? 可以看成两次删除两次插入 排序问题要注意一下 代码 #include <ios ...
- 相机-imu外参校准总结
1. 研究背景及相关工作 1)研究背景 单目视觉惯性slam是一种旨在跟踪移动平台的增量运动并使用来自单个车载摄像头和imu传感器的测量结果同时构建周围环境地图的技术.视觉相机和惯性测量单元(imu) ...
- productFlavors 差异打包问题
差异化打包: 1.dependencies compile 是不可以放到差异化的productFlavors里面的. 会报错: Error:(69, 0) Could not find method ...
- spring-boot、mybatis整合
一.MyBatis 是一款优秀的持久层框架,它支持定制化 SQL.存储过程以及高级映射.MyBatis 避免了几乎所有的 JDBC 代码和手动设置参数以及获取结果集.MyBatis 可以使用简单的 X ...
- 创龙DSP6748开发板LED闪烁-第一篇
1. 首先看下DSP6748的GPIO寄存器的文档,先看下框图,有这个框图,一目了然,输入和输出很清楚 2. 看下寄存器部分,对应上面的图,问题在于,DSP6748有多少个GPIO?最多144个,下一 ...
- 数据库路由中间件MyCat - 背景篇(2)
此文已由作者张镐薪授权网易云社区发布. 欢迎访问网易云社区,了解更多网易技术产品运营经验. MyCat的前世今生 如前文所说,Amoeba.Cobar.MyCat等属于同宗一脉.若Amoeba能继续下 ...
- Linux命令应用大词典-第16章 归档和压缩
16.1 tar:进行归档和压缩 16.2 gzip:压缩或解压缩gzip文件 16.3 gunzip:解压缩gzip文件 16.4 zcmp:比较gzip压缩文件 16.5 zdiff:比较gzip ...
- tpo-09 C1 Advice on a term paper's topic
第 1 段 1.Listen to a conversation between a student and her professor. 请听一段一名学生和教授讨论的对话. 第 2 段 1.Befo ...
- codeforces 269C Flawed Flow(网络流)
Emuskald considers himself a master of flow algorithms. Now he has completed his most ingenious prog ...