摘要：寫在前面中的作用域和上下文是這門語言的獨到之處，每個函數有不同的變量上下文和作用域。不可以當作構造函數，也就是說，不可以使用命令，否則會拋出一個錯誤。正是因為它沒有，所以也就不能用作構造函數。

JavaScript中的作用域scope 和上下文 context 是這門語言的獨到之處，每個函數有不同的變量上下文和作用域。這些概念是JavaScript中一些強大的設計模式的后盾。在ES5規范里，我們可以遵循一個原則——每個function內的上下文this指向該function的調用方。比如：

var Module = {
    name: "Jafeney",
    first: function() {
        console.log(this);   // this對象指向調用該方法的Module對象
        var second = (function() {
            console.log(this)  // 由于變量提升，this對象指向Window對象
        })()
    },
    init: function() {
        this.first()
    }
}

Module.init()

但是，在ES6規范中，出現了一個逆天的箭頭操作符 => ，它可以替代原先ES5里function的作用，快速聲明函數。那么，在沒有了function關鍵字，箭頭函數內部的上下文this是怎樣一種情況呢？

在阮一峰老師的《ECMAScript 6 入門》 中，對箭頭函數的做了如下介紹：

ES6 允許使用“箭頭”=> 定義函數。

var f = v => v;
//上面的箭頭函數等同于：
var f = function(v) {
  return v;
};

如果箭頭函數不需要參數或需要多個參數，就使用一個圓括號代表參數部分

var f = () => 5;
// 等同于
var f = function () { return 5 };
var sum = (num1, num2) => num1 + num2;
// 等同于
var sum = function(num1, num2) {
  return num1 + num2;
};

如果箭頭函數的代碼塊部分多于一條語句，就要使用大括號將它們括起來，并且使用return語句返回（重要）

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

由于大括號被解釋為代碼塊，所以如果箭頭函數直接返回一個對象，必須在對象外面加上括號（重要）

var getTempItem = id => ({ id: id, name: "Temp" });

箭頭函數可以與變量解構結合使用

const full = ({ first, last }) => first + " " + last;
// 等同于
function full(person) {
  return person.first + " " + person.last;
}

箭頭函數使得表達更加簡潔

const isEven = n => n % 2 == 0;
const square = n => n * n;

上面代碼只用了兩行，就定義了兩個簡單的工具函數。如果不用箭頭函數，可能就要占用多行，而且還不如現在這樣寫醒目。

箭頭函數的一個用處是簡化回調函數

// 正常函數寫法
[1,2,3].map(function (x) {
  return x * x;
});

// 箭頭函數寫法
[1,2,3].map(x => x * x);

函數體內的this對象，就是定義時所在的對象，而不是使用時所在的對象。

不可以當作構造函數，也就是說，不可以使用new命令，否則會拋出一個錯誤。

不可以使用arguments對象，該對象在函數體內不存在。如果要用，可以用Rest參數代替。

不可以使用yield命令，因此箭頭函數不能用作Generator函數。

ES5規范中，this對象的指向是可變的，但是在ES6的箭頭函數中，它卻是固定的。

function foo() {
  setTimeout(() => {
    console.log("id:", this.id);
  }, 100);
}

var id = 21;

foo.call({ id: 42 });   // 輸出 id: 42

注意：上面代碼中，setTimeout的參數是一個箭頭函數，這個箭頭函數的定義生效是在foo函數生成時，而它的真正執行要等到100毫秒后。如果是普通函數，執行時this應該指向全局對象window，這時應該輸出21。但是，箭頭函數導致this總是指向函數定義生效時所在的對象（本例是{id: 42}），所以輸出的是42。

this指向的固定化，并不是因為箭頭函數內部有綁定this的機制，實際原因是箭頭函數根本沒有自己的this，導致內部的this就是外層代碼塊的this。正是因為它沒有this，所以也就不能用作構造函數。所以，箭頭函數轉成ES5的代碼如下：

// ES6
function foo() {
  setTimeout(() => {
    console.log("id:", this.id);
  }, 100);
}

// ES5
function foo() {
  var _this = this;

  setTimeout(function () {
    console.log("id:", _this.id);
  }, 100);
}

上面代碼中，轉換后的ES5版本清楚地說明了，箭頭函數里面根本沒有自己的this，而是引用外層的this。

// 請問下面有幾個this 

function foo() {
  return () => {
    return () => {
      return () => {
        console.log("id:", this.id);
      };
    };
  };
}

var f = foo.call({id: 1});

