javascript面向对象

撑续远
104 阅读17分钟

JavaScript 介绍

Javascript 语言诞生主要是完成页面的数据验证。因此它运行在客户端，需要运行浏览器来解析执行 JavaScript 代码。
JS 是 Netscape 网景公司的产品，最早取名为 LiveScript;为了吸引更多 java 程序员。更名为 JavaScript。
JS 是弱类型，Java 是强类型。
特点：

  1. 交互性（它可以做的就是信息的动态交互）
  2. 安全性（不允许直接访问本地硬盘）
  3. 跨平台性（只要是可以解释 JS 的浏览器都可以执行，和平台无关）

Javascript 和面向对象

什么是 面向对象

面向对象编程（OOP）是如今多种编程语言所实现的一种 编程范式，包括 Java、C++。OOP把 对象 作为程序的 基本单元，一个对象包含了数据和操作数据的函数。面向对象三大特征：封装、继承、多态

Javascript 和面向对象的关系

JS 基于原型编程、多范式 的动态脚本语言，并且支持面向对象、面向过程、命令式、声明式、函数 式等编程范式。 JS 的灵活性使得这些范式可以单独使用，也可以混合使用。开发者可以根据实际需求和编程风格选择适 合的编程范式。

数组定义方式

JS 中 数组的定义：
格式：
var 数组名 = []; // 空数组
var 数组名 = [1 , ’abc’ , true]; // 定义数组同时赋值元素

函数的二种定义方式

第一种，可以使用 function 关键字来定义函数。
使用的格式如下:
function 函数名(形参列表){
函数体
}
在 JavaScript 语言中，如何定义带有返回值的函数？
只需要在函数体内直接使用 return 语句返回值即可！

函数的第二种定义方式，格式如下：
使用格式如下：
var 函数名 = function(形参列表) { 函数体 }

函数的 arguments 隐形参数（只在 function 函数内）

就是在 function 函数中不需要定义，但却可以直接用来获取所有参数的变量。我们管它叫隐形参数。
隐形参数特别像 java 基础的可变长参数一样。
public void fun( Object ... args );
可变长参数其他是一个数组。

JS 中的自定义对象

Object 形式的自定义对象

对象的定义：
var 变量名 = new Object(); // 对象实例（空对象）
变量名.属性名 = 值; // 定义一个属性
变量名.函数名 = function(){} // 定义一个函数
对象的访问：
变量名.属性 / 函数名();

{}花括号形式的自定义对象

对象的定义：
var 变量名 = { // 空对象
属性名：值, // 定义一个属性
属性名：值, // 定义一个属性
函数名：function(){} // 定义一个函数
};
对象的访问：
变量名.属性 / 函数名();

js 中的事件

什么是事件？事件是电脑输入设备与页面进行交互的响应。我们称之为事件。

常用的事件：

onload 加载完成事件： 页面加载完成之后，常用于做页面 js 代码初始化操作
onclick 单击事件： 常用于按钮的点击响应操作。
onblur 失去焦点事件： 常用用于输入框失去焦点后验证其输入内容是否合法。
onchange 内容发生改变事件： 常用于下拉列表和输入框内容发生改变后操作
onsubmit 表单提交事件： 常用于表单提交前，验证所有表单项是否合法。
事件的注册又分为静态注册和动态注册两种：

什么是事件的注册（绑定）？

其实就是告诉浏览器，当事件响应后要执行哪些操作代码，叫事件注册或事件绑定。
静态注册事件：通过 html 标签的事件属性直接赋于事件响应后的代码，这种方式我们叫静态注册。
动态注册事件：是指先通过 js 代码得到标签的 dom 对象，然后再通过 dom 对象.事件名 = function(){} 这种形式赋于事件
响应后的代码，叫动态注册。

动态注册基本步骤：

1、获取标签对象
2、标签对象.事件名 = fucntion(){}

DOM 模型

DOM 全称是 Document Object Model 文档对象模型
大白话，就是把文档中的标签，属性，文本，转换成为对象来管理。
那么 它们是如何实现把标签，属性，文本转换成为对象来管理呢。

Document 对象的理解：

第一点：Document 它管理了所有的 HTML 文档内容。
第二点：document 它是一种树结构的文档。有层级关系。
第三点：它让我们把所有的标签 都 对象化
第四点：我们可以通过 document 访问所有的标签对象。

Document 对象中的方法介绍

