JS - 12 - 类（class）：类（语法糖）和函数的对比、静态

# why?

让面向对象的 更加舒服（语法糖）

# hello world

    class User {
      constructor(name) {
        this.name = name ; 
      }
      getName() {
        return this.name;
      }
    }
    let h = new User('hello');
    let w = new User('world');
    console.log(h.getName(), w.getName())

# 类的 内部工作机制：原型操作

## 类（class） 和函数（function ） ：属性 - 对比

属性是非常的相似

    class User {} 
    function Hd() {} ;
    console.dir(User) ; 
    console.log(User.prototype.constructor === User)
    console.dir(Hd) ;
    console.log(Hd.prototype.constructor === Hd)

## 类（class） 和函数（function ） ：方法 - 对比

类，自动把 方法放在了 原型中 方便

    class User {
      show() {} 
    } 
    function Hd() {} ;
    Hd.prototype.show = function() {} ;
    console.dir(User)
    console.dir(Hd)

## 类（class） 和函数（function ） ：方法（特征） - 对比

class 的 方法 默认了 是不可遍历的

不需要像 函数那样，要 defineProperty 来改

    class User {
      show() {} 
    } 
    function Admin() {}
    Admin.prototype.show = function() {} ;

    console.log(
      JSON.stringify(
        Object.getOwnPropertyDescriptor(User.prototype, 'show'),
        null,
        2
      )
    )
    console.log(
      JSON.stringify(
        Object.getOwnPropertyDescriptor(Admin.prototype, 'show'),
        null,
        2
      )
    )

## 类（class）和函数（function）：构造函数 - 对比

    class User {
      constructor(name) {
        this.name=name;
      }
    } 
    function Hd(name) {
      this.name=name;
    } ;
    let u = new User('aa') ;
    let h = new Hd('bb') ;
    console.dir(u)
    console.dir(h)

# 严格模式 "use strict"

## 函数（function）

    'use strict'
    function show() {
      console.log(this) ;
    }
    function User() {}
    User.prototype.show = function() {
      function test() {
        console.log(this);
      }
      test() ; // window or undefined(严格模式)
      console.log(this);  // user
      show(); // window or undefined(严格模式)
    }
    let u = new User() ;
    u.show();

## 类（class）

可见（下图），（class内部）默认使用 严格模式

    function show() {
      console.log(this);
    }
    class Hd{
      show(){
        function test() {
          console.log(this);
        }
        test(); // undefined 
        console.log(this); // Hd
        show() ; // window or undefined(严格模式)
      }
    }
    let h = new Hd() ;
    h.show();

# 静态属性

分配给构造函数的属性，我们称为静态属性

    function Web(url) {
      this.url = url ;
    }
    Web.url = 'hdcms.com'; //静态属性
    let hd = new Web('houdunren.com') ;
    console.log(hd);
    console.dir(Web) ;

## 类（class）定义 静态属性（static）

下面的写法不是 静态

    class Request {
      host = 'https://www.houdunren.com';
    }
    let obj = new Request() ;
    obj.host = 'http://baidu.com' ; // 实体类修改，不影响class类
    console.log(obj);
    let obj2 = new Request() ;
    console.log(obj2); // 不受影响

属性写在了 实例类内部
两个实体类的 属性互不影响

这时候， 需要用 static

    class Request {
      static host = 'https://www.houdunren.com';
    }
    let obj = new Request() ;
    console.log(obj);
    console.dir(Request);

## 无需实体类，直接调用

    class Request {
      static host = 'https://www.houdunren.com';
      api(url) {
        return `${Request.host}/${url}`;
      }
    }
    let obj = new Request() ;
    console.log(obj.api("article"))

# 静态方法

和静态属性类似，

分配给构造函数的方法，我们称为静态方法

    function User() {}
    User.prototype.show = function() { // 原型链上的 show
      console.log('prototype show'); 
    };

    User.show = function() {
      console.log('static show');// 静态方法
    }

    let hd = new User();
    hd.show();
    User.show();
    
    console.log(hd);
    

## 类（class）定义 静态方法（static）

    class User {
      show() {
        console.log('prototype show');
      }
      static show() { // 静态方法
        console.log("static show"); 
      } 
    }
    new User().show();
    User.show() ;
    
    console.dir(User) ;