Ich habe gerade Frontend gelernt und habe einige Fragen zur Schreibmethode der Ereignisüberwachung in React.
Die mir bekannten Schreibmethoden sind:
Übergeben Sie die Bindungsfunktion im Konstruktor
Verwenden Sie beim Definieren einer Funktion die Scherfunktionsdefinition
hanlde = (e)=> {
}
Nutzen Sie die Kopfschneidefunktion im -Tag
<button onClick={(e)=>this.handleClick(e)}>
</button>
Was ich nicht verstehe, ist die dritte Schreibweise
<button onClick={(e)=>this.handleClick(e)}>
</button>
Ich persönlich bin der Meinung, dass Pfeilfunktion und Bindung unterschiedliche Arten sein sollten, dasselbe zu schreiben. Aber ich habe eine Demo geschrieben
var name = 'outside'
var obj = {
name: 'inside',
getName1: function() {
return function() {
return this.name;
};
},
getName2: function() {
var func = function(s) {
return function() {
return s;
}
};
return func(this.name);
},
getName3: function () {
var func = ()=> this.name;
return func;
},
getName4: function () {
var func = function() {
return this.name;
};
func = func.bind(this);
return func;
},
getName5 :function () {
var func = function() {
return this.name;
};
var func2 = ()=>func();
return func2;
}
};
console.log(obj.getName1()());//undefine或outside
console.log(obj.getName2()());//inside 通过闭包解决
console.log(obj.getName3()());//inside 通过箭头函数
console.log(obj.getName4()());//inside 通过bind函数
console.log(obj.getName5()());//undefine或outside ???不理解
Was getName5 zurückgibt, ist in getName3, 4 und 5 nicht enthalten? ?
Vielleicht liegt das Problem darin, dass ich die Pfeilfunktionen und die Bindung falsch verstehe?
Ich hoffe, von Senioren Anleitung zu bekommen
5中箭头函数调用func的时候没有绑定this,所以func的this指向的是window
换成这样就可以了
或者这样:
新定义的函数都有自己的 this 值,在浏览器中非严格模式下,这个 this 指向 window。如果函数作为对象方法被调用,则其 this 指向调用它的对象。示例中
getName5()
中的函数func
, 并非作为obj
对象方法被调用,因此,它的 this 指向 window。与箭头函数无关。@Xeira 说的不错,箭头函数定义时词法内的this就绑定在其外围词法作用域了,而普通函数需要调用时才会具体绑定。推荐去看看You-Dont-Know-JS中关于this的讲解,很是明了