document.getElementById(elementId)
通过标签的 id 属性查找标签 dom 对象，elementId 是标签的 id 属性值
document.getElementsByName(elementName)
通过标签的 name 属性查找标签 dom 对象，elementName 标签的 name 属性值
document.getElementsByTagName(tagname)
通过标签名查找标签 dom 对象。tagname 是标签名
document.createElement( tagName)
方法，通过给定的标签名，创建一个标签对象。tagName 是要创建的标签名

js原型

在JavaScript中，原型是一种实现面向对象编程的重要机制。每个JavaScript对象都有一个与之关联的原型对象，这个原型对象定义了该对象的继承属性和方法。

JavaScript中的原型链是实现继承的主要方式。每个函数在创建时都会自动获得一个prototype属性，这个属性是一个指针，指向函数的原型对象。当创建一个新对象时，这个新对象会从其构造函数的prototype对象上继承属性和方法。如果该对象自身没有某个属性或方法，那么JavaScript会沿着原型链向上查找，直到找到为止。

原型链的查找过程是动态的，这意味着如果一个对象没有某个属性或方法，JavaScript会在其原型上查找，如果原型上也没有，那么会在原型的原型上查找，依此类推，直到查找到Object.prototype的原型（也就是null）。

在JavaScript中，你可以通过Object.getPrototypeOf()方法来获取一个对象的原型，或者通过Object.setPrototypeOf()方法来设置一个对象的原型。

此外，你还可以使用Object.create()方法来创建一个新对象，该方法接受一个原型对象作为参数，并返回一个新创建的对象，这个新对象将继承指定原型对象的属性和方法。

DOM

DOM（Document Object Model）是Web开发中的一个重要概念，它提供了一种方式来编程地访问和操作HTML或XML文档的结构、内容和样式。在JavaScript中，DOM是通过一组对象和接口来实现的，使得开发者可以与网页进行交互。

DOM将文档表示为一个层次结构，类似于一个树状结构。每个节点代表文档中的一个元素、属性、文本等。这个层次结构提供了对文档的遍历、查找、修改和添加新内容的能力。

在JavaScript中，DOM的主要接口是Document对象，它是访问和操作整个文档的入口点。通过Document对象，你可以获取页面上的元素、修改元素的属性和样式、添加事件监听器等。

BOM

BOM（Browser Object Model）是JavaScript中的一个重要概念，它提供了一组用于操作浏览器窗口、导航、位置和历史记录的对象。BOM的核心对象是window对象，它代表了浏览器窗口或标签页。

通过BOM，开发者可以执行以下操作：

  1. 打开和关闭浏览器窗口：使用window.open()和window.close()方法可以打开新的浏览器窗口或关闭当前窗口。
  2. 导航到不同的URL：使用window.location对象可以获取当前页面的URL，或者将浏览器重定向到其他页面。
  3. 获取浏览器窗口尺寸和位置：使用window.innerWidth、window.innerHeight、window.screenX、window.screenY等属性可以获取浏览器窗口的尺寸和位置信息。
  4. 监听浏览器事件：使用window对象可以添加事件监听器，以便在特定事件发生时执行相应的函数。例如，当窗口大小调整时、关闭窗口时或导航到其他页面时。
  5. 操作全局变量和函数：通过BOM，可以在整个浏览器窗口范围内定义变量和函数，它们成为全局变量和函数。这意味着在任何脚本中都可以访问这些变量和函数。

BOM和DOM（Document Object Model）虽然都是与Web开发相关的概念，但它们有着不同的目的和功能。DOM主要用于访问和操作HTML或XML文档的结构、内容和样式，而BOM主要用于操作浏览器窗口、导航、位置和历史记录等与浏览器相关的功能。

BOM和DOM的区别与联系

BOM（Browser Object Model）和DOM（Document Object Model）都是与Web开发相关的术语，它们分别代表了浏览器对象模型和文档对象模型。

BOM提供了一组用于操作浏览器窗口、浏览器历史记录、浏览器的位置等浏览器相关对象的接口。BOM的最核心对象是window对象，它代表了浏览器窗口或标签页。通过BOM，开发者可以获取和操作浏览器的一些属性和方法，例如打开新窗口、改变浏览器的位置和尺寸、操作浏览器历史记录等。

