(编辑:jimmy 日期: 2024/11/9 浏览:2)
在学习javascript中我们往往会被this的指向问题弄的头昏转向,今天我们就来学习一下this的指向问题,和改变this指向的方法。
一.this的指向问题
在学习this的指向问题之前我们需要明白两点:
1:this永远指向一个对象;
2:this的指向完全取决于函数调用的位置;
针对上面第一点我们能很好理解,因为在javascript中一切都是对象。第二点其实也是好理解,当函数调用的位置不同是,this的指向的对象就不同,所以可以说this的指向可以动态变换的,下面我们先通过一个简单的例子来看一下this的指向是变换的
<script> function fun(){ console.log(this.name); } var change={ name:'hello', f:fun } var name ='world' var result=change.f()//hello fun();//world </script>
通过上述例子我们可以很清楚的看到this的指向的变化,因为有一个函数在对象change里面,所以this就是指向的函数外部的对象,所以输出了hello。
想必看完上述例子后大家对this的动态指向切换有了一定的了解。
那么接下来,我们对this使用最频繁的几种情况做一个总结,最常见的基本就是以下3种:
对象中的方法,事件绑定 ,构造函数 ,定时器
前两个就不必多说了,我们看一下定时器中的this指向问题,
var obj = { fun:function(){ this ; } } "htmlcode">// 创建一个含有bar方法的obj对象, // bar返回一个函数, // 这个函数返回this, // 这个返回的函数是以箭头函数创建的, // 所以它的this被永久绑定到了它外层函数的this。 // bar的值可以在调用中设置,这反过来又设置了返回函数的值。 var obj = { bar: function() { var x = (() => this); return x; } }; // 作为obj对象的一个方法来调用bar,把它的this绑定到obj。 // 将返回的函数的引用赋值给fn。 var fn = obj.bar(); // 直接调用fn而不设置this, // 通常(即不使用箭头函数的情况)默认为全局对象 // 若在严格模式则为undefined console.log(fn() === obj); // true // 但是注意,如果你只是引用obj的方法, // 而没有调用它 var fn2 = obj.bar; // 那么调用箭头函数后,this指向window,因为它从 bar 继承了this。 console.log(fn2()() == window); // truecall和apply方法:将一个对象作为call或者apply的第一个参数,this将会被绑定到这个参数对象上
var obj = {parent:'男'}; var parent = '28'; function child(obj){ console.log(this.parent); } child(); // 28 child.call(obj); //男 child.apply(obj); //男以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。