当前位置：首页 > news >正文

前端快速入门

news 来源：原创 2025/5/10 22:53:44

Web 前端必须掌握的三种语言：

用于定义网页内容的 HTML
CSS 指定网页的布局
动态实现 Web 页面效果的脚本语言 JavaScript

JavaScript 一种直译式脚本语言，是一种动态类型、弱类型、基于原型的语言，内置支持类型。它的解释器被称为 JavaScript 引擎，为浏览器的一部分，广泛用于客户端的脚本语言，最早是在 HTML（标准通用标记语言下的一个应用）网页上使用，用来给 HTML 网页增加动态功能。

JavaScript 快速入门

技术概述

JavaScript 技术概览 - JavaScript | MDN

JavaScript 由三个主要部分组成，分别是 ECMAScript、文档对象模型（DOM）和浏览器对象模型（BOM）。

ECMAScript：ECMAScript 是 JavaScript 的核心部分，定义了该语言的基本语法、变量类型、关键字、操作符和控制语句等。
文档对象模型（DOM）：DOM 是 JavaScript 中的文档对象模型，它是一种接口标准，用于描述和处理网页内容。DOM 将网页转换为一个层次化的对象结构，使 JavaScript 可以通过 DOM API 操作网页元素和属性。DOM 还定义了处理网页事件的方法和接口，例如鼠标点击事件、键盘事件等。
浏览器对象模型（BOM）：BOM 是 JavaScript 中的浏览器对象模型，它提供了与浏览器窗口和浏览器的交互能力。BOM 包括一些内置对象，如 window、navigator、location 等，这些对象提供了对浏览器窗口、导航和位置信息等方面的访问和控制。BOM 还定义了一些用于处理浏览器对话框的方法和接口，例如alert()、prompt() 等。

总之，JavaScript 由 ECMAScript、DOM 和 BOM 三部分组成，分别描述了该语言的核心语法和基本对象、网页文档操作标准以及客户端和浏览器窗口操作基础。

基础语法

语言类型

JavaScript 语言的每一个值都属于某一种数据类型。JavaScript 语言规定了 7 种语言类型。语言类型广泛用于变量、函数参数、表达式、函数返回值等场合。根据最新的语言标准，这 7 种语言类型是：

Undefined；
Null；
Boolean；
String；
Number；
Symbol；
Object；

Undefined 类型表示未定义，它的类型只有一个值，就是 undefined。任何变量在赋值前是 Undefined 类型、值为 undefined，一般我们可以用全局变量 undefined（就是名为 undefined 的这个变量）来表达这个值，或者 void 运算来把任意一个表达式变成 undefined 值。

undefined 是一个变量，而并非是一个关键字，所以一般采用 void 0 来获取变量取值。

Undefined 跟 Null 有一定的表意差别，Null 表示的是：“定义了但是为空”。所以，在实际编程时，我们一般不会把变量赋值为 undefined，这样可以保证所有值为 undefined 的变量，都是从未赋值的自然状态。Null 类型也只有一个值，就是 null，它的语义表示空值，与 undefined 不同，null 是 JavaScript 关键字。

Symbol 是 ES6 中引入的新类型，它是一切非字符串的对象 key 的集合，在 ES6 规范中，整个对象系统被用 Symbol 重塑。

变量声明

var 定义的变量，没有块的概念，可以跨块访问, 不能跨函数访问。 let 定义的变量，只能在块作用域里访问，不能跨块访问，也不能跨函数访问。 const 用来定义常量，使用时必须初始化(即必须赋值)，只能在块作用域里访问，而且不能修改。

// ES5
var name; // 定义一个名为 name 的变量。name是变量名。

// ES6
const name = 'hello'; // 定义一个常量
let age = 18; // 定义一个变量

对象

在 JavaScript 的世界里，一切都是对象。

与其它的语言相比，JavaScript 中的“对象”总是显得不那么合群。一些新人在学习 JavaScript 面向对象时，往往也会有疑惑：

为什么 JavaScript（直到 ES6）有对象的概念，但是却没有像其他的语言那样，有类的概念呢；
为什么在 JavaScript 对象里可以自由添加属性，而其他的语言却不能呢？

在不同的编程语言中，设计者也利用各种不同的语言特性来抽象描述对象，最为成功的流派是使用“类”的方式来描述对象，这诞生了诸如 C++、Java 等流行的编程语言。

而 JavaScript 早年却选择了一个更为冷门的方式：原型。在 ES6 出现之前，大量的 JavaScript 程序员试图在原型体系的基础上，把 JavaScript 变得更像是基于类的编程，进而产生了很多所谓的“框架”，比如 PrototypeJS、Dojo。

我们从运行时的角度看，可以不必受到这些“基于类的设施”的困扰，这是因为任何语言运行时类的概念都是被弱化的。任何语言在 CPU 跑的时候都是面向过程的，类、对象这种，只是方便人类理解。

JavaScript 对象的特征

首先我们都先应该去理解对象的本质特征（参考 Grandy Booch《面向对象分析与设计》）。总结来看，对象有如下几个特点。

对象具有唯一标识性：即使完全相同的两个对象，也并非同一个对象。
对象有状态：对象具有状态，同一对象可能处于不同状态之下。
对象具有行为：即对象的状态，可能因为它的行为产生变迁。

我们先来看第一个特征，对象具有唯一标识性。一般而言，各种语言的对象唯一标识性都是用内存地址来体现的，对象具有唯一标识的内存地址，所以具有唯一的标识。所以，JavaScript 程序员都知道，任何不同的 JavaScript 对象其实是互不相等的，我们可以看下面的代码，o1 和 o2 初看是两个一模一样的对象，但是打印出来的结果却是 false。

