J39 面向对象

zhangliying
224 阅读4分钟

1.面向对象

1.编程语言：

  • OOP（Object Oriented Programming）面向对象程序设计
    • JAVA
    • PHP
    • PYTHON / GO / RUBY
    • JAVASCRIPT / NODE.JS
  • POP（Procedure Oriented） 面向过程程序设计
    • C语言

2.标记语言：

  • HTML5
  • CSS3

2.面向对象程序设计中的三大概念

  • 1.对象：泛指，JS中我们操作和研究的事务都是对象
  • 2.类：把抽象的对象，按照功能特点，进行的详细划分，划分成为很多的类别
  • 3.实例：每一种类别中具体的事务

3.JS中内置类

根据JS中事务的特征，进行类别划分，而默认划分好的类别，就是内置类

  • 数据类型中的内置类

    • Number类：每一个数字都是这个类的一个实例
    • String类
    • Boolean类
    • Null类 / Undefined类（浏览器中禁止我们自己访问这两个类）
    • Symbol类
    • Object 对象数据类型类：所有的对象数据类型都是这个类的一个实例
      • Object {}普通对象就是它的实例
      • Array数组类 每一个数组是Array类的实例也是Object类的实例
      • RegExp正则类
      • Date日期类
      • ...
    • Function类：所有的函数都是这个类的实例

  • DOM元素对象或者DOM元素集合也都有自己的内置类 ...

    • Node 节点类
      • Element 元素标签类
        • HTMLElement HTML元素标签类
          • HTMLDivElement 每一个DIV元素对象是它的一个实例
          • HTMLAnchorElement 每个A元素对象是它的一个实例
          • 每一个元素标签对象都有一个自己对应的内置类
        • XMLElement
        • ...
      • Text 文本节点类
      • Document 文档节点类
        • HTMLDocument 每一个document都是它的一个实例
      • ...
    • HTMLCollection 元素集合类：基于getElementsByTagName等方法获取到的元素集合都是它的一个实例
    • NodeList 节点集合类
<div id="box">我是一个DIV</div>
<a href="" id="link"></a>

<!-- IMPORT JS -->
<script>
let box = document.getElementById('box');
console.dir(box);//HTMLCollection 元素集合类

console.dir(link); //=>HTMLAnchorElement
//如果JS代码是在结构加载完去执行的，直接用元素的ID即可代表这个元素对象（小技巧） */

console.dir(document.getElementsByTagName('*'));////length: 10 获取页面中所有的标签
// 0: html
// 1: head
// 2: meta
// 3: meta
// 4: meta
// 5: title
// 6: body
// 7: div#box
// 8: a#link
// 9: script
// viewport: meta
// box: div#box
// link: a#link
// __proto__: HTMLCollection

// push是Array这个类提供的方法，只要是Array类的实例（数组是它的实例）都可以调用这些方法
let arr = [10, 20];
arr.push(30);
console.log(arr); //=>[10,20,30]

// ARGUMENTS不是Array的实例，不能调它提供的方法
function func() {
// ARGUMENTS实参集合中存储了传递的实参信息，它是一个类数组（类似于数组的结构，但是它不是数组，不是Array类的实例）
arguments.push(30); //=>Uncaught TypeError: arguments.push is not a function
console.log(arguments);
}
func(10, 20);

4.如何学习

JS本身就是按照“面向对象思想（类和实例）”设计出来的语言，所以我们不论是研究和学习JS，还是未来在工作中进行项目开发(组件封装)，也都应该按照面向对象的思想来学习和开发，例如：我想研究数组

  • 1.每一个数组都是Array这个类的实例，每个实例都是单独的一个个体（互相是不冲突的，类似于没有一模一样的两个人，在JS中也基本上没有完全一样的两个实例[有特殊情况]）
let arr1=[12,23];
let arr2=[12,23];
console.log(arr1===arr2); //=>false 不同的堆内存地址
  • 2.我们拿出某一个实例去分析其特点和结构，那么Array的其它实例也具备相同的特点和结构
// push是Array这个类提供的方法，只要是Array类的实例（数组是它的实例）都可以调用这些方法
let arr = [10, 20];
arr.push(30);
console.log(arr); //=>[10,20,30]
  • 3.数组中有很多浏览器内置的方法，这些方法都是类提供给实例的，每一个实例都能具备和使用这些方法（前提是当前类的实例才能使用，如果不是它的实例，则不能使用）
// ARGUMENTS不是Array的实例，不能调它提供的方法
function func() {
// ARGUMENTS实参集合中存储了传递的实参信息，它是一个类数组（类似于数组的结构，但是它不是数组，不是Array类的实例）
arguments.push(30); //=>Uncaught TypeError: arguments.push is not a function
console.log(arguments);
}
func(10, 20);
avatar
文章
阅读
粉丝