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.  
posted @ 2019-07-03 10:22  技术颜良  阅读(6141)  评论(0编辑  收藏  举报