ES6-类的秘密-1

Class的初识-声明一个类

class User{

}
let user = new User();

• 构造函数

  class User{
      constructor(arg1){
          this.arg1 = arg1;
      }
  }
  let user = new User('哈哈');

  见识了javascript中的类，可以发现有了类之后面向对象的编程更加直观明了，那么Class的原理是否也如其他面向对象语言一样呢？

/* 类的声明 */
class User{

}
console.dir(User);

/* 函数的声明 */
function Hser(){}
console.dir(Hser);

可以发现class和function的原型都是function，也就是说class底层的机制仍然是原型机制，可以说类就是函数。class 只是语法糖为了让类的声明与继承更加简洁清晰。

对象属性的声明

class User{
 outerProperty;//注意，在此声明时不加let 等关键字
 constructor(innerProperty){
     this.innerProperty = innerProperty;
 }
}
let user = new User('nihao');
console.log(user);
console.log(Object.getOwnPropertyNames(user));//Object.getOwnPropertyNames:获得对象上的属性名（而非原型上的属性），以数组的形式返回
//["outerProperty", "innerProperty"]

/* 可见构造器函数不是必需的，且show方法会放到User2的原型中 */
class User2{
    show(){
        console.log('show');
    }
}

user:

严格模式下this的不同

class User{
    constructor(){}
    show(){
        console.log(`show:${this}`);//this指向：User
        function test(){
            console.log(`test:${this}`);//undefined
        }
        test();
    }
}

class声明的方法不可遍历

• 先看一下函数中声明的方法

  function H(){
      H.prototype.show = function(){}
  }
  /* 声明H的对象 */
  let h = new H();
  h.a1 = 'a1';
  for(let key in h){
      console.log(key);//循环输出 a1,show
  }

  但是有时我们遍历对象的属性并不想遍历到它的原型上的属性，该怎么办呢

  静态访问

静态属性

静态属性即为类设置属性，而不是为生成的对象设置,在 class 中为属性添加 static 关键字即声明为静态属性

/* 可以把为所有对象使用的值定义为静态属性 */
class User{
    static state = 'ok'
}

静态方法

赏

谢谢你请我吃糖果