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

有图为证，看下

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

使用 this.$refs 来获取元素和组件

<div id="app">
<div>
<input type="button" value="获取元素内容" @click="getElement" />
<h1 ref="myh1">这是一个大大的H1</h1>
<hr>
<my-com ref="mycom"></my-com>
</div>
</div>
<script>
Vue.component('my-com', {
template: '<h5>这是一个子组件</h5>',
data() {
return {
name: '子组件'
}
}
});
// 创建 Vue 实例，得到 ViewModel
var vm = new Vue({
el: '#app',
data: {},
methods: {
getElement() {
// 通过 this.$refs 来获取元素
console.log(this.$refs.myh1.innerText);
// 通过 this.$refs 来获取组件
console.log(this.$refs.mycom.name);
}
}
});

巴特西

JavaScript箭头函数（Lambda表达式）

使用 this.$refs 来获取元素和组件

最新文章

热门文章