var t1 = f.call({id: 2})()(); // 輸出 id: 1
var t2 = f().call({id: 3})(); // 輸出 id: 1
var t3 = f()().call({id: 4}); // 輸出 id: 1

上面代碼之中，其實只有一個this，就是函數foo的this，所以t1、t2、t3都輸出同樣的結果。因為所有的內層函數都是箭頭函數，都沒有自己的this，它們的this其實都是最外層foo函數的this。另外，由于箭頭函數沒有自己的this，所以也不能用call()、apply()、bind()這些方法去改變this的指向。

// 請問下面代碼執行輸出什么

(function() {
  return [
    (() => this.x).bind({ x: "inner" })()
  ];
}).call({ x: "outer" });

上面代碼中，箭頭函數沒有自己的this，所以bind方法無效，內部的this指向外部的this。所以上面的代碼最終輸出 ["outer"]。

箭頭函數可以綁定this對象，大大減少了顯式綁定this對象的寫法（call、apply、bind）。但是，箭頭函數并不適用于所有場合，所以ES7提出了“函數綁定”（function bind）運算符，用來取代call、apply、bind調用。雖然該語法還是ES7的一個提案，但是Babel轉碼器已經支持。

函數綁定運算符是并排的兩個雙冒號（::），雙冒號左邊是一個對象，右邊是一個函數。該運算符會自動將左邊的對象，作為上下文環境（即this對象），綁定到右邊的函數上面。

foo::bar;
// 等同于
bar.bind(foo);

foo::bar(...arguments);
// 等同于
bar.apply(foo, arguments);

const hasOwnProperty = Object.prototype.hasOwnProperty;
function hasOwn(obj, key) {
  return obj::hasOwnProperty(key);
}

如果雙冒號左邊為空，右邊是一個對象的方法，則等于將該方法綁定在該對象上面。

var method = obj::obj.foo;
// 等同于
var method = ::obj.foo;

let log = ::console.log;
// 等同于
var log = console.log.bind(console);

由于雙冒號運算符返回的還是原對象，因此可以采用鏈式寫法。

// 例一
import { map, takeWhile, forEach } from "iterlib";

getPlayers()
::map(x => x.character())
::takeWhile(x => x.strength > 100)
::forEach(x => console.log(x));

// 例二
let { find, html } = jake;

document.querySelectorAll("div.myClass")
::find("p")
::html("hahaha");

目前React的編寫風格已經全面地啟用了ES6和部分ES7規范，所以很多ES6的坑在React里一個個浮現了。本篇重點介紹 this，也是近期跌得最疼的一個。

還是用具體的例子來解釋吧，下面是我 Royal 項目里一個Table組件（Royal正在開發中，歡迎fork貢獻代碼 ^_^）

import React, { Component } from "react"
import Checkbox from "../../FormControls/Checkbox/" 
import "./style.less"

class Table extends Component {
    constructor(props) {
        super(props)
        this.state = {
            dataSource: props.dataSource || [],
            columns: props.columns || [],
            wrapClass: props.wrapClass || null,
            wrapStyle: props.wrapStyle || null,
            style: props.style || null,
            className: props.className || null,
        }
        this.renderRow = props.renderRow || null
    }

    onSelectAll() {
        for (let ref in this.refs) {
            if (ref!=="selectAll") {
                this.refs[ref].setState({checked:true})
            }
        }
    }

    offSelectAll() {
        for (let ref in this.refs) {
            if (ref!=="selectAll") {
                this.refs[ref].setState({checked:false})
            }
        }
    }

    _renderHead() {
        return this.state.columns.map((item,i) => {
            return [{i===0?this.onSelectAll()} onCancel={()=>this.offSelectAll()} />:""}{item.title}]
        })
    }

    _renderBody() {
        let _renderRow = this.renderRow;
        return this.state.dataSource.map((item) => {
            return _renderRow && _renderRow(item)
        })
    }

    render() {
        let state = this.state;
        return (
            

                {this._renderHead()}
                        {this._renderBody()}
                    
            
        )
    }
}

export default Table

Component是React內的一個基類，用于繼承和創建React自定義組件。ES6規范下的面向對象實現起來非常精簡，class關鍵字 可以快速創建一個類，而Component類內的所有屬性和方法均可以通過this訪問。換而言之，在Component內的任意方法內，可以通過this.xxx的方式調用該Component的其他屬性和方法。