DOM代表了以层次结构组织的HTML或XML文档，并提供了一组用于访问和操作文档内容的接口。DOM将文档表示为一个由节点组成的树结构，每个节点代表文档中的一个元素、属性、文本等。通过DOM，开发者可以使用JavaScript动态地访问、添加、删除或修改文档中的元素和内容。

BOM和DOM之间有一些联系和交互。例如，BOM中的document对象就是可以用于访问和操作DOM的入口点。通过document对象，开发者可以获取文档中的元素、修改元素的样式、添加事件监听等。此外，BOM的一些方法也可以用于操作或修改DOM，例如window.open()方法可以用于打开一个新的浏览器窗口，并加载指定的URL。

总结起来，BOM主要用于操作浏览器窗口和浏览器功能，而DOM则用于访问和操作文档内容。它们是紧密相关的概念，但又有各自独立的功能和使用方式。

1. Javascript 是面向对象的吗？

JavaScript 是一种面向对象的语言。在 JavaScript 中，可以使用面向对象的编程风格来设计和编写代码。

JavaScript 支持类（class）和对象（object）的概念。可以使用 class 关键字来定义类，并使用 new 关键字来创建类的实例，即对象。

此外，JavaScript 还支持继承，即一个类可以继承另一个类的属性和方法。这是通过使用 extends 关键字来实现的。

除了类和对象之外，JavaScript 还支持原型（prototype）的概念。在 JavaScript 中，每个函数都有一个原型属性，这个属性指向函数的原型对象。原型对象包含了一些属性和方法，这些属性和方法可以被实例化对象继承。

总之，JavaScript 是一种面向对象的语言，支持类、对象、继承和原型等面向对象的编程概念。

2. JS 对象和 java 对象的区别？

JavaScript 对象和 Java 对象在以下几个方面存在一些关键差异：

  1. 类型系统：

    • JavaScript 是动态类型的语言，这意味着变量可以在运行时更改其类型。
    • Java 是静态类型的语言，变量在声明时指定类型，并且不能在运行时更改。

  2. 继承：

    • JavaScript 使用基于原型的继承模型。对象可以直接从其他对象继承属性。
    • Java 使用基于类的继承模型。类可以从其他类继承属性和方法。

  3. 访问控制：

    • JavaScript 不支持严格的访问控制，如 Java 中的 private 和 protected 访问修饰符。
    • Java 提供这些功能来控制类的内部结构和方法的访问权限。

  4. 构建大型应用程序：

    • JavaScript 在客户端代码中经常使用，但通常在前端开发中，特别是在单页应用（SPA）中。
    • Java 在服务器端和桌面应用程序中广泛使用，特别是在大型企业级应用中。

  5. 内存管理：

    • JavaScript 通常在垃圾收集环境中运行，这意味着开发者不需要手动管理内存。
    • Java 提供自动内存管理，但开发者仍然需要了解如何有效地使用和管理资源。

  6. 多线程：

    • JavaScript 通常在单线程环境中运行，尽管它有回调和 Promise 等异步编程模式。
    • Java 支持多线程编程，允许开发者利用多核处理器的优势。

  7. 平台支持：

    • JavaScript 主要用于浏览器端开发，但也越来越多地用于服务器端（如 Node.js）。
    • Java 可以运行在多种平台上，从桌面到服务器和嵌入式系统。

  8. 性能和运行时：

    • JavaScript 在浏览器中运行，通常比 Java 更轻量级和快速。
    • Java 在 JVM 中运行，具有更高的性能和可靠性，特别是对于大型企业和关键任务应用。

  9. 生态系统与库/框架：

    • JavaScript 有丰富的库和框架生态系统，如 React, Angular, Vue 等，主要用于前端开发。
    • Java 有庞大的库和框架生态系统，如 Spring, Hibernate, JPA 等，用于后端和全栈开发。

  10. 构建工具与集成开发环境（IDE） ：

    • JavaScript 可以使用各种构建工具（如 Webpack, Parcel, Rollup 等）和现代的 IDE（如 Visual Studio Code, IntelliJ IDEA, WebStorm 等）。
    • Java 有其独特的构建工具（如 Maven, Gradle）和强大的 IDE（如 Eclipse, IntelliJ IDEA）。

3. 使用 构造函数 创建对象像面向对象三大特征中的哪一个？

使用构造函数创建对象主要体现了面向对象编程的封装特性。

