箭头函数没有this指向, 内部的this指向依赖外层的上下文关系中this的指向,箭头函数中的this一直指向的是定义函数的环境。
console.log(this); //Window
//该箭头函数的外层this指向就是上面的console.log(this)
onclick = () => {
console.log(this); //Window
};
let PageHandle = {
id : 123,
init : function(){
onclick();
}
}
PageHandle.init();/*------------------------------------------------------------------*/
console.log(this); //Window
//{id:123, onclick:()=>{...}...}这是个表达式, 箭头函数的指向依赖外层就是window
let PageHandle = {
id : 123,
onclick : () => {
console.log(this); //Window
},
init : function(){
this.onclick();
}
}
PageHandle.init();/*------------------------------------------------------------------*/
//构造函数创造的对象
function Test(a,b){
this.a = a;
this.b = b;
this.c = function(){//调用c方法的上下文是Test实例, test.c(), this就是调用者test
console.log('c',this);
e = () =>{
//this指向依赖箭头函数外层, 也是test对象
console.log('e',this); //e Test {a: 5, b: 8, c: ƒ, d: ƒ}
}
e();
}
this.d = () => {
console.log('d',this); //d Test {a: 5, b: 8, c: ƒ, d: ƒ}
}
}
const test = new Test(5, 8);//箭头函数内部的this依赖外层与this.a,this.b....中的this相同, 指向Test的实例test
test.d(); //d Test {a: 5, b: 8, c: ƒ, d: ƒ}
test.c(); //c Test {a: 5, b: 8, c: ƒ, d: ƒ}//e Test {a: 5, b: 8, c: ƒ, d: ƒ}
func = test.c;/*
func()调用时没有指定一个具体的上下文对象, 相当于func=function(){
console.log('c',this);
e = () => {
console.log('e', this);
};
e();
};
*/
//其中的箭头函数的外层相当于绑定了this.c函数的上下文,
func(); //c Window
//e Window
//this.d是个箭头函数, 外层的this指向Test实例, 相当于绑定了该实例
func02 = test.d;
func02(); //d Test {a: 5, b: 8, c: ƒ, d: ƒ}/*------------------------------------------------------------------*/
//通过类创建对象
//参考构造函数创建对象, 可以将类创建对象的方式转换成构造函数创建对象的方式,
class Test {
constructor(a,b){
this.a = a;
this.b = b;
};
//类似于function Test()中的this.c属性, this依赖调用它的上下文环境, 箭头函数e依赖外层,即上面的console.log(this)的值.
c(){
console.log(this);
const e = () => {
console.log(this);
};
e();
};
//箭头方法类似于function Test()中this.d的箭头方法,箭头函数内部的this依赖外层与this.a,this.b....中的this相同, 指向Test的实例test
d = () => {
console.log(this);
};
}
const test = new Test(5, 8);
test.c(); //Test {a: 5, b: 8, d: ƒ} 函数c并没有绑定当前对象.//Test {a: 5, b: 8, d: ƒ}
test.d(); //Test {a: 5, b: 8, d: ƒ} 箭头函数d已经绑定当前对象.
func = test.c;//func()调用时没有指定一个具体的上下文对象,
func(); //严格模式下: undefined//undefined
func02 = test.d;
func02(); //Test {a: 5, b: 8, d: ƒ}