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;
};
//若你想使用标准的函数体,或者函数体内可能有更多的语句要执行,则要用大括号将函数体括起来,并明确定义返回值。
var sum = (num1, num2) => { return num1 + num2; }
//如果箭头函数直接返回一个对象,必须在对象外面加上括号。
var getTempItem = id => ({ id: id, name: "Temp" });
//以上例子出处 https://www.cnblogs.com/huansky/p/5684867.html
至此,我们已经理解怎么用它了;那么它跟普通的function定义函数最大的区别是什么?
箭头函数中的 this
箭头函数 中的 this,指向的是它定义时所在的this;实际上,箭头函数没有自己的this;它的作用域是词法作用域,会跟着作用域链找到最近的一个this引用;
var name = 456
var obj = {
name:'123',
fn:function () {
console.log(this.name);//123 对象的属性方法中的this 指向对象。
setTimeout(function () {
console.log(this.name)//456 匿名函数的 this 指向window。
},1000);
setTimeout(()=>{console.log(this.name)},2000);//123 找到this是指向obj的;
obj.do(()=>{console.log(this)});//obj对象 找到定义时的this是指向obj的(即obj.fn 的this);
},
do:function (fn) {
fn();
}
};
obj.fn();
匿名函数的 this 始终是指向window 的
var obj = {
fn:function () {
(function () {
console.log(this); //window
})();
console.log(this); //obj
}
}
obj.fn();
普通函数的this 可以这样概括
(来自知乎)
函数执行时,this 总是指向调用该函数的对象,规则可以简单概括如下:
- 有对象就指向调用对象
- 没调用对象就指向全局对象
- 用new构造就指向新对象
- 通过 apply 或 call 或 bind 可以改变this的指向
其实也就是根据点的左边是什么东西来判断。
this用于继承
方法 call ,可以改变执行上下文环境。通过call去拿到其他对象的方法,继承为自己的方法;
function superClass () {
this.a = 1;
this.print = function () {
console.log(this.a);
}
}
function subClass () {
superClass.call(this);
this.print();
}
subClass(); // 1
subClass通过call方法,继承了superClass的print方法和a变量,同时subClass还可以扩展自己的其他方法