资讯专栏INFORMATION COLUMN

学习js中的'this'关键字

3403771864 / 392人阅读

  在JavaScript中‘this’关键字是一个非常重要的概念,我们虽然知道它重要,但它也十分的晦涩难懂,也给我们学习造成不小的困扰。

  什么是'this'关键字

  'this'关键字是为每个执行上下文(每个函数)创建的一个特殊变量;所以一般来说,在使用'this'关键字的函数中,'this'永远是取其所有者的值。总结一句话是该函数的所有者。这样的抽象,很难理解,那么你现在只要记住'this'关键字的值不是静态的,所以它总是不一样。它的值取决于函数是怎么被调用的,这个是有在实际调用中才可以。就比如我们将x=4;那么x的值就是4,但是'this'关键字的值取决于函数的调用方式;所以现在我们来分析四种不同的调用函数的方式。

  四种方式---1.调用函数的第一种方法是:将函数作为一种方法

  Example: this代表一个对象

  const bruce={
  name:'bruce',
  birthYear:2001,
  calcAge:function () {
  return 2022-this.birthYear
  }
  };
  console.log(bruce.calcAge());//21`

  在上面的bruce对象里面有一个calcAge()函数,这个函数是一个被附加到了bruce对象里面的函数。所以当我们调用一个方法的时候,calcAge()里面的this将会指向这个对象;换句话来说,this所指的bruce这个对象正在调用这个方法。在代码的最后一行,我们调用了这个函数;在calcAge()函数里面我们使用了this,那么这个this的值应该是什么呢?没错,这个this指的是bruce;所以this.birrhYear==bruce.birthYear==2001。

  四种方式---2.调用函数的第二种方法是: 简单的调用函数,不将函数作为方法,不附加到任何对象里面

  Example: 此时this=undefined

  const calcAge=function(birthYear){
  console.log(2022-birthYear);
  //查看此函数中的this
  console.log(this);
  }
  calcAge(2001)

  结果如下:

  像这样常规的调用某个函数,只是简单的调用某个函数,并没有将这个函数添加到任何对象上面;可以这样说这个this没有主人,就是this指的就是window 。但是在严格模式下全局对象无法进行默认绑定,所以导致this只能绑定在undefined上。这就是this的默认绑定规则:

  this所处的词法作用域在哪里生效this就绑定在哪里。

  在严格模式下,全局对象无法进行默认绑定,所以导致this只能绑定在undefined上

  四种方式---3.调用函数的第三种方法是:调用箭头函数

  箭头函数没有自己的this关键字

  Example:

  //3.箭头函数的调用
  const calcAge= birthYear => {
  console.log(2022-birthYear);
  //查看此函数中的this
  console.log(this);
  }
  calcAge()

  执行结果:

  因为箭头函数没有this,所以在箭头函数里面的this是它外层作用域里面的非箭头函数的this,而本例中外层作用域是window,所以这里的this指的是window

  四种方式---4.调用函数的第四种方式:该函数被调用作为事件监听器

  那么此时的this将会指向处理程序函数所附加到的DOM元素

  深入理解this指向的是调用该方法的对象

  这就意味着this关键字不会简单的指向在我们编写方法的对象上面。

  在第一种函数调用的方式中,因为bruce是调用calaAge()方法的对象,所以此时this是bruce; 那么现在创建一个新对象:

  const lucy={
  birthYear:2006,
  }

  我们都知道函数只是一个值,所以我们可以这样:

  const lucy={
  birthYear:2006,
  }
  lucy.calcAge=bruce.calcAge
  console.log(lucy);

  结果:

  现在lucy里面也有了一个calcAge()方法,我们再来执行lucy.calcAge()

  const lucy={
  birthYear:2006,
  }
  lucy.calcAge=bruce.calcAge
  console.log(lucy);
  lucy.calcAge()

  结果为:

  这就说明lucy对象调用calcAge()方法时,此时函数calcAge()方法里面的this指向的是lucy, 即调用该方法的对象。所以this关键字如上面所说,它不是静态的,而是取决于函数的调用方式。

  现在我们来定义一个常量y,并将bruce.calcAge()函数赋给它

  const y=bruce.calcAge
  y()

  结果为:

  上面代码中可以看到,当y()只是作为一个普通函数来进行调用,this是window

  小结

  对于很多初学者,this关键字是一个难点,其实我们可以简单总结就是:

  1.如果函数是以普通函数(非构造函数)的形式调用,this指的永远都是window

  2.如果函数是以方法的形式调用,this就是调用方法的那个对象


文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/128194.html

相关文章

  • JS学习this键字

    摘要:关键字关键字是什么关键字是中最复杂的机制之一。它是一个很特别的关键字,被定义在所有函数的作用域中。可以把这条规则看作是无法应用其他规则时的默认规则。 this关键字 this关键字是什么 this关键字是JavaScript中最复杂的机制之一。它是一个很特别的关键字,被定义在所有函数的作用域中。但是即使是非常有经验的JavaScript开发者也很难说清它到底指向什么。1.this被定义...

    Java_oldboy 评论0 收藏0
  • ES6,你不得不学!

    摘要:但是,的本质仍然是函数,是构造函数的另外一种写法。报错原生构造函数的继承对于一些原生的构造函数,比如,,,等,在是无法通过方法实现原生函数的内部属性,原生函数内部的无法绑定,内部属性获得不了。 在没有学习 ES6 之前,学习 React,真的是一件非常痛苦的事情。即使之前你对 ES5 有着很好的基础,包括闭包、函数、原型链和继承,但是 React 中已经普遍使用 ES6 的语法,包括 ...

    CKJOKER 评论0 收藏0
  • [译] 在你学习 React 之前必备的 JavaScript 基础

    摘要:前言在理想的状态下,你可以在深入了解之前了解和开发的所有知识。继承另一个类的类,通常称为类或类,而正在扩展的类称为类或类。这种类型的组件称为无状态功能组件。在你有足够的信心构建用户界面之后,最好学习。 原文地址:JavaScript Basics Before You Learn React 原文作者: Nathan Sebhastian 写在前面 为了不浪费大家的宝贵时间,在开...

    Chaz 评论0 收藏0
  • 记一次两小时的js编程学习

    摘要:布尔值和两个值,与其他语言中似乎没有任何区别以及特异所在。注意点中有类假的概念,即便不是也会被当做处理,请注意下面几个值布尔值未定义空字符串面向对象很遗憾地说,设计的时候肯定没有考虑。 JavaScript 特性 1.弱类型语言2.解释型语言3.客户端语言对于有学习Java、C以及Python一类的人来说,最熟悉的莫过于这些都是强类型语言。它们严格的遵守自身的规定,永远也不会有下面的情...

    Miracle_lihb 评论0 收藏0

发表评论

0条评论

3403771864

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<