JavaScript箭頭函數（Lambda表達式）

箭頭函數也叫lambda表達式

據說其主要意圖是定義輕量級的內聯回調函數

栗有：

1 var arr = ["wei","ze","yang"];
2 arr.map(item=>"Mr."+item);   // ["Mr.wei", "Mr.ze", "Mr.yang"]

實則

1 var arr = ["wei","ze","yang"];
2 arr.map(function(item){
3     return "Mr."+item;
4 }); 

 

1.注意點：

（1）當箭頭函數有一個參數的時候，參數可以不加括號，沒有參數的時候就必須要加。

定義 函數名 = 參數 => 函數體

1 var student = name => "my name is " + name;
2 console.log(student("wei ze yang"));
3 // my name is wei ze yang

（2）如果函數體不止一行，應該用花括號括起來，這時就要顯示地返回。

定義 函數名 = （參數，參數） => {

　　函數體；

　　return 返回值；　　　　

}

1 var student = (name,age) => {
2     age +=1;
3     return "name:" + name + ",age:" + age;
4 }
5 console.log(student("wei ze yang",21));
6 // name:wei ze yang,age:22

2.arguments object

正常的函數內：

1 function student(name,age){
2     console.log(arguments[0]);
3 }
4 
5 student("weizeyang",22);

但箭頭函數不會暴露argument對象

1 var student = (name,age) => {
2     console.log(arguments[0]);
3 }
4 
5 student("weizeyang");  // arguments is not defined 

所以，argument將簡單地指向當前作用域內的一個變量

1 var arguments = ["Mr.wei"];
2 
3 var student = (name,age) => {
4     console.log(arguments[0]);
5 }
6 
7 student("weizeyang");  // "Mr.wei"

或者這時可以使用“剩余參數”的時候代替

1 var arguments = ["Mr.wei"];
2 
3 var student = (...arguments) => {
4     console.log(arguments[2]);
5 }
6 
7 student("weizeyang",22,true);  // true

3.綁定this的值

箭頭函數是lexically scoped（詞法作用域），這意味着其this綁定到了附近scope的上下文。

也就是說，不管this指向什么，都可以用一個箭頭函數保存。

 1 var student = {
 2     names:["wei","ze","yang"],
 3     setName: function() {
 4         console.log(this);
 5         this.name = this.names.join("")
 6     },
 7     getName: function() {
 8         console.log(this);
 9         return () => {
10             return {
11                 myName : "my name is " + this.name
12             }    
13         }
14     }
15 }
16 
17 student.setName();
18 var student1 = student.getName();
19 console.log(student1().myName);
20 // my name is weizeyang

 有圖為證，看下

4.相關文檔

http://blog.csdn.net/cuit/article/details/53200335

https://zhuanlan.zhihu.com/p/24856798

 

 

 

使用 this.$refs 來獲取元素和組件

1.  
   <div id= "app">
2.  
   <div>
3.  
   <input type="button" value="獲取元素內容" @click="getElement" />
4.  
   <!-- 使用 ref 獲取元素 -->
5.  
   <h1 ref="myh1">這是一個大大的H1</h1>
6.  
    
7.  
   <hr>
8.  
   <!-- 使用 ref 獲取子組件 -->
9.  
   <my-com ref="mycom"></my-com>
10.  
    </div>
11.  
    </div>
12.  
     
13.  
    <script>
14.  
    Vue.component('my-com', {
15.  
    template: '<h5>這是一個子組件</h5>',
16.  
    data() {
17.  
    return {
18.  
    name: '子組件'
19.  
    }
20.  
    }
21.  
    });
22.  
     
23.  
    // 創建 Vue 實例，得到 ViewModel
24.  
    var vm = new Vue({
25.  
    el: '#app',
26.  
    data: {},
27.  
    methods: {
28.  
    getElement() {
29.  
    // 通過 this.$refs 來獲取元素
30.  
    console.log(this.$refs.myh1.innerText);
31.  
    // 通過 this.$refs 來獲取組件
32.  
    console.log(this.$refs.mycom.name);
33.  
    }
34.  
    }
35.  
    });
36.