面向对象编程的三大特性是：封装、继承和多态。

  • 封装：封装是把对象的状态信息隐藏在对象内部，不允许外部程序直接访问对象内部信息，而是通过该类提供的方法进行操作。在JavaScript中，我们使用构造函数来创建对象，并通过构造函数来设置和获取对象的属性，这就是一种封装的思想。
  • 继承：继承是从已有的类派生出新的类，新的类可以继承已有类的属性和方法。在JavaScript中，我们可以通过原型链来实现继承。
  • 多态：多态是指允许不同对象对同一消息做出不同的响应。在JavaScript中，我们可以通过函数的重载来实现多态。

4. 原型链像面向对象三大特征中的哪一个？

原型链在JavaScript中主要体现了面向对象编程的继承特性。

在JavaScript中，对象可以通过原型链来继承其他对象的属性和方法。每个对象都有一个指向其原型的内部链接，当试图访问一个对象的属性时，如果该对象内部不存在这个属性，那么JavaScript会在对象的原型（也就是该对象的__proto__属性）中查找这个属性，这就是原型链的基本思想。因此，原型链体现了面向对象编程中的继承特性。

5. 如果子对象设置和父对象同名的方法，那么执行哪一个？

在JavaScript中，如果子对象和父对象有同名的方法，那么会执行子对象的方法。这是因为在JavaScript中，当通过子对象来调用一个方法时，会先查找子对象是否有这个方法，如果有就执行子对象的方法，如果没有再查找父对象。这种机制被称为方法的覆盖或隐藏。

6. 属性遮蔽像面向对象三大特性中哪一个的具体实现？

属性遮蔽在JavaScript中主要体现了面向对象编程的多态特性。

多态是指允许不同对象对同一消息做出不同的响应。在JavaScript中，我们可以通过属性的遮蔽来实现多态。例如，我们可以定义一个父类和一个子类，它们都有一个相同名称的属性，当我们在子类中访问这个属性时，会访问到子类自己的属性，而不是父类的属性。这就是一种属性的遮蔽，它允许我们对同一个属性进行不同的操作，从而实现了多态。

7. class 和 extends 什么情况下无效？

在JavaScript中，class和extends关键字是ES6引入的类语法的一部分，用于实现面向对象编程和继承。然而，在某些情况下，它们可能会无效或无法正常工作。以下是一些可能的情况：

  1. 循环引用：如果两个类相互引用对方，并且没有使用final关键字进行限制，则可能会导致无限递归，使得类无法正常定义或实例化。
  2. 静态方法与继承：在ES6中，静态方法无法被子类继承。如果你尝试在子类中重写父类的静态方法，将会创建一个新的静态方法，而不是覆盖父类的方法。
  3. 构造函数中的super调用：在构造函数中，你必须使用super()来调用父类的构造函数。如果你忘记这样做，或者在错误的位置调用super()（例如在方法中），将会导致错误。
  4. 类声明在非严格模式下：在非严格模式下，某些语法错误（如未声明的变量）可能不会抛出错误。然而，如果这些错误与类或继承有关，可能会导致意外的行为或错误。
  5. 不支持的环境：如果你在某些旧的JavaScript环境（如某些版本的浏览器或Node.js）中使用ES6的类语法，可能会遇到兼容性问题或错误。在这种情况下，你可能需要使用Babel等工具进行转译。
  6. 没有正确处理继承的属性和方法：如果你没有正确地使用extends关键字来继承父类的属性和方法，可能会导致运行时错误或不可预期的行为。

8. 私有符号 # 为什么无效？

私有符号“#”在JavaScript中表示私有字段或方法，只能在类内部访问，外部无法直接访问或修改它们。然而，私有符号“#”目前尚未被纳入ES6或更高版本的JavaScript标准中，因此在使用时可能会出现一些问题。

一些原因可能导致了私有符号“#”的无效性：

  1. 兼容性问题：私有符号“#”尚未成为JavaScript标准的一部分，因此在某些JavaScript环境中可能无法正常工作。这意味着如果你的代码需要在不同的环境中运行，可能会遇到兼容性问题。
  2. 静态分析问题：使用私有符号“#”可能会导致静态分析工具（如ESLint）出现错误或警告，因为这些工具可能还不支持私有字段或方法的语法。
  3. 运行时错误：在某些情况下，使用私有符号“#”可能会在运行时引发错误，特别是在与Babel等转译工具一起使用时。这可能是由于转译器的实现与私有字段或方法的语法不完全兼容所导致的。
avatar
文章
阅读
粉丝