20-JavaScript-面向对象-类(原型对象) 和 对象(实例)

- JS面向(基于)对象编程 
    - 类(原型对象) 与 对象(实例)
    - 构造方法 和 this    
    - 成员变量 和 成员方法

1. 概念

 1.1 JS面向对象特征介绍

    JavaScript是一种面向对象的动态脚本语言
    基于对象(Object-Based)
    事件驱动(EventDriven)
    具有面向对象语言的各种特性, 如 封装 继承 多态
    大多数人仅将其作为函数式语言.

 1.2 明确概念

  1) 基于对象( object-based )  <==> 面向对象

    JavaScript是一种基于对象的语言,使用的所有东西都是对象.
    基于对象 面向对象 都是以对象的概念进行编程,
    本质上没什么区别.

  2) 原型对象( prototype )  <==> 类

  
    因为JavaScript中没有 class关键字,
    因此, 其 原型对象 即为 类. 概念是一致的   

 1.3 类(原型对象) 和 对象(实例) 的区别和联系

  1) 类是抽象的、概念的, 代表一类事物,比如 人类、狗类    
  2) 对象是具体的、实际的, 代表一个具体事物
  3) 类是对象实例的模板, 对象实例类的一个 个体.

2. 引入

    // 猫 原型对象(类)
    function Cat() {

    }

    // 对象(实例)   
    // 说法: 创建一个对象实例;实例化一个对象;把对象实例化
    var whiteCat = new Cat();

    // 给 对象 动态添加属性
    whiteCat.name = "小白";
    whiteCat.age = 3;
    whiteCat.color = "白色";

    console.info( whiteCat );
    // Cat { name="小白", age=3, color="白色"}

3. 定义类(原型对象)的方式

 - 工厂方法 -- 使用 new Object 创建对象并添加属性
 - 构造函数
 - prototype
 - 构造函数及prototype
 - 动态原型

4. 构造函数定义类

 1) 定义类

    function ClassName() {
        
    }

 2) 实例化对象

    var objName = new ClassName();

 3) 访问实例的成员变量

    ① objName.propertyName;    // 普通方式访问
    ② objName["propertyName"]; // 可拼接属性名

   如:

    console.info( whiteCat.name );
    console.info( whiteCat["nam"+"e"] );   

5. 一切皆对象

    类(原型对象)也是对象, 它是 Function类的实例.

 1) 查看构造函数

    objName.constructor

 2) 举例

    // 字符串的构造函数
    console.info( "123".constructor );  // String()
    
    // 类的构造函数
    console.info( String.constructor ); // Function()

 3) 判断对象的类型

  ① instanceof

    console.info( whiteCat instanceof Cat ); // true

  ② objName.constructor == ClassName

    console.info( whiteCat.constructor == Cat ); // true   

6. 内存

 1) JS 也存在 堆 和 栈 的概念

 2) 由JS引擎负责 GC , 
    当堆内存中的实体没有被引用时,即可在不确定的时间被回收

 3) 删除对象的属性

    delete( objName.propertyName );