var o1 = {
    a: 1 };
var o2 = {
    a: 1 };
console.log(o1 == o2); // false

关于对象的第二个和第三个特征“状态和行为”，不同语言会使用不同的术语来抽象描述它们，比如 C++ 中称它们为“成员变量”和“成员函数”，Java 中则称它们为“属性”和“方法”。

在 JavaScript 中，将状态和行为统一抽象为“属性”，考虑到 JavaScript 中将函数设计成一种特殊对象，所以 JavaScript 中的行为和状态都能用属性来抽象。

下面这段代码其实就展示了普通属性和函数作为属性的一个例子：

    var o = {
    
        d: 1,
        f() {
   
            console.log(this.d);
        }    
    };

在实现了对象基本特征的基础上, JavaScript 中对象独有的特色是：对象具有高度的动态性，这是因为 JavaScript 赋予了使用者在运行时为对象添改状态和行为的能力。

JavaScript 允许运行时向对象添加属性，这就跟绝大多数基于类的、静态的对象设计完全不同。下面这段代码就展示了运行时如何向一个对象添加属性，一开始定义了一个对象 o，定义完成之后，再添加它的属性 b，这样操作是完全没问题的。

var o = {
    a: 1 };
o.b = 2;
console.log(o.a, o.b); //1 2

同时为了提高抽象能力，JavaScript 的属性被设计成比别的语言更加复杂的形式，它提供了数据属性和访问器属性（getter/setter）两类。

JavaScript 对象的两类属性

对 JavaScript 来说，属性并非只是简单的名称和值，JavaScript 用一组特征（attribute）来描述属性（property）。

第一类属性，数据属性：它比较接近于其它语言的属性概念。数据属性具有四个特征：

value：就是属性的值。
writable：决定属性能否被赋值。
enumerable：决定 for in 能否枚举该属性。
configurable：决定该属性能否被删除或者改变特征值。

通常用于定义属性的代码会产生数据属性，其中的 writable、enumerable、configurable 都默认为 true。

var o = {
    a: 1 };
o.b = 2;
//a和b皆为数据属性
Object.getOwnPropertyDescriptor(o,"a") // {value: 1, writable: true, enumerable: true, configurable: true}
Object.getOwnPropertyDescriptor(o,"b") // {value: 2, writable: true, enumerable: true, configurable: true}

如果要想改变属性的特征，或者定义访问器属性，我们可以使用 Object.defineProperty：

var o = {
    a: 1 };
Object.defineProperty(o, "b", {
   value: 2, writable: false, enumerable: false, configurable: true});
//a和b都是数据属性，但特征值变化了
Object.getOwnPropertyDescriptor(o,"a"); // {value: 1, writable: true, enumerable: true, configurable: true}
Object.getOwnPropertyDescriptor(o,"b"); // {value: 2, writable: false, enumerable: false, configurable: true}
o.b = 3;
console.log(o.b); // 2

第二类属性是访问器（getter/setter）属性，它也有四个特征：

getter：函数或 undefined，在取属性值时被调用。
setter：函数或 undefined，在设置属性值时被调用。
enumerable：决定 for in 能否枚举该属性。
configurable：决定该属性能否被删除或者改变特征值。

访问器属性使得属性在读和写时执行代码，它允许使用者在写和读属性时，得到完全不同的值，它可以视为一种函数的语法糖（vue）。

在创建对象时，也可以使用 get 和 set 关键字来创建访问器属性，代码如下所示：

var o = {
    get a() {
    return 1 } };
console.log(o.a); // 1

访问器属性跟数据属性不同，每次访问属性都会执行 getter 或者 setter 函数。这里我们的 getter 函数返回了 1，所以 o.a 每次都得到 1。

实际上 JavaScript 对象的运行时是一个“属性的集合”，属性以字符串或者 Symbol 为 key，以数据属性特征值或者访问器属性特征值为 value。

对象是一个属性的索引结构（索引结构是一类常见的数据结构，我们可以把它理解为一个能够以比较快的速度用 key 来查找 value 的字典）。我们以上面的对象 o 为例，你可以想象一下“a”是 key。{writable:true,value:1,configurable:true,enumerable:true}是 value。

类

从 ES6 开始，JavaScript 提供了 class 关键字来定义类，尽管，这样的方案仍然是基于原型运行时系统的模拟，但是它修正了之前的一些常见的“坑”，统一了社区的方案，这对语言的发展有着非常大的好处。

继承是指将特性从父代传递给子代，以便新代码可以重用并基于现有代码的特性进行构建。JavaScript 使用对象实现继承。每个对象都有一条链接到另一个称作原型的对象的内部链。该原型对象有自己的原型，依此类推，直到原型是 null 的对象。根据定义，null 没有原型，并作为这条原型链中最后的一环。

JavaScript 是基于原型来描述面向对象的特征；
“基于类”的编程提倡使用一个关注分类和类之间关系开发模型。在这类语言中，总是先有类，再从类去实例化一个对象。类与类之间又可能会形成继承、组合等关系。类又往往与语言的类型系统整合，形成一定编译时的能力。与此相对，“基于原型”的编程看起来更为提倡程序员去关注一系列对象实例的行为，而后才去关心如何将这些对象，划分到最近的使用方式相似的原型对象，而不是将它们分成类。基于原型的面向对象系统通过“复制”的方式来创建新对象。

其实 JavaScript 并非第一个使用原型的语言，在