es6中的箭头函数和this关键字的说明（详细）

1.箭头函数

=>等价于return 它不能作为构造函数，不能new

let xx = () => 555; //xx为一个函数,调用时需带（）
console.log(xx()); //555
//等同于
function xx2() {
    return 555;
}
console.log(xx2()); //555


//返回的是一个对象，若要返回对象需使用(),因为{}表示的是代码块
//当有一个参数时，参数括号可以省略，当箭头函数有0或>1个参数时，()不可省略
//当箭头函数函数体又多行语句，要使用{}，只有一行，并且要返回结果时{}可省略
let obj = parm => ({
    id: parm,
    name: '我是obj'
});
console.log(obj('haha')); //{id:"haha",name:"我是obj"}

//在箭头函数中this的指向，是它所在的父级函数的作用域，而不是他所在的那个函数

let bb = {
    name: '豆豆',
    init: function() { //该this为其所在的对象
        console.log(this); //{name:"豆豆",init:f}
    }
}
bb.init() //{name:"豆豆",init:f}

let bb2 = {
    name: "豆豆2",
    init: () => { //该this指向的是他所在的对象的父级，也就是window
            console.log(this); //Window{window:Window,......}
        } //原因：箭头函数没有function关键字，它没有形成自己的作用域。es6只是语法糖，就是简写
}
bb2.init() //Window{window:Window,......}

//箭头函数不能使用new，它的构造器指向的是window构造函数
//箭头函数没有prototype属性
let fn = () => {
        console.log(this.constructor); //Window()
        console.log(this.prototype); //undefined
    }
    // new fn() //报错 fn is not a constructor
fn() //Window()  undefined

2.js的this指向

//函数内部的this,是在函数调用的时候来确定其指向的

function t1() {
    console.log(this); //Window
} //因为每个函数都是window的属性，调用某个函数，其实就是调用了window对象的属性
t1() //Window

var t2 = {
    id: 2,
    fn: function() {
        console.log(this); //{id:2,fn:f} 
        //；this指向t2对象，因为fn函数是被t2对象调用，所以fn中的this就指向了t2对象

        // function fn1() {
        //     console.log(this); //Window 
        // } //this指向window对象，因为fn1()只是在fn()里面执行，它并不是t2对象的属性
        // fn1()
    }
}
t2.fn() //{id:2,fn:f}

var t3 = t2.fn; //函数是按引用传递的
t3() //Window

function t4() {
    this.x = 111;
    console.log(this);
}
t4() //Window
new t4() //t4{x:111} 原因：new关键字改变了函数内的指向，使其指向刚创建的对象