一句话概括:箭头函数中没有this,若想打印它的话只能沿着作用域链去找。
例:
<script>
var name = "周冬雨";
let obj={
name:"东东",
say:()=>{
//箭头函数中无this,只能延作用域链去找
//因为没有函数,所有作用域就是window
//而window.name='周冬雨'
console.log(this.name);
},
}
obj1={
name:'冬雨'
}
obj.say();
//不管怎么调用,箭头函数中都无this,需从作用域中去找,
//就是window作用域下,因为再无其他函数包裹箭头函数,所以永远都是window.name。
obj.say.call(obj1);
例:
var name ="冬雨";
const obj = {
name:'周冬雨',
a: function() {
console.log(this)
window.setTimeout(() => {
//箭头函数中无this,沿作用域链去找,最近的是function函数
//而function中this是obj。因为是obj调用的a。
console.log(this)
}, 0)
}
}
obj.a()
var name ="冬雨";
const obj = {
name:"周冬雨",
a: function() {
console.log(this)
window.setTimeout(() => {
//箭头函数中无this,沿作用域链去找,最近的是function函数。
console.log(this) //而function是obj1。因为是obj1调用的a。
}, 0)
}
}
obj1={
name:"夏洛"
}
obj.a.call(obj1)
var name ="周冬雨q";
const obj = {
name:"冬雨",
b: {
name:"东东",
c: ()=>{console.log(this.name)}
}
}
//还是去寻找作用域,这里没有函数包括它,
//则找到最外层的name,为window.name。
obj.b.c()
var name ="周冬雨q";
const obj = {
name:"冬雨",
b: {
name:"东东",
c: ()=>{console.log(this.name)}
//注:箭头函数中无this,沿着作用域链去找,最近的作用域就是window
//打印的结果则是windo.name
//这种情况无论this怎么调用c方法,都是打印的winwow.name
}
}
obj1={
name:'夏洛'
}
obj.b.c.call(obj1);
function foo() {
setTimeout(() => {
//注:箭头函数中无this,沿作用域链去找
//最近的就是foo函数中this,
console.log('id:', this.id);
}, 100);
}
var id = 21;
//此刻foo中的this指向{id:42}这个对象
//箭头函数中this即为它,最终打印出this.id为42。
foo.call({ id: 42 });
function Timer() {
this.s1 = 0;
this.s2 = 0;
// 箭头函数
setInterval(() => this.s1++, 1000);
// 普通函数
setInterval(function () {
this.s2++;
}, 1000);
}
var timer = new Timer();
setTimeout(() => console.log('s1: ', timer.s1), 3100);
setTimeout(() => console.log('s2: ', timer.s2), 3100);
3秒之后打印结果如下:箭头函数中this是timer中this,而普通函数中this是window,所以timer中s2不变。