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

爱被打了一巴掌 2022-09-18 07:51 400阅读 0赞

\- 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. 内存 #