ES6:箭头函数与关键字this

箭头函数

es6 允许使用“箭头”（=>）定义函数。不但简化了代码，最重要的一点就是解决了es5中的this指向问题,在es6中的箭头函数里this指向的永远是定义时的对象，而非使用时的对象。例如：

let f = v => v;
// 等同于
let f = function (v) {
 return v;
};

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

let f = () => 5;

// 等同于

let f = function () { return 5 };

  
let sum = (num1, num2) => num1 + num2;

// 等同于

let sum = function(num1, num2) {

    return num1 + num2;
};

如果箭头函数的代码块部分多于一条语句，就要使用大括号将它们括起来，并且使用return语句返回。例如：

let sum = (num1, num2) => { return num1 + num2; }

箭头函数使得表达更加简洁。例如：

const isEven = n => n % 2 == 0;

const square = n => n \* n;

上面代码只用了两行，就定义了两个简单的工具函数。如果不用箭头函数，可能就要占用多行，而且还不如现在这样写醒目。

箭头函数的一个用处是简化回调函数。

// 正常函数写法

[1,2,3].map(function (x) {

 return x * x;});

// 箭头函数写法

[1,2,3].map(x => x * x);



// 正常函数写法

var result = values.sort(function (a, b) {

 return a - b;});

// 箭头函数写法

var result = values.sort((a, b) => a - b);

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

（1）函数体内的this对象，就是定义时所在的对象，而不是使用时所在的对象。

（2）不可以当作构造函数，也就是说，不可以使用new命令，否则会抛出一个错误。

（3）不可以使用arguments对象，该对象在函数体内不存在。

例如：

let handler = {

    id: '123456',
    init: function() {

        document.addEventListener('click',event => this.doSomething(event.type), false);

    },
    doSomething: function(type) {

        console.log('Handling ' + type  + ' for ' + this.id);

    }
  };

上面代码的init方法中，如果用是是普通的function函数，this本该是document本身，使用了箭头函数后，使这个箭头函数里面的this，总是指向handler对象；
doSomething里的this指向的是doSomething运行时所在的对象handler。

this关键字

this可以用在构造函数之中，表示实例对象。除此之外，this还可以用在别的场合。但不管是什么场合，this都有一个共同点：它总是返回一个对象，简单说，this就是属性或方法“当前”所在的对象。

this主要有以下几个使用场合

（1）全局环境

全局环境使用this，它指的就是顶层对象window。

this === window // true
function f() {
    console.log(this === window);
}
f() // true

注意：严格模式下 普通函数内部 this 等于 undefined

（2）构造函数

构造函数中的this，指的是实例对象

function Person(p) {

   this.p = p;
   console.log(this)//Person { p: "测试this指向" }
 };

 var obj = new Person()

从打印结果可以看出上面代码里的this指向的就是Person实例

（3）对象的方法

如果对象的方法里面包含this，this的指向就是方法运行时所在的对象。

var person = {

    name: '张三',

    describe: function () {

        return '姓名：'+ this.name;

    }
 };

person.describe()// "姓名：张三"

上面代码中，this.name表示name属性所在的那个对象。由于this.name是在describe方法中调用，而describe方法所在的当前对象是person，因此this指向person，this.name就是person.name。

(4)匿名函数中的this
在方法内部出现匿名函数，那么匿名函数里的this指向的对象是不确定的,例如：

var dogs={

    name:"小黑",
    age:"1岁",
    voice:function(){

        console.log(this.name);

        setTimeout(function(){

            console.log(this);//返回的是window

            console.log(this.name);//没有返回值，因为这里的name是一个不存在的属性

            //解决方法是console.log(dogs.name);

        },1000);

    }

}

dogs.voice();

改变this指向

1.使用箭头函数
2.函数里，如果想在方法里的事件内部调用这个方法外部的方法，可以在外部声明一个变量，let that=this;
例如：

function a(){
    let that=this;
    function b(){
        console.log(that)
    }
    b();
}

3.使用bind或者、call、或者apply方法改变this指向；
bind是es6的方法，改变的是新函数的this;
call和apply是es5的方法:
call改变的是原函数的this,它的第一个参数是改变的this指向的对象，剩余的参数依次赋值给原函数形参;
apply改变的也是原函数的this,它的第一个参数也是改变的this指向的对象，第二个参数是一个数组，数组里的值依次赋值给原函数的形参
例如：

//在全局声明一个box函数，使用bind方法将this指向从window变为box
function box(){
    console.log(this);//[object global]
}
box();
let res=box.bind(box);
res();

//bind:绑定数组

function box2(a,b){
    console.log(this);//1,2
}
let arr=[1,2];
let res2=box2.bind(arr);
res2(...arr);

//bind:绑定对象

function objs(o){
    console.log(this);//{ o: '对象' }
}
let obj={o:"对象"};
let res3=objs.bind(obj);
res3(obj.o);

//es5:call

function box4(aa,bb){
    console.log(this);//[ 1111 ]
}

let ccc=[1111];
box4.call(ccc,10,12);

//es5:apply

function box5(cc,dd){
    console.log(this);//{a:"你好"}
}
var obj={a:"你好"};

box5.apply(obj,[88,99]);

//apply的max和min方法

//如果第一个参数为空表示不改变原对象

var arr2=[5,7,10,11,345,365];

console.log(Math.max.apply(null,arr2));//365

console.log(Math.min.apply(null,arr2));//5