箭头函数的this指向问题中最重要的就是“箭头函数内部没有this指向,由外层函数作用域决定的”
// 显式绑定优先级高于隐式绑定
function foo() {
console.log(this.a)
}
var obj1 = {
a: 1,
foo: foo
}
var obj2 = {
a: 2,
foo: foo
}
obj1.foo();//1
obj2.foo();//2
//进行显示绑定
obj1.foo.call(obj2);//2
obj2.foo.call(obj1);//1
// new绑定优先级高于显式绑定
function foo(b) {
this.a = b;
}
var obj1 = {};
var bar = foo.bind(obj1);
bar(2);
console.log(obj1.a);//2
var baz = new bar(3);
//如果bind的优先级高于new,那么obj1.a会变为3,但是obj1.a依旧是2,所以new的优先级更高
console.log(obj1.a);//2
console.log(baz.a);//3
// 箭头函数的this指向问题
var a = 0;
function foo() {
//箭头函数内部没有this指向,由外层函数作用域决定的
var test = () => {
console.log(this)
}
test();
}
var obj = {
a: 1,
foo: foo
}
obj.foo();//this=>obj
function foo() {
//箭头函数内部没有this指向,由外层函数作用域决定的
var test = () => {
console.log(this)
}
return test;
}
var obj1 = {
a: 2,
foo: foo
}
var obj2 = {
a: 3,
foo: foo
}
var obj3 = {
a: 4,
foo: () => {
console.log(this)
}
}
//默认绑定规则(独立调用对箭头函数)无效
obj1.foo()();//this=>obj1
//显式绑定 无效
var bar = foo().call(obj2);//this=>window
//隐式绑定 无效
obj3.foo();//this=>window
//new不能实例箭头函数
new obj();//报错
这是一道课后习题,大家把自己的答案留言到评论区,让我来看看你们的水平吧,之后答案也会公布在评论区。
//课后习题
var name = 'window'
var obj1 = {
name: '1',
fn1: function () {
console.log(this.name)
},
fn2: () => console.log(this.name),
fn3: function () {
return function () {
console.log(this.name)
}
},
fn4: function () {
return () => console.log(this.name)
}
}
var obj2 = {
name: '2'
}
obj1.fn1();
obj1.fn1.call(obj2);
obj1.fn2();
obj1.fn2.call(obj2);
obj1.fn3()();
obj1.fn3().call(obj2);
obj1.fn3.call(obj2)();
obj1.fn4()();
obj1.fn4().call(obj2);
obj1.fn4.call(obj2)();
以上就是箭头函数()=>{}下的this指向问题。
我是前端Dai,一个会将自己平时项目中常见的问题以及笔试面试的知识在CSDN与大家分享的coder,希望大家一起进步,加油。