js入门

142 阅读8分钟

JS的诞生

JavaScript是一种动态类型、弱类型、基于原型的语言。

  静态动态类型    静态动态类型描述了编程语言进行类型检查的阶段:- 静态类型语言在编译阶段进行检查类型,在编译时便已确定变量的类型;

-   动态类型语言在运行阶段进行检查类型,待变量被赋予某个值之后,才会具有某种类型。    举一些例子,这是一段 C/C++ 的代码```
int a = 18; a = "haha";
```    这段代码在编译时会报错 Compiler Error: '=': cannot convert from 'const char [5]' to 'int',因为 a 已经是 int 类型了,无法变成字符串数组( char [])类型。所以 C/C++ 是静态类型语言。    再看类似代码在 JavaScript 中的表现:```
let a = 18; a = "haha"; console.log(a);
```    执行后控制台会打印 haha,因为 a 的类型在运行时发生了改变,由 number 变为 string,所以 JavaScript 是动态类型语言。

  强弱类型    强弱类型描述了编程语言对于混入不同数据类型的值进行运算时的处理方式:- 强类型语言对类型的要求很严格,很强势,当遇到参与运算的类型不同或不符合规则时,往往会编译失败;

-   弱类型语言对类型的要求不严格,很松散,在编译阶段时遇到数据类型有问题时,往往会进行**隐式转换**,这使得开发者在编写代码时对数据类型的处理可以更随意。    举一些例子,先看下面这行 Python 代码:```
'x' + 3
```    执行后会报错 TypeError: can only concatenate str (not "int") to str,因为参与字符串连接运算的第二个操作数不符合规则。所以 Python 是强类型的语言。    再看类似代码在 JavaScript 中的表现:```
console.log("x" + 3);
```    执行后控制台会打印 x3,因为编译器将 3 隐式转换成了 '3',使得字符串连接操作可以进行。所以 JavaScript 是弱类型的语言。

  JavaScript与其他语言的区别    

从静态类型还是动态类型来看。

  • C、C++、Java都属于静态类型语言。
  • JavaScript、Python属于动态类型语言。    

从编译型还是解释型来看。

  • 编译型语言:像C、C++,需要编译器编译成本地可执行程序后才能运行,由开发人员在编写完成后手动实施。程序执行效率比较高,但比较依赖编译器,因此跨平台性差一些;
  • 解释性语言:像JavaScript、Python,程序不需要编译,程序在运行时才翻译成机器语言,每执行一次都要翻译一次。运行效率一般相对比较低,依赖解释器,跨平台性好;
  • Java语言:是编译性-解释性语言,分为两个阶段。第一阶段,像C++语言一样,java文件先编译成与平台无关的.class的字节码文件。第二阶段,由Java虚拟机(JVM)运行字节码,使用解释器执行这些代码;JVM从.class的字节码文件中读出一条指令,翻译一条指令,然后执行一条指令,这个过程就称为java的解释执行。    

    其它方面的比较。

    • 所采取的变量不同:JavaScript 中的变量声明采用弱类型,即变量在使用前不需作声明,而是解释器在运行时检查其数据类型。Java 采用强类型变量检查,即所有变量在编译之前必须作声明;

    • js是单线程,java是多线程;

    • js可以直接在任何浏览器上运行,java需要借助虚拟机实现跨平台;

JS的运行环境

目前JavaScript脚本的运行环境有浏览器node.js环境两种:

JavaScript被定义为一种浏览器的脚本语言,一直以来其运行环境都是客户端浏览器,因为JavaScript设计的初衷就是做一些浏览器与用户的交互和一些网页的特效来补充HTML和CSS的不足。

1. 在2009年,诞生了node.js技术,node.js是一个Javascript运行环境(runtime)。实际上它是对Google V8引擎进行了封装, node.js是一个基于Chrome JavaScript运行时建立的平台, 用于方便地搭建响应速度快、易于扩展的网络应用。node.js使得JavaScript可以运行在服务器端作为一种服务器脚本语言运行,类似于php等动态语言。

2. 判断JavaScript脚本运行在浏览器还是node.js环境中:

this === window ? 'browser' : 'node';
  • 通过判断Global对象是否为window,如果不为window,则当前脚本运行在node.js环境中。
  • javascript的代码之所以能被执行,是因为javascript解释引擎的存在,每一款浏览器都会有JS引擎。
  • 浏览器外要运行javascript的代码,同样需要这个东西。js之父用javascript写的Narcissus,java语言写的Rhino,等等,都是js引擎,都能独立在浏览器之外运行。

