javascript - ES7定义实例属性出错

问题描述

问 题

使用了es7的写法定义实例的属性：
先定义了class的静态属性defaultOptions，然后实例属性options是等于defaultOptions加上构造是传进去的options

class MyClass {
    static defaultOptions = {
        width: 300,
        height: 200,
        content: '',        
    };

    options = {...MyClass.defaultOptions,...options};

    constructor(options) {
      }

      showOptions(){
          console.log(this.options)
      }
};

let xxxx  = new MyClass({
    width:50,
    height:50
});

xxxx.showOptions();

结果显示options is not defined

babel编译后的代码如下：

var MyClass = function () {
    function MyClass(options) {
        _classCallCheck(this, MyClass);

        _initialiseProps.call(this);
    }

    _createClass(MyClass, [{
        key: 'showOptions',
        value: function showOptions() {
            console.log(this.options);
        }
    }]);

    return MyClass;
}();

MyClass.defaultOptions = {
    width: 300,
    height: 200,
    content: ''
};

var _initialiseProps = function _initialiseProps() {
    this.options = _extends({}, MyClass.defaultOptions, options);
};

;

var xxxx = new MyClass({
    width: 50,
    height: 50
});

xxxx.showOptions();

改成这样写

options = {...MyClass.defaultOptions,...this.options};

babel就编译成了这样

var MyClass = function () {
    function MyClass(options) {
        _classCallCheck(this, MyClass);

        this.options = _extends({}, MyClass.defaultOptions, this.options);
    }

    _createClass(MyClass, [{
        key: 'showOptions',
        value: function showOptions() {
            console.log(this.options);
        }
    }]);

    return MyClass;
}();

MyClass.defaultOptions = {
    width: 300,
    height: 200,
    content: ''
};
;

var xxxx = new MyClass({
    width: 50,
    height: 50
});

xxxx.showOptions();

结果显示options is not defined

把babel编译后的里面的一句代码

this.options = _extends({}, MyClass.defaultOptions, this.options);

变成

this.options = _extends({}, MyClass.defaultOptions, options);

这下就没有错误了

求解真确的写法？我不想按下面这样的方式写，虽然这样就没有错误了

    constructor(options) {
        this.options = {...MyClass.defaultOptions,...options};

      }

感激不尽！！！

解决方案

你可以自己为自己解释一下，对于下面这一句：

options = {...MyClass.defaultOptions, ...options};

后面的 ...options 从哪儿来？若能解释得通，就能按你说的写了。提示一下，constructor 接收的 options 只能在其内部访问，否则你觉得 this 的意义是啥？

这篇关于javascript - ES7定义实例属性出错的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！