HTML5学习笔记（十七）：访问器和class关键字

访问器

在ECMAScript5中，提供了Object.defineProperty的方法，我们可以通过该方法来控制属性的更多权限。

属性类型

我们先看一段定义属性的代码：

var person = {
    name:"Li Lei"
};
console.log(person.name);

我们为person定义了一个名为name的属性，这是最简单的设定，那么当我希望这个属性是一个只读属性，或者该属性不会在for in循环中被遍历该怎么办呢，这就要用到Object.defineProperty方法了。

我们先认识一下该方法可以控制的属性类型有哪些：

• configurable：该属性是否可以通过delete关键字删除，默认为false。
• enumerable：该属性是否在for in循环中出现，默认值为false。
• writable：该属性是否可写，默认值为false。
• value：属性的默认值，默认值为undefined。

或者

• configurable：同上
• enumerable：同上
• set：写入属性时调用的函数，只设定该方法时为只写。
• get：读取属性时调用的函数，只设定该方法时为只读。

需要注意的是，直接定义在对象上的属性，configurable、enumerable和writable都是true。

这里的Writable、Value和Set、Get是不应该同时出现的，所以分为了两组。

示例

我们先看第一种搭配：

var person = {};

// 默认是只读、不可删除且不能被 for in 遍历的属性
Object.defineProperty(person, "color", {
    value: "yellow"
});

person.color = "black";
console.log(person.color); // yellow
delete person.color;
console.log(person.color); // yellow

// 定义为可读写的属性
Object.defineProperty(person, "sex", {
    writable: true,
    value: "male"
});

person.sex = "female";
console.log(person.sex); // female

// 定义为可删除属性
Object.defineProperty(person, "name", {
    configurable: true,
    value: "Li Lei"
});

delete person.name;
console.log(person.name); // undefined

// 定义为会被 for in 枚举属性
Object.defineProperty(person, "age", {
    enumerable: true,
    value: 28
});

for(var k in person) {
    console.log(k); // age
}

我们再看下一种：

var person = {
    _birthday:0,
    _age:0
};

Object.defineProperty(person, "birthday", {
    set:function(value) {
        this._birthday = value;
        this._age = 2017 - this._birthday;
    },
    get:function() {
        return this._birthday;
    }
});

Object.defineProperty(person, "age", {
    get:function() {
        return this._age;
    }
});

person.birthday = 1989;
console.log(person.age); // 28

寄存器允许我们对属性执行额外的操作。

class继承

还记得上一节笔记中我们是如何实现类和继承的么？我们需要编写一些额外的代码，并且需要正确实现原型链。

那么在ECMAScript6中，提供了class、super和extends关键字，帮助我们更加方便的实现类和继承，我们来看一个示例：

class Person {
    constructor(name) {
        this.name = name;
    }

    sayName() {
        console.log(this.name);
    }
}

class Student extends Person {
    constructor(name, age) {
        super(name);
        this.age = age;
    }

    sayAll() {
        super.sayName();
        console.log(this.age);
    }
}

var student = new Student("Li Lei", 28);
student.sayAll();
// Li Lei
// 28

比较一下就可以发现，class的定义包含了构造函数constructor和定义在原型对象上的函数hello()（注意没有function关键字），这样就避免了Student.prototype.sayAll = function () {...}这样分散的代码。

最后，创建一个Student对象代码和前面章节完全一样。

ES6引入的class和原有的JavaScript原型继承有什么区别呢？实际上它们没有任何区别，class的作用就是让JavaScript引擎去实现原来需要我们自己编写的原型链代码。简而言之，用class的好处就是极大地简化了原型链代码。

你一定会问，class这么好用，能不能现在就用上？

现在用还早了点，因为不是所有的主流浏览器都支持ES6的class。如果一定要现在就用上，就需要一个工具把class代码转换为传统的prototype代码，可以试试Babel这个工具。