转js中this指向的简明解答
JS中的this对象详解
JS中this关键字很常见,但是它似乎变幻莫测,让人抓狂。这篇文章就来揭示其中的奥秘。
借助阮一峰老师的话:它代表函数运行时,自动生成的一个内部对象,只能在函数内部使用。这句话看似平常,可是要非常注意三个字:“运行时”,这说明this关键字只与函数的执行环境有关,而与声明环境没有关系。也就是这个this到底代表的是什么对象要等到函数运行时才知道,有点类似函数定义时的参数列表只在函数调用时才传入真正的对象。理解了这一点对后面this关键字规律的掌握有很大帮助。
this关键字虽然会根据环境变化,但是它始终代表的是调用当前函数的那个对象。这就引出了JS中函数调用的问题。在JS中调用函数的模式可以分为4种: 方法调用模式、函数调用模式、构造器调用模式、apply调用模式。这些模式在如何初始化关键参数this上存在差异。
一、方法调用模式
当函数被保存为一个对象的属性时,它就可称为这个对象的方法。当一个方法被调用时,this被绑定到这个对象上。如果调用表达式包含一个提取属性的动作(. 或 []),那么它被称为方法调用。例如:
1
2
3
4
5
6
7
8
|
var name = "window" ; var obj = { name: "kxy" , sayName: function () { console.log( this .name); } }; obj.sayName(); //kxy |
sayName函数作为对象obj的方法调用,所以函数体中的this就代表obj对象。
二、函数调用模式
当一个函数并非一个对象的属性时,那么它就是被当做函数来调用的。在此种模式下,this被绑定为全局对象,在浏览器环境下就是window对象。例如:
1
2
3
4
5
|
var name = "window" ; function sayName() { console.log( this .name); } sayName(); |
sayName以函数调用模式调用,所以函数体中的this代表window对象。
三、构造函数模式
如果在一个函数前面加上new关键字来调用,那么就会创建一个连接到该函数的prototype成员的新对象,同时,this会被绑定到这个新对象上。这种情况下,这个函数就可以成为此对象的构造函数。例如:
1
2
3
4
5
|
function Obj() { this .name = "kxy" ; } var person = new Obj(); console.log(person.name); //kxy |
Obj作为构造函数被调用,函数体内的this被绑定为新创建的对象person。
四、apply调用模式
在JS中,函数也是对象,所有函数对象都有两个方法:apply和call,这两个方法可以让我们构建一个参数数组传递给调用函数,也允许我们改变this的值。例如:
1
2
3
4
5
6
7
8
9
10
|
var name = "window" ; var person = { name: "kxy" }; function sayName() { console.log( this .name); } sayName(); //window sayName.apply(person); //kxy sayName.apply(); //window |
当以函数调用模式调用sayName时,this代表window;当用apply模式调用sayName,并给它传入的第一个参数为person时,this被绑定到person对象上。如果不给apply传入任何参数,则this代表window。
自此,函数调用的4种模式就都介绍完了,this的绑定规律也就是以上几种,万变不离其宗。为了简单明了的介绍4种模式,以上的例子都比较简单,那么下面就跟我一起做一个稍复杂的练习,检验下自己是否真正掌握了this绑定对象的方法吧!
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
|
var name = "window" ; function showName() { console.log( this .name); } var person1 = { name: "kxy" , sayName: showName } var person2 = { name: "Jake" , sayName: function () { var fun = person1.sayName; fun(); } } person1.sayName(); //kxy person2.sayName(); //window |
首先心中时刻提醒自己this是在函数执行时被绑定的,不要被任何赋值语句打乱阵脚。
先看第一个执行语句:person1.sayName(); 首先确定这是方法调用模式,对象为person1,再看sayName被赋值为全局函数对象showName,在showName执行时,this绑定的是person1,所以结果为”kxy”。
再看第二个执行语句:person2.sayName(); 这还是方法调用模式,对象为person2,调用的是它的sayName方法。再看sayName函数体,发现函数体最终执行的函数是fun,fun是用函数调用模式调用的。而fun最终也被赋值为showName函数,因为fun是用函数调用模式调用的,所以这里的this绑定为window,结果为”window“。
转js中this指向的简明解答的更多相关文章
- JavaScript面向对象(一)——JS OOP基础与JS 中This指向详解
前 言 JRedu 学过程序语言的都知道,我们的程序语言进化是从"面向机器".到"面向过程".再到"面向对象"一步步的发展而来.类似于 ...
- 关于js中this指向的理解总结!
关于js中this指向的理解! this是什么?定义:this是包含它的函数作为方法被调用时所属的对象. 首先,this的指向在函数定义的时候是确定不了的,只有函数执行的时候才能确定this到底指向谁 ...
- 前端js中this指向及改变this指向的方法
js中this指向是一个难点,花了很长时间来整理和学习相关的知识点. 一. this this是JS中的关键字, 它始终指向了一个对象, this是一个指针; 参考博文: JavaScript函数中的 ...
- js中this指向的三种情况
js中this指向的几种情况一.全局作用域或者普通函数自执行中this指向全局对象window,普通函数的自执行会进行预编译,然后预编译this的指向是window //全局作用域 console.l ...
- JS中this指向的更改
JS中this指向的更改 JavaScript 中 this 的指向问题 前面已经总结过,但在实际开中, 很多场景都需要改变 this 的指向. 现在我们讨论更改 this 指向的问题. call更改 ...
- 关于js中this指向的总结
js中this指向问题一直是个坑,之前一直是懵懵懂懂的,大概知道一点,但一直不知道各种情况下指向有什么区别,今天亲自动手测试了下this的指向. 1.在对象中的this对象中的this指向我们创建的对 ...
- 如何理解JS中this指向的问题
首先,用一句话解释this,就是:指向执行当前函数的对象. 当前执行,理解一下,也就是说this的指向在函数定义的时候是确定不了的,只有函数执行的时候才能确定.this到底指向谁?this的最终指向的 ...
- 关于js中this指向的问题
this的绑定规则有4种 默认绑定 隐性绑定 显性绑定 new绑定 this绑定优先级 new 绑定 > 显性绑定 > 隐性绑定 > 默认绑定 1.如果函数被new 修饰 this绑 ...
- js中this指向学习总结
在面向对象的语言中(例如Java,C#等),this 含义是明确且具体的,即指向当前对象.一般在编译期绑定. 然而js中this 是在运行期进行绑定的,这是js中this 关键字具备多重含义的本质 ...
随机推荐
- c# 利用结构体获取json数据
最近做微信支付,要获取用户的openid,调用接口后返回的是json格式的数据,我想在c#后台把数据逐一取出,网上查了查,找到以下方法: 1.首先调用接口,要有一个post数据到指定url并返回数据的 ...
- 配置SSH框架的心得
开发工具为myeclipse,开发工具自带struts2,hibernate,spring框架的导入.在新建的项目上右击Myeclipse->Project Facets->Install ...
- jQuery中时间戳和日期的相互转换
在项目中经常会使用时间戳和日期的相互转换,可以参考如下代码 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 2 ...
- iptables--简单的防火墙
iptables--简单的防火墙 如果你执行iptables --list你将看到防火墙上的可用规则.下例说明当前系统没有定义防火墙,你可以看到,它显示了默认的filter表,以及表内默认的input ...
- C#遍历字典
C#遍历字典 foreach (KeyValuePair<int, Color> kvp in dic) lst.Add(kvp.Value);
- arcgis基于地形数据的坡度分析
高程.坡度和坡向是小班中非常重要的因子,坡度对水土保持规划设计具有决定性的作用,是土地利用规划和治理措施配置首先要考虑的因素.如何利用地形数据对坡度进行分析呢,本文即将揭晓. 软件准备: locasp ...
- xhprof学习笔记
一.简介 XHProf 是一个轻量级的分层性能测量分析器. 在数据收集阶段,它跟踪调用次数与测量数据,展示程序动态调用的弧线图. 它在报告.后期处理阶段计算了独占的性能度量,例如运行经过的时间.CPU ...
- Spring异常抛出触发事务回滚
Spring.EJB的声明式事务默认情况下都是在抛出unchecked exception后才会触发事务的回滚 /** * 如果在spring事务配置中不为切入点(如这里的切入点可以定义成test*) ...
- Java上面出现这个错误如何解决关于XML的
Java上面出现这个错误如何解决关于XML的 2015-01-07 14:49 hejiashun11325 | 分类:JAVA相关 | 浏览265次 The type org.xmlpull.v1. ...
- 39、重新复习js之三
1.盒子模型典型标签 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http:// ...