十年网站开发经验 + 多家企业客户 + 靠谱的建站团队
量身定制 + 运营维护+专业推广+无忧售后,网站问题一站解决
JavaScript中this指向什么?很多新手对此不是很清楚,为了帮助大家解决这个难题,下面小编将为大家详细讲解,有这方面需求的人可以来学习下,希望你能有所收获。
创新互联是一家集网站建设,榆阳企业网站建设,榆阳品牌网站建设,网站定制,榆阳网站建设报价,网络营销,网络优化,榆阳网站推广为一体的创新建站企业,帮助传统企业提升企业形象加强企业竞争力。可充分满足这一群体相比中小企业更为丰富、高端、多元的互联网需求。同时我们时刻保持专业、时尚、前沿,时刻以成就客户成长自我,坚持不断学习、思考、沉淀、净化自己,让我们为更多的企业打造出实用型网站。它代表函数运行时,自动生成的一个内部对象,只能在函数内部使用。随着函数使用场合的不同,this的值会发生变化。但是有一个总的原则,那就是this的指向在函数定义的时候是确定不了的,只有函数执行的时候才能确定this到底指向谁,实际上this的最终指向的是那个调用它所在函数的对象。 那么接下来我们一步步探索下这个问题。
function a() { var user = "清蒸胖头鱼"; console.log(this.name); //undefined console.log(this); //Window } a(); window.a();//两种结果相同
如我们上文所说的this的最终指向的是那个调用它所在函数的对象,这里a其实是由window对象点出来的。
var obj = { name: '清蒸胖头鱼', f1: function () { console.log(this.name);//清蒸胖头鱼 } }; 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的最终指向的是那个调用它所在函数的对象。
构造函数(new 关键字)情况
function Student() { this.name = '清蒸胖头鱼'; } var s1 = new Student(); console.log(s1.name);// 清蒸胖头鱼
这里之所以对象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
方法会在调用后马上执行,那样就没了延时的效果,定时器也就没有意义了。
看完上述内容是否对您有帮助呢?如果还想对相关知识有进一步的了解或阅读更多相关文章,请关注创新互联行业资讯频道,感谢您对创新互联网站建设公司,的支持。