接著分析上面的代碼，寥寥幾行實現的是對一個Table組件的封裝，借鑒了ReactNative組件的設計思路，通過外部傳遞dataSource（數據源）、columns（表格的表頭項）、renderRow（當行渲染的模板函數）來完成一個Table的構建，支持全選和取消全選的功能、允許外部傳遞className和style對象來修改樣式。

從這個例子我們可以發現：只要不采用function定義函數，Component所有方法內部的this對象始終指向該類自身。

還是繼續上面的例子，下面在一個做為Demo的container里調用之前 的Table。

import Table from "../../components/Views/Table/" 

接著編寫renderRow函數并傳遞給Table組件

_renderRow(row) {
    // ------------ 注意：這里對callback函數的寫法 -----------
    let onEdit = (x)=> {
        console.log(x+x)
    }, onDelete = (x)=> {
        console.log(x*x)
    }
    // ---------------------------------------------------
    return (
        
            {row.key}
            {row.name}
            {row.age}
            {row.birthday}
            {row.job}
            {row.address}
            
                onEdit(row.key)} text="編輯" />
                onDelete(row.key)} text="刪除" />
            
        
    )
}

//... 省略一大堆代碼

render() {
    let dataSource = [{
        key: "1",
        name: "胡彥斌",
        age: 32,
        birthday: "2016-12-29",
        job: "前端工程師",
        address: "西湖區湖底公園1號"
        }, {
        key: "2",
        name: "胡彥祖",
        age: 42,
        birthday: "2016-12-29",
        job: "前端工程師",
        address: "西湖區湖底公園1號"
    }],columns = [{
        title: "編號",
        dataIndex: "key",
        key: "key",
        },{
        title: "姓名",
        dataIndex: "name",
        key: "name",
        }, {
        title: "年齡",
        dataIndex: "age",
        key: "age",
        }, {
        title: "生日",
        dataIndex: "birthday",
        key: "birthday",
        }, {
        title: "職務",
        dataIndex: "job",
        key: "job",
        },{
        title: "住址",
        dataIndex: "address",
        key: "address",
        }, {
        title: "操作",
        dataIndex: "operate",
        key: "operate",
    }];
    return (
        

            
    );
}
顯示效果如下：
分析上面的代碼，有幾處容易出錯的地方：
_renderRow 作為component的方法來定義，然后在對應的render函數內通過this來調用。很重要的一點，這里this._renderRow作為的是函數名方式傳遞。

_renderRow 內部Button組件的callback是按鈕點擊后觸發的回調，也是一個函數，但是這個函數沒有像上面一樣放在component的方法里定義，而是作為一個變量定義并通過匿名函數的方式傳遞給子組件：
let onEdit = (x)=> {
    console.log(x+x)
}

// .....
callback={()=>onEdit(row.key)}
這樣就避開了使用this時上下文變化的問題。這一點是很講究的，如果沿用上面的寫法很容易這樣寫：
onEdit(x) {
   console.log(x+x)
}

// ... 
callback={()=>this.onEdit(row.key)}
但是很遺憾，這樣寫this傳遞到子組件后會變成undefined，從而報錯。

父組件如要調用子組件的方法，有兩種方式：

第一種   通過匿名函數的方式
callback = {()=>this.modalShow()}

第二種   使用 bind
callback = {this.modalShow.bind(this)}
注意：如果要綁定的函數需要傳參數，可以這么寫： xxx.bind(this,arg1,arg2...)
參考
《ECMAScript 6 入門》
@歡迎關注我的 github 和 個人博客 －Jafeney

                 

                                                                                                                    
                         GPU云服務器
                                             
                         云服務器
                                                                                                                                                 
                                      
                     
                    
                                                                                               深入理解系列
                                                                                                           深入理解linux
                                                                                                           深入理解webrtc
                                                                                                           深入理解python
                                                         
                 
               
              

                   
 文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
                 
                   
轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/87806.html
               

                 
                                  
上一篇：實現一個奇怪的需求：如何將一串 js 鏈式調用存儲在一個函數或對象中，以備未來調用？
  
                                                
                                       
下一篇：獲取元素css值
                                  

                
相關文章
                

                             
                                                                                                    

                                                

                          
React中setState幾個現象---先知道再理解
                                                     
摘要：原生事件中的在按鈕原生事件中定義的和定時器效果一樣，每次都會引起新的事件是合并的成一次的。原生事件事件生成計時器點擊按鈕，先執行原生事件，再執行事件，但是原生事件會觸發兩次，事件觸發一次。

常規情況
在同一個方法中多次setState是會被合并的，并且對相同屬性的設置只保留最后一次的設置；
import React from react;

