首页 > 编程语言> 文章详细

javascript中的this分析

2022-08-13 01:02:01 阅读：204 来源： 互联网

标签：分析 console name javascript joey Person 上下文函数

函数中的this

在标准函数中，this引用的是把函数当成方法调用的上下文对象，这时候通常称其为this值（在网页的全局上下文中调用函数时，this指向window）。

这个this值到底引用哪个对象，必须到函数被调用的时候才能确定，因此这个值在代码执行过程中可能会变。

箭头函数中的this

在箭头函数中，this引用的是定义箭头函数的上下文。也可以说this值取决于该函数外部非箭头函数的this值，且不能通过call(), apply(), bind() 方法来改变this值。

类中的this

类的声明基本上还是基于自定义类型声明的语法糖

class Person {
    constructor(name) {
        this.name = name;
    }
    getName() {
      return this.name
   }
}

typeof Person // function

等价于

function Person(name) {
    this.name = name
}
Person.prototype.getName = function() {
  return this.name
}

class中的方法，除了静态方法，都是原型链上的，其中的name属性则是自由属性，不会出现在原型上，且只能在类的构造函数或方法中创建。

因为方法是原型上的，所以函数中的this指向的上下文就是实例对象。

const joey = new Person('joey')
joey.getName();

//getName中的this，指向的是joey实例。

在react中

class ButtonDemo extends PureComponent {
  componentDidMount() {
    console.log(this); 实例
    console.log(typeof this); object
    console.log(this instanceof ButtonDemo); true
  }

  hello() {
    console.log(this); // undefined
  }

  render() {
    return (<Button block={true} onClick={this.hello}>Click Me</Button>);
  }
}

在react中，hello虽然是ButtonDemo实例的方法，但是调用的上下文是在Button的onClick方法中，这边的上下文指向已经不是ButtonDemo的实例了，最终点击后打印出来的this是undefined。

标签：分析,console,name,javascript,joey,Person,上下文,函数
来源： https://www.cnblogs.com/joey-home/p/16581821.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

javascript中的this分析

函数中的this

箭头函数中的this

类中的this

在react中