javascript – 尝试理解ES6中的Object.assign行为
内容导读
互联网集市收集整理的这篇技术教程文章主要介绍了javascript – 尝试理解ES6中的Object.assign行为,小编现在分享给大家,供广大互联网技能从业者学习和参考。文章包含2671字,纯文字阅读大概需要4分钟。
内容图文
我正在尝试理解我在ES6课程中观察到的这种行为.请考虑以下代码.这很简单:我有一个父类(Parent)和一个从它继承的子类(Child).父类有一个名为getLabel的方法,它只返回该类的label属性.
当我创建子类的实例时,设置其标签并尝试打印它一切正常.
但是,当我在第一个实例上使用Object.assign创建另一个子类实例时,即使我显式更改它,新实例也会保留第一个实例的标签值.
class Parent {
constructor(label) {
this.getLabel = () => {
return this.label;
};
this.label = label;
}
}
class Child extends Parent {
constructor(label) {
super(label);
this.label = label;
}
}
const c = new Child('Child');
console.log('c getLabel() = ' + c.getLabel());//Prints "Child"
const c1 = Object.assign(new Child('C1'), c);
c1.label = 'Child Modified';
console.log('c1 getLabel() = ' + c1.getLabel());//Prints "Child" again instead of "Child Modified".
我不确定为什么会这样!
我所做的是改变了我在Parent类中定义getLabel方法的方式:
class Parent2 {
constructor(label) {
this.label = label;
}
getLabel() {
return this.label;
}
}
class Child2 extends Parent2 {
constructor(label) {
super(label);
this.label = label;
}
}
const c2 = new Child2('Child 2');
console.log('c2 getLabel() = ' + c2.getLabel());//Prints "Child 2" as expected.
const c3 = Object.assign(new Child2('C3'), c2);
c3.label = 'Child 2 Modified';
console.log('c3 getLabel() = ' + c3.getLabel());//Prints "Child 2 Modified" as expected.
如果有人可以解释这两种不同的行为,我将不胜感激.
这是上面代码的ES6小提琴:http://www.es6fiddle.net/is6ex359/.
解决方法:
这是因为getLabel是在每个实例中定义的,它不在原型中共享.并且由于您使用箭头函数定义它,因此它没有为此定义本地绑定,此值将是构造函数之一.
然后,当您使用Object.assign时,c1接收c的方法,即使您在c1上调用它,该值也将为c.所以你得到了c.label,它仍然是’Child’.
所以你应该避免箭头功能.我建议在原型中定义方法:
class Parent {
constructor(label) {
this.label = label;
}
getLabel() {
return this.label;
}
}
class Child extends Parent {
constructor(label) {
super(label);
this.label = label;
}
}
const c = new Child('Child');
console.log('c getLabel() = ' + c.getLabel()); // "Child"
const c1 = Object.assign(new Child('C1'), c);
c1.label = 'Child Modified';
console.log('c1 getLabel() = ' + c1.getLabel()); // "Child Modified"
(注意Object.assign不会分配getLabel,因为它是继承的,但c1.getLabel ==== c.getLabel无论如何)
或者在构造函数中,但使用函数表达式:
class Parent {
constructor(label) {
this.getLabel = function() {
return this.label;
};
this.label = label;
}
}
class Child extends Parent {
constructor(label) {
super(label);
this.label = label;
}
}
const c = new Child('Child');
console.log('c getLabel() = ' + c.getLabel()); // "Child"
const c1 = Object.assign(new Child('C1'), c);
c1.label = 'Child Modified';
console.log('c1 getLabel() = ' + c1.getLabel()); // "Child Modified"
内容总结
以上是互联网集市为您收集整理的javascript – 尝试理解ES6中的Object.assign行为全部内容,希望文章能够帮你解决javascript – 尝试理解ES6中的Object.assign行为所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错,欢迎将互联网集市网站推荐给程序员好友。
内容备注
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 gblab@vip.qq.com 举报,一经查实,本站将立刻删除。
内容手机端
扫描二维码推送至手机访问。