我有一个注册事件处理程序的构造函数:
函数MyConstructor(数据,传输){this.data=数据;transport.on('数据',函数(){警报(this.data);});}//模拟传输对象var传输={on:函数(事件,回调){setTimeout(回调,1000);}};//称为var obj=新MyConstructor('o',传输);
但是,我无法访问回调中创建的对象的数据属性。看起来这不是指创建的对象,而是指另一个对象。
我还尝试使用对象方法而不是匿名函数:
function MyConstructor(data, transport) {
this.data = data;
transport.on('data', this.alert);
}
MyConstructor.prototype.alert = function() {
alert(this.name);
};
但它表现出相同的问题。
如何访问正确的对象?
问题围绕着this关键字在JavaScript中的行为。这表现如下不同,
其值通常由函数执行上下文确定。在全局范围中,这是指全局对象(窗口对象)。如果为任何函数启用了严格模式,则其值将是未定义的,因为在严格模式中,全局对象是指未定义的窗口对象。位于点之前的对象是this关键字将绑定到的对象。我们可以使用call()、bind()和apply()显式设置此值当使用new关键字(构造函数)时,它将绑定到正在创建的新对象。箭头函数不绑定此 — 相反,这是在词汇上绑定的(即,基于原始上下文)
正如大多数答案所建议的那样,我们可以使用arrow函数或bind()方法或Self var。我将引用GoogleJavaScript风格指南中关于lambdas(arrow函数)的一点
更喜欢使用箭头函数而不是f.bind(this),尤其是在goog.绑定(f,this)。避免写入常量self=this。箭头功能对于有时意外传递的回调特别有用其他参数。
谷歌明确建议使用lambdas,而不是bind或const self=this
因此,最好的解决方案是使用如下lambdas,
function MyConstructor(data, transport) {
this.data = data;
transport.on('data', () => {
alert(this.data);
});
}
参考文献:
https://medium.com/tech-tajawal/javascript-this-4-rules-7354abdb274c箭头函数与绑定
我遇到了Ngx折线图xAxisTickFormatting函数的问题,该函数是从HTML调用的,如下所示:[xAxisTikFormatting]=“xFormat”。
我无法从声明的函数访问组件的变量。这个解决方案帮助我解决了问题,找到了正确的答案。
不要像这样使用函数:
xFormat (value): string {
return value.toString() + this.oneComponentVariable; //gives wrong result
}
使用此项:
xFormat = (value) => {
// console.log(this);
// now you have access to your component variables
return value + this.oneComponentVariable
}
这在JavaScript中:
JavaScript中的this值100%取决于函数的调用方式,而不是函数的定义方式。我们可以通过“点规则左侧”相对容易地找到其值:
当使用function关键字创建函数时,this的值是调用的函数点左侧的对象如果点后面没有对象,那么函数内部的值通常是全局对象(Node.js中的全局对象和浏览器中的窗口)。我不建议在这里使用this关键字,因为它比使用类似window的关键字更不明确!存在某些构造,如箭头函数和使用Function.prototype.bind()创建的函数,该函数可以修复此值。这些都是规则的例外,但它们确实有助于确定这一点的价值。
Node.js中的示例
module.exports.data = 'module data';
// This outside a function in node refers to module.exports object
console.log(this);
const obj1 = {
data: "obj1 data",
met1: function () {
console.log(this.data);
},
met2: () => {
console.log(this.data);
},
};
const obj2 = {
data: "obj2 data",
test1: function () {
console.log(this.data);
},
test2: function () {
console.log(this.data);
}.bind(obj1),
test3: obj1.met1,
test4: obj1.met2,
};
obj2.test1();
obj2.test2();
obj2.test3();
obj2.test4();
obj1.met1.call(obj2);
输出:
让我逐一介绍输出(忽略从第二个开始的第一个日志):
这是obj2,因为点规则的左侧,我们可以看到test1是如何被称为obj2.test1();的;。obj2位于点的左侧,因此为该值。即使obj2位于点的左侧,test2也通过bind()方法绑定到obj1。此值为obj1。obj2位于调用为:obj2.test3()的函数的点的左侧。因此obj2将是该函数的值。在本例中:obj2.test4()obj2位于点的左侧。但是,箭头函数没有自己的这个绑定。因此,它将绑定到外部作用域的this值,即模块。导出一个开头记录的对象。我们还可以通过使用调用函数指定此值。在这里,我们可以传入所需的this值作为参数,在本例中为obj2。
问题围绕着this关键字在JavaScript中的行为。这表现如下不同,
其值通常由函数执行上下文确定。在全局范围中,这是指全局对象(窗口对象)。如果为任何函数启用了严格模式,则其值将是未定义的,因为在严格模式中,全局对象是指未定义的窗口对象。位于点之前的对象是this关键字将绑定到的对象。我们可以使用call()、bind()和apply()显式设置此值当使用new关键字(构造函数)时,它将绑定到正在创建的新对象。箭头函数不绑定此 — 相反,这是在词汇上绑定的(即,基于原始上下文)
正如大多数答案所建议的那样,我们可以使用arrow函数或bind()方法或Self var。我将引用GoogleJavaScript风格指南中关于lambdas(arrow函数)的一点
更喜欢使用箭头函数而不是f.bind(this),尤其是在goog.绑定(f,this)。避免写入常量self=this。箭头功能对于有时意外传递的回调特别有用其他参数。
谷歌明确建议使用lambdas,而不是bind或const self=this
因此,最好的解决方案是使用如下lambdas,
function MyConstructor(data, transport) {
this.data = data;
transport.on('data', () => {
alert(this.data);
});
}
参考文献:
https://medium.com/tech-tajawal/javascript-this-4-rules-7354abdb274c箭头函数与绑定
你应该知道“this”关键字。
根据我的观点,你可以通过三种方式实现“这一点”(自身|箭头函数|绑定方法)
与其他语言相比,函数的this关键字在JavaScript中的表现稍有不同。
严格模式和非严格模式之间也有一些区别。
在大多数情况下,其值取决于函数的调用方式。
它不能在执行过程中通过赋值来设置,每次调用函数时可能会有所不同。
ES5引入了bind()方法来设置函数的值,
ES2015引入了箭头函数,这些函数不提供自己的绑定(它保留了封闭词汇上下文的值)。
方法1:Self-Self被用于维护对原始this的引用,即使上下文在变化。这是一种常用于事件处理程序(尤其是闭包)的技术。
参考:此
function MyConstructor(data, transport) {
this.data = data;
var self = this;
transport.on('data', function () {
alert(self.data);
});
}
方法2:箭头函数-箭头函数表达式在语法上是正则函数表达式的一种紧凑的替代方法,尽管它本身没有与this、arguments、super或new.target关键字的绑定。
箭头函数表达式不适合作为方法,并且不能用作构造函数。
参考:箭头函数表达式
function MyConstructor(data, transport) {
this.data = data;
transport.on('data',()=> {
alert(this.data);
});
}
方法3:Bind-Bind()方法创建一个新函数,当调用该函数时,将其this关键字设置为所提供的值,并在调用新函数时提供的任何参数之前使用给定的参数序列。
引用:Function.pr原型.bind()
function MyConstructor(data, transport) {
this.data = data;
transport.on('data',(function() {
alert(this.data);
}).bind(this);