0
点赞
收藏
分享

微信扫一扫

Vue学习笔记之Vue的箭头函数


0x00 箭头函数

基本语法:

ES6允许使用“箭头”(=>)定义函数

Vue学习笔记之Vue的箭头函数_函数体

var f = a = > a

//等同于
var f = function(a){
return a;
}

Vue学习笔记之Vue的箭头函数_Vue_02

如果箭头函数不需要参数或需要多个参数,就使用一个圆括号代表参数部分。

Vue学习笔记之Vue的箭头函数_函数定义_03

//无形参
var f = () => 5;
// 等同于
var f = function () { return 5 };

//多个形参
var sum = (num1, num2) => num1 + num2;
// 等同于
var sum = function(num1, num2) {
return num1 + num2;
};

Vue学习笔记之Vue的箭头函数_箭头函数_04


使用箭头函数注意点:

箭头函数有几个使用注意点。

(1)函数体内的​​this​​对象,就是定义时所在的对象,而不是使用时所在的对象。


Vue学习笔记之Vue的箭头函数_箭头函数_05

1  var name = '张三';   
2 var person = {
3 name:'小马哥',
age:18,  
4 fav:function(){
5 console.log(this)
6 console.log(this.name)
7 }
8 }
9
10 person.fav();

Vue学习笔记之Vue的箭头函数_Vue_06

我们发现,打印的结果为

Vue学习笔记之Vue的箭头函数_函数体_07

此时this指向的是使用它的对象,也就是person对象

Vue学习笔记之Vue的箭头函数_Vue_08

var person2 = {
name:'小马哥',
age:18,
fav: ()=>{
// 当前this指向了定义时所在的对象(window)
console.log(this);
}
}

person2.fav();

Vue学习笔记之Vue的箭头函数_函数体_09

打印的结果:

Vue学习笔记之Vue的箭头函数_函数体_10

使用箭头函数,它表示定义时所在的对象window。

再看一个例子吧!

Vue学习笔记之Vue的箭头函数_函数定义_11

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

var id = 21;

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

Vue学习笔记之Vue的箭头函数_函数体_12

上面代码中,​​setTimeout​​​的参数是一个箭头函数,这个箭头函数的定义生效是在​​foo​​​函数生成时,而它的真正执行要等到 100 毫秒后。如果是普通函数,执行时​​this​​​应该指向全局对象​​window​​​,这时应该输出​​21​​​。但是,箭头函数导致​​this​​​总是指向函数定义生效时所在的对象(本例是​​{id: 42}​​​),所以输出的是​​42​​。

(2)不可以使用​​arguments​​对象,该对象在函数体内不存在。如果要用,可以用 rest 参数代替。

Vue学习笔记之Vue的箭头函数_基本语法_13

var person3 = {
name:'小马哥',
age:18,
fav: ()=>{
console.log(argument);
}
}

person3.fav('把妹','把爷');

Vue学习笔记之Vue的箭头函数_Vue_14

报出如下❎:

Vue学习笔记之Vue的箭头函数_基本语法_15






举报

相关推荐

0 条评论