极乐门资源网 Design By www.ioogu.com

在学习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); // true

call和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); //男

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。

标签:
javascript,this,指向

极乐门资源网 Design By www.ioogu.com
极乐门资源网 免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
极乐门资源网 Design By www.ioogu.com

评论“javascript this指向相关问题及改变方法”

暂无javascript this指向相关问题及改变方法的评论...

RTX 5090要首发 性能要翻倍!三星展示GDDR7显存

三星在GTC上展示了专为下一代游戏GPU设计的GDDR7内存。

首次推出的GDDR7内存模块密度为16GB,每个模块容量为2GB。其速度预设为32 Gbps(PAM3),但也可以降至28 Gbps,以提高产量和初始阶段的整体性能和成本效益。

据三星表示,GDDR7内存的能效将提高20%,同时工作电压仅为1.1V,低于标准的1.2V。通过采用更新的封装材料和优化的电路设计,使得在高速运行时的发热量降低,GDDR7的热阻比GDDR6降低了70%。