JS的代码规范

  JavaScript 代码规范

JS的三大组成部分

  • JavaScript 的核心 ECMAScript 描述了该语言的语法和基本对象;

  • DOM(文档对象模型) 描述了处理网页内容的方法和接口;

  • BOM (浏览器对象模型) 描述了与浏览器进行交互的方法和接口。

  •   1.ECMAScript

  1. ECMAScript 并不与任何具体浏览器相绑定,实际上,它也没有提到用于任何用户输入输出的方法(这点与 C 这类语言不同,它需要依赖外部的库来完成这类任务)。那么什么才是 ECMAScript 呢?ECMA-262 标准(第 2 段)的描述如下:> “ECMAScript 可以为不同种类的宿主环境提供核心的脚本编程能力,因此核心的脚本语言是与任何特定的宿主环境分开进行规定的... ...”    
  2. Web 浏览器对于 ECMAScript 来说是一个宿主环境,但它并不是唯一的宿主环境。事实上,还有不计其数的其他各种环境(例如 Nombas 的 ScriptEase,以及 Macromedia 同时用在 Flash 和 Director MX 中的 ActionScript)可以容纳 ECMAScript 实现。那么 ECMAScript 在浏览器之外规定了些什么呢?    简单地说,ECMAScript 描述了以下内容:
  • 语法

  • 类型

  • 语句

  • 关键字

  • 保留字

  • 运算符

  • 对象    

    ECMAScript 仅仅是一个描述,定义了脚本语言的所有属性、方法和对象。 其他语言可以实现 ECMAScript 来作为功能的基准,JavaScript 就是这样:    每个浏览器都有它自己的 ECMAScript 接口的实现,然后这个实现又被扩展,包含了 DOM 和 BOM)。当然还有其他实现并扩展了 ECMAScript 的语言,例如 Windows 脚本宿主(Windows Scripting Host, WSH)、Macromedia 在 Flash 和 Director MX 中的 ActionScript,以及 Nombas ScriptEase。

  •     ES6      ECMAScript 6.0(简称 ES6)是 JavaScript 语言的下一代标准,已经在 2015 年 6 月正式发布了。它的目标,是使得 JavaScript 语言可以用来编写复杂的大型应用程序,成为企业级开发语言。- ES6 主要是为了解决 ES5 的先天不足

    • 主流的浏览器都已经全面支持ES6
    • 行业内较新的前端框架都已经全面使用ES6的语法
    • 微信小程序,uni-app等都是基于ES6的语法
    • let、const、解构赋值、模板字符串......
  •   2.DOM    DOM(文档对象模型)是 HTML 和 XML 的应用程序接口(API)。DOM 将把整个页面规划成由节点层级构成的文档。HTML 或 XML 页面的每个部分都是一个节点的衍生物。请考虑下面的 HTML 页面:```html

    Sample Page

    hello world!

    ```    这段代码可以用 DOM 绘制成一个节点层次图:![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/92ba1d8736ae4ed492b31ffa4a86c676~tplv-k3u1fbpfcp-zoom-1.image)    DOM 通过创建树来表示文档,从而使开发者对文档的内容和结构具有空前的控制力。用 DOM API 可以轻松地删除、添加和替换节点。
  •   3.BOM    IE 3.0 和 Netscape Navigator 3.0 提供了一种特性 - BOM(浏览器对象模型),可以对浏览器窗口进行访问和操作。使用 BOM,开发者可以移动窗口、改变状态栏中的文本以及执行其他与页面内容不直接相关的动作。使 BOM 独树一帜且又常常令人怀疑的地方在于,它只是 JavaScript 的一个部分,没有任何相关的标准。    BOM 主要处理浏览器窗口和框架,不过通常浏览器特定的 JavaScript 扩展都被看做 BOM 的一部分。这些扩展包括:- 弹出新的浏览器窗口

    • 移动、关闭浏览器窗口以及调整窗口大小
    • 提供 Web 浏览器详细信息的定位对象
    • 提供用户屏幕分辨率详细信息的屏幕对象
    • 对 cookie 的支持
    • IE 扩展了 BOM,加入了 ActiveXObject 类,可以通过 JavaScript 实例化 ActiveX 对象    由于没有相关的 BOM 标准,每种浏览器都有自己的 BOM 实现。有一些事实上的标准,如具有一个窗口对象和一个导航对象,不过每种浏览器可以为这些对象或其他对象定义自己的属性和方法。