细说JavaScript中this指向问题
来源:互联网 发布:微信一秒语音制作软件 编辑:程序博客网 时间:2024/06/05 22:32
题记
JS中的this指向一直是个让人头疼的问题,不管是新手还是老手,不仔细深抠一下还真闹不明白this倒地咋回事。今天,我们就一起看一下this倒地咋回事,详解this指向原则,不再硬背,不再为了this发愁了。
前言
this是Javascript语言的一个关键字。
它代表函数运行时,自动生成的一个内部对象,只能在函数内部使用。随着函数使用场合的不同,this的值会发生变化。但是有一个总的原则,那就是this的指向在函数定义的时候是确定不了的,只有函数执行的时候才能确定this到底指向谁,实际上this的最终指向的是那个调用它所在函数的对象。
那么接下来我讲为大家细说探讨这个问题。
例一
function a(){ var user = "Zoro"; console.log(this.name); //undefined console.log(this); //Window } a(); window.a();//两种结果相同
如我们上文所说的this的最终指向的是那个调用它所在函数的对象,这里a其实是由window对象点出来的。
例二
var obj = { name: 'Zoro', f1: function () { console.log(this.name);//Zoro } }; obj.f1();
再次强调一点this的指向在函数定义的时候是确定不了的,只有函数执行的时候才能确定this到底指向谁;这个例子this所在的f1函数是由obj对象调用的,所以这里的this指向obj对象,
例三
如果要彻底的搞懂this必须看接下来的几个例子
var obj = { a: 5, b: { a: 10, fn: function () { console.log(this.a); //10 } } }; obj.b.fn();
不是说this的最终指向的是那个调用它所在函数的对象吗?这里为什么不指向obj对象呢?
这里需要补充三点:
- 如果一个函数中有this,但是它没有被上一级的对象所调用,那么this指向的就是window。
- 如果一个函数中有this,这个函数有被上一级的对象所调用,那么this指向的就是上一级的对象。
- 如果一个函数中有this,这个函数中包含多个对象,尽管这个函数是被最外层的对象所调用,this指向的也只是它上一级的对象。
看到这相信大家基本掌握了this指向的原则了吧,再碎碎念一遍:this的指向在函数定义的时候是确定不了的,只有函数执行的时候才能确定this到底指向谁,实际上this的最终指向的是那个调用它所在函数的对象。
下面给大家介绍this几种不用的使用情况
构造函数(new 关键字)情况
function Student() { this.name = 'Zoro'; } var s1 = new Student(); console.log(s1.name);//Zoro
这里之所以对象s1可以点出函数Student里面的name 是因为new关键字可以改变this的指向,将这个this指向对象s1.
//new 关键字执行的过程 1. 在函数体内创建一个空的对象. 2. 让当前this指向这个空的对象. 3. 通过this给当前空的对象添加键值对. 4. 返回已经添加好所有键值对的对象给外面的变量.
定时器里的this指向情况
var num = 0; function Obj() { this.num = 1; this.getNum1 = function () { console.log(this.num); }; this.getNum2 = function () { setInterval(function () { console.log(this.num); }, 1000); }; } var o = new Obj(); o.getNum1();//1 (o.num) o.getNum2();//0 (window.num)
o.getNum2()值之所以为0,也就是这里的this指向window,再拿出我们的this指向原则解释:this的指向在函数定义的时候是确定不了的,只有函数执行的时候才能确定this到底指向谁,实际上this的最终指向的是那个调用它所在函数的对象。
解: this.num所在的函数为定时器setInterval内的function () { console.log(this.num);},根据this指向原则当该函数被执行,this指向它的上一级对象。setInterval,又因setInterval是window点出了的,所以this指向window。
call、apply、bind改变指向情况
var num = 0; function Obj() { this.num = 1; this.getNum1 = function () { console.log(this.num); }; this.getNum2 = function () { setInterval(function () { console.log(this.num); }.bind(this), 1000);//利用bind将this绑定到这个函数上 }; } var o = new Obj(); o.getNum1();//1 (o.num) o.getNum2();//1 (o.num)
解释: bind()方法是Function.prototype上的一个方法,当被绑定函数调用时,bind方法会创建一个新函数,并将第一个参数作为新函数的运行时的this。 根据原则: 没使用bind方法前:被调用时:this.num指向的是调用它所在函数的对象,也就是window.setTimeout对象。 使用bind方法后:被调用时:将原来的this重新指向到→调用getSum2函数(就是新this所在的函数)的对象。这里构造函数,通过new调用,所以指向o对象
bind方法在该情况比较常用,当然如果使用call或apply方法来代替也行,得到的结果也是正确的,但是call和apply方法会在调用后马上执行,那样就没了延时的效果,定时器也就没有意义了。
总结
以上就是这篇文章的所有内容了,希望本文对大家的学习或工作上能带来一点帮助,如果有疑问,大家可以留言交流;小编水平有限,还请各位同行前辈多多斧正。
- 细说JavaScript中this指向问题
- javascript中this指向问题
- javascript中this的指向问题
- javascript中this指向问题的综合
- JavaScript中this的指向问题
- JavaScript中this的指向问题
- javascript中this对象的指向问题
- JavaScript中this的指向问题
- JavaScript中this指向
- javascript This指向问题简述
- javascript 的 this 指向问题
- javascript 中 this 的指向
- JavaScript中 this 的指向
- JavaScript中this的指向
- javascript中this的指向
- javaScript中this的指向
- 简明扼要javascript中this指向。
- Javascript中this的指向
- 数据结构实验之图论十:判断给定图是否存在合法拓扑序列
- 【Scikit-Learn 中文文档】26 密度估计
- cookie 和session 的区别详解
- jsp存储相关内容
- CentOS 6.5 配置IP地址的三种方法
- 细说JavaScript中this指向问题
- 常用排序算法之希尔排序
- Python学习日记 第三天
- 题解
- Codeforces897B-Chtholly's request
- 设计模式初探之工厂方法模式
- Spring文件AOP编程
- mysql 存储过程调用 mybatis/hibernate
- ubuntu vim命令