this詞法

孟繁貴發表於2018-11-14

1、示例程式碼

<!DOCTYPE html>
<html lang="zh">

    <head>
        <meta charset="UTF-8" />
        <title>詞法作用域</title>
    </head>

    <body>

        <script type="text/javascript">
            //方法一：self通過使用詞法作用域和閉包
            //          var obj = {
            //              count:0,
            //              cool:function coolFn(){
            //                  var self= this;
            //                  if(self.count<1){
            //                      setTimeout(function timer(){
            //                          self.count++;
            //                          console.log(self.count);
            //                      },1000)
            //                  }
            //              }
            //          };
            //方法二：使用箭頭函式
            //          var obj = {
            //              count:0,
            //              cool:function coolFn(){
            //                  if(this.count<1){
            //                      setTimeout(()=>{
            //                          this.count++;
            //                          console.log(this.count);
            //                      },1000)
            //                  }
            //              }
            //          };
            //方法三：使用bind()
            var obj = {
                count: 0,
                cool: function coolFn() {
                    if(this.count < 1) {
                        setTimeout(function timer() {
                            this.count++; //this是安全的，因為使用了bind
                            console.log(this.count);
                        }.bind(this), 1000)
                    }
                }
            };
            obj.cool();
        </script>
    </body>

</html>

2、解決this繫結問題

（1）最常用的是方法一

（2）箭頭函式：不夠理想，函式是匿名的；同時混淆了this繫結規則和詞法作用域規則。

 

var sum = (num1, num2) => (num1 + num2);

 

與

var sum = (num1, num2) => {return num1 + num2;}

效果一致。

 

相關文章