欢迎来到站长教程网!

Javascript/Ajax

当前位置:主页 > 网页制作 > Javascript/Ajax >

详解JavaScript中的this指向问题

时间:2021-05-05|栏目:Javascript/Ajax|点击:

题记

JS中的this指向一直是个让初学者头疼的问题。本日,我们就一起来瞅瞅this倒地是咋回事,具体说说this指向原则,以后不再为了this指向操碎了心。

开篇

首先我们都知道this是Javascript语言的一个要害字。

它代表函数运行时,自动生成的一个内部工具,只能在函数内部利用。跟着函数利用场所的差异,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工具呢?

这里需要增补三点:

  1. 假如一个函数中有this,可是它没有被上一级的工具所挪用,那么this指向的就是window。
  2. 假如一个函数中有this,这个函数有被上一级的工具所挪用,那么this指向的就是上一级的工具。
  3. 假如一个函数中有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,又因setIntervalwindow点出了的,所以this指向window

callapplybind 改变指向环境

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。

按照原则:

上一篇:关于element的表单组件整理条记

栏    目:Javascript/Ajax

下一篇:JavaScript事件观念详解(区分静态注册和动态注册)

本文标题:详解JavaScript中的this指向问题

本文地址:www.jiaocheng88.com.cn/JavaScript/61991.html

广告投放 | 联系我们 | 版权申明

重要申明:本站所有的文章、图片、评论等,均由网友发表或上传并维护或收集自网络,属个人行为,与本站立场无关。

如果侵犯了您的权利,请与我们联系,我们将在24小时内进行处理、任何非本站因素导致的法律后果,本站均不负任何责任。

联系QQ:584415406 | 邮箱:584415406#qq.com(#换成@)

Copyright © 2015-2020 小白站长教程网 版权所有 苏ICP备20040415号-3