ES6 Class对象

宋骞
166 阅读3分钟

对于一门开发语言来讲，语言是否具有面向对象开发是非常重要的，因为现在的应用大都比较复杂，以前往往只是面向过程开发，只需要函数解决一个运算即可，但在复杂的情况下，一个函数被多个函数调用时，维护难度大，不利于程序员读写，且耦合度高，所以面向对象开发是一种有效的解方式。

JavaScript中也是有面向对象特性的，只是与Java 、C#、C++这种语言比较，还是有很大区别，在语法上没有很好的词义理解，同时也没有办法在JavaScript中引入对象，在ES6中针对这一现象提出了Class关键字，与Java C#语法近似，这很好的帮助了程序员学习和使用。

我们现来看看ES5与ES6在对象创建的区别。

var Person = function(name){
   if(!(this instanceof Person))
       return new Person("");
   this.name = name;
   return this;
}
var me = new Person("es5");
class Person{
   constructor(name){
       this.name = name;
   }
}
var me = new Person("es6");

我们从上面可以看得出来，es 6的语法比es 5的语法更加的简洁和容易理解。现在我们来看看es 6与 es 5的对象差异。

var class1 = function(){};
class1.prototype = {
   constructor : class1,
   toString : function(){
        console.log("我是es 5 的toString函数。");
   }
}
class class2{
   constructor(){
   }
   toString(){
         console.log("我是es 6的toString函数。");
    }
}
var cls1 = new class1();
var cls2 = new class2();
console.log(class1.prototype.constructor === cls1.constructor);    // true
console.log(class2.prototype.constructor === cls2.constructor);    //true
console.log(Object.keys(cls1.prototype));     //["toString"]
console.log(Object.getOwnPropertyNames(cls1.prototype)) //["constructor", "toString"]
console.log(Object.keys(cls2.prototype));    //[]
console.log(Object.getOwnPropertyNames(cls2.prototype))  //["constructor", "toString"]

我们可以看出ES6与ES5的实例方法是有区别的，ES6中是一个不可枚举的。

面向对象中最大的三大特性：继承、封装、多态，在ES6中也可以实现，我们来看看ES6如何使用这些特性。

class Biology {
    //可当做虚方法来使用
    shout(){
         console.log("一只不明生物叫了一声");
    }
}
//继承实现
class Cat extends Biology{
    //重写父类接口
    shout(){
        console.log("喵....");
    }
    //get 属性封装
    get skin(){
        return this._color;
    }
    //set 属性封装
    set skin(value){ 
        this._color = value;
    }
}
//继承
class Alien extends Biology{
   shout() {
        //利用super完成虚方法能力。或者不实现该方法。
         super.shout();     //多态
   }
   set skin(value){
          throw new Error("该属性是只读属性");
   }
   get skin(){
        return "N/A";
   }
}

ES6中的多态与Java 和 C# 中的多态因为语法和特性问题，多少还是有一点区别，好在有super关键字，可以实现Java C#中的多态写法。get 和 set属性在ES5中每个对象 都有__prop__属性，可以利用__prop__来修改set 和get，不过ES6的get 与 set可读性比较强一些。

面向对象中还有静态属性和表态方法，在ES6中同样也有该实现，但是ES6中的静态属性写法有两种，但是都是ES6规定只有静态方法，没有静态属性，所以以下写法不会报错，但无法访问。

class Test {
    static main(){
         console.log("这是一个静态方法！");
    }
     //静态属性 写法一
    prop : 1
    //静态属性  写法二
    static prop : 1
}
Test.main();    //这是一个静态写法
console.log(Test.prop);    //undefined
Test.prop = 1;
console.log(Test.prop);    //1

相信大家已经看明白ES6中的Class对象的使用了，但是对象使用在Java或C#中都有包的概念，在ES6中，也有这种概念，我将在下一章中，分享ES 6模块化如何使用OOP开发应用。

avatar
文章
阅读
粉丝