ES6中class的get和set方法问题？

Question

Class 的取值函数（getter）和存值函数（setter）,写了一段测试代码：

let str = 'nihao';
class MyClass {
    constructor() {
    }
    get prop() {
        return str ;
    }
    set prop(value) {
        str = value;
    }
}

class ParentClas extends MyClass{
    constructor(){
        super();
        this.prop='haha';
    }
}

let parentClass=new ParentClas();

console.log('parentClass.prop',parentClass.prop);
parentClass.prop="heihei";
console.log('parentClass.prop',parentClass.prop);
console.log("str",str);

运行结果为：

按照我的理解，parentClass对象有了自己的prop属性，

parentClass.prop的访问结果是haha，没有问题

但是parentClass.prop="heihei";以后，修改的应该是parentClass对象自身的prop属性，parentClass.prop属性为heihei，也没有问题，但是为什么str变量竟然也是heihei了，按道理，不应该访问到MyClass原型链呀。

Answer 1

parentClass.prop = 'hehe'
parentClass.hasOwnProperty('prop') // false

Answer 2

parentClass.prop="heihei"这句话触发了你的set啊，然后你的set当中把str赋值成为heihei了啊

Answer 3

MyClass的原型链被parentClass继承了，get、set方法你懂吧？监听属性的取值、赋值动作

Answer 4

这个问题跟ES6的继承机制有关系。

function Father() {

}

function Children(...args){
    Father.apply(this, args)
}
Children.prototype = new Father()

ES5的继承，
实质是先创造子类的实例对象this
然后再将父类的私有属性添加到this上面
最后来改变原型链的指向
但也会有一些问题
假设父类构造函数上存在计数
这也会导致计数不准确的问题

ES6的继承机制完全不同
实质是先创造父类的实例对象this
所以必须先调用super方法
（即便子类没有书写constructor也会默认添加）
然后再用子类的构造函数修改this

Answer 5

对属性重新赋值，触发了set操作。

Answer 6

ParentClass继承MyClass，会继承MyClass的get和set方法，当新建parentClass实例时，调用类的构造函数，构造函数中的this.prop = 'haha'会触发prop的set方法，因此会把str设置为'haha'；parentClass.prop会触发get方法，返回str的值，即'haha';之后praentClass.prop = 'heihei'同样触发set方法，将str设置为'heihei'，后面取值的时候触发get方法，返回str的值，也就是'heihei'

Answer 7

@安静的木马 正解来了，其实大家弄懂this指向就一目了然了
子类继承父类时：
1,super() -> 生成MyClass{}
2,this指向MyClass{}这个对象
3,this.prop = "haha"是设置MyClass对象中的prop值为"haha"，所以会触发父类中定义的set

Answer 8

super 阶段干的事情 就是将父类的 this 指向到子类
在你第一次为 prop 赋值时， str早就被你修改了
str的值，一共有两次改变为别为： haha、heihei
理解this的指向，是理解这种变化的根本