大白话理解箭头函数this
var obj1={ num:4, fn:function(){ num:5; var f=() => { num:6; console.log(this.num); //4 外层非箭头函数包裹,指向fn的作用域,即obj1 var f2=() => { console.log(this.num); //4 外层箭头函数包裹,向上寻找非箭头函数,指向fn的作用域,即obj1 } f2(); } f(); } } obj1.fn();
function foo() { console.log(this) //window setTimeout(() => { console.log(this) // window console.log('id:', this.id); }, 100); } var id = 10; foo()
var obj = { x:100,//属性x show(){ console.log(this) // obj setTimeout(() => { console.log(this) // obj },1000); } }; obj.show();
function foo() { console.log(this) //本是window,但使用call更改了this,故为{id:100} setTimeout(() => { console.log(this) // 本应该指向foo的作用域,但由于外层非箭头函数使用call更改了this,故为{id:100} console.log(this.id); // 100 }, 1000); } var id = 10; foo.call({id:100})
var obj={
a:10,
func:()=>{
console.log(this); //window
},
test:function(){
console.log(this); // obj
setTimeout(()=>{
console.log(this); //obj
this.func();
},1);
}
}
obj.test();
var obj = { func: function() { console.log('func') }, say: function(){ console.log(this) // obj setTimeout(()=> { console.log(this) //obj this.func() // ‘func’ }); // } } obj.say();
var obj = { func: function() { console.log('func') }, say: () =>{ console.log(this) // window setTimeout(function () { console.log(this) //window this.func() // 报错,window下没有func方法 }); // } } obj.say();
var obj = { func: function() { console.log('func') }, say: () =>{ console.log(this); // window var b=() =>{ console.log(this) //window this.func() // 报错,window下没有func方法 } // b() } } obj.say();
var obj = { say: function () { 'use strict'; // 严格模式下,没有宿主调用的函数中的this是undefined var f1 = function () { console.log(this); // undefined setTimeout(() => { console.log(this); // undefined }) }; f1(); } } obj.say()
var name = 'window' var person1 = { name: 'person1', show1: function () { console.log(this.name) }, show2: () => console.log(this.name), show3: function () { return function () { console.log(this.name) } }, show4: function () { return () => console.log(this.name) } } var person2 = { name: 'person2' } person1.show1() // person1 person1.show1.call(person2) // person2 person1.show2() // window person1.show2.call(person2) // window person1.show3()() // window person1.show3().call(person2) // person2 person1.show3.call(person2)() // window person1.show4()() // person1 person1.show4().call(person2) // person1 person1.show4.call(person2)() // person2
var name = 'window' function Person (name) { this.name = name; this.show1 = function () { console.log(this.name) } this.show2 = () => console.log(this.name) this.show3 = function () { return function () { console.log(this.name) } } this.show4 = function () { return () => console.log(this.name) } } var personA = new Person('personA') var personB = new Person('personB') personA.show1() // personA personA.show1.call(personB) // personB personA.show2() // personA personA.show2.call(personB) // personA personA.show3()() // window personA.show3().call(personB) // personB personA.show3.call(personB)() // window personA.show4()() // personA personA.show4().call(personB) // personA personA.show4.call(personB)() // personB