export class Test exte...
                                                   
                          

                                

                                    tomlingtm
                                    2019-08-22 16:33
                                    評論0 
                                    收藏0 
                                
                          
                      
                    
 
                                                                                       

                                                

                          
前端文檔收集
                                                     
摘要：系列種優化頁面加載速度的方法隨筆分類中個最重要的技術點常用整理網頁性能管理詳解離線緩存簡介系列編寫高性能有趣的原生數組函數數據訪問性能優化方案實現的大排序算法一怪對象常用方法函數收集數組的操作面向對象和原型繼承中關鍵詞的優雅解釋淺談系列

H5系列

10種優化頁面加載速度的方法
隨筆分類 - HTML5
HTML5中40個最重要的技術點
常用meta整理
網頁性能管理詳解
HTML5 ...
                                                   
                          

                                

                                    jsbintask
                                    2019-08-21 12:05
                                    評論0 
                                    收藏0 
                                
                          
                      
                    
 
                                                                                       

                                                

                          
前端文檔收集
                                                     
摘要：系列種優化頁面加載速度的方法隨筆分類中個最重要的技術點常用整理網頁性能管理詳解離線緩存簡介系列編寫高性能有趣的原生數組函數數據訪問性能優化方案實現的大排序算法一怪對象常用方法函數收集數組的操作面向對象和原型繼承中關鍵詞的優雅解釋淺談系列

H5系列

10種優化頁面加載速度的方法
隨筆分類 - HTML5
HTML5中40個最重要的技術點
常用meta整理
網頁性能管理詳解
HTML5 ...
                                                   
                          

                                

                                    muddyway
                                    2019-08-29 13:21
                                    評論0 
                                    收藏0 
                                
                          
                      
                    
 
                                                                                       

                                                

                          
【進階1-1期】理解JavaScript 中的執行上下文和執行棧
                                                     
摘要：首次運行代碼時，會創建一個全局執行上下文并到當前的執行棧中。執行上下文的創建執行上下文分兩個階段創建創建階段執行階段創建階段確定的值，也被稱為。

（關注福利，關注本公眾號回復[資料]領取優質前端視頻，包括Vue、React、Node源碼和實戰、面試指導）
本周正式開始前端進階的第一期，本周的主題是調用堆棧，，今天是第一天
本計劃一共28期，每期重點攻克一個面試重難點，如果你還不了解本進...
                                                   
                          

                                

                                    import.
                                    2019-08-23 13:46
                                    評論0 
                                    收藏0 
                                
                          
                      
                    
 
                                                                           
                
              

                  
                  
發表評論
                   

                                      
                      

                        登陸后可評論
                      
                   
               

                

                  
0條評論
   
                
 
                      

              

              
 
                

                    
                    
Magicer
                    
男|高級講師
                    

                     
                                                                      我要關注
      
                                                                                        我要私信
                     
                                            
                    
                    

                          
TA的文章
                          閱讀更多
                    
                      

                                                  
多態
                            
閱讀 2580·2021-11-24 09:38
                                                       
CSS實例詳解：Flex布局
                            
閱讀 2612·2019-08-30 15:54
                                                       
white-space、word-wrap和word-break的簡單整理
                            
閱讀 926·2019-08-30 15:52
                                                       
前端面試每日3+1——第118天
                            
閱讀 1915·2019-08-30 15:44
                                                       
Flex布局入門
                            
閱讀 2721·2019-08-30 13:48
                                                       
css選擇器總結
                            
閱讀 776·2019-08-29 16:21
                                                       
Sass 語法規則
                            
閱讀 1006·2019-08-29 14:03
                                                       
「CSS」DOM2 級樣式
                            
閱讀 2221·2019-08-28 18:15
                                                
                      
                

                   
              
  

                  
最新活動
 
           
         

                    

                      

                                                                                                                       

                          
                                                             
                          
                        
                                                

                          
                                                             
                          
                        
                                                                   
                    
                        
                      
                    
                      
                    
                    
              



                                
              
           

      
    

         
閱讀需要支付1元查看
  
         
支付并查看
     
       
<ul id="yyeyq"><sup id="yyeyq"></sup></ul>
<ul id="yyeyq"><sup id="yyeyq"></sup></ul>
<strike id="yyeyq"><input id="yyeyq"></input></strike>
<del id="yyeyq"><dfn id="yyeyq"></dfn></del><strike id="yyeyq"><menu id="yyeyq"></menu></strike>