Jump to content
  • Hello visitors, welcome to the Hacker World Forum!

    Red Team 1949  (formerly CHT Attack and Defense Team) In this rapidly changing Internet era, we maintain our original intention and create the best community to jointly exchange network technologies. You can obtain hacker attack and defense skills and knowledge in the forum, or you can join our Telegram communication group to discuss and communicate in real time. All kinds of advertisements are prohibited in the forum. Please register as a registered user to check our usage and privacy policy. Thank you for your cooperation.

    TheHackerWorld Official

javascript中的this分析

 Share


KaiWn

Recommended Posts

    • 函数中的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。

Link to post
Link to comment
Share on other sites

 Share

discussion group

discussion group

    You don't have permission to chat.
    • Recently Browsing   0 members

      • No registered users viewing this page.
    ×
    ×
    • Create New...