JavaScript 学习笔记1

76 阅读5分钟

One

一:主流浏览器 内核 引擎

浏览器内核JavaScript引擎
IE(已停用)TridentTrident
EdgeChromiumV8
ChromeChromiumV8
SafariWebkitJavaScriptCore
FirefoxGeckoSpiderMonkey
OperaPrestoV8

二:浏览器历史和JS诞生

1、1990 蒂姆·伯纳斯·李(Tim Berners-Lee) ,在欧洲核子研究中心(CERN)研究超文本分享资讯,并提出了万维网概念。 1990年在CERN创建了世界上第一个网站和第一个网页浏览器。第一个网站是关于万维网的介绍,而第一个网页浏览器是WorldWideWeb。 world wide web 移植到C Libwww/nexus。 允许任何人浏览他人编写的网站。

2、1993 美国伊利诺大学NCSA组织(核心人员之一马克·安德森 Marc Andreessen) 开发---MOSIAC浏览器 显示图片 图形化浏览器

3、1994 马克·安德森和吉姆·克拉克(Jim Clark) 成立 MOSIAC communication corporation 插曲--->因为商标权的关系,公司被迫改名--->Netscape communication corporation MOSIAC 商标权隶属于 伊利诺大学,伊利诺大学又把MOSIAC转让给 SPY GLASS公司 Netscape communication corporation --->网景公司--->Netscape Navigator

4、1996 微软收购SPY GLASS--->在MOSIAC内核基础上--->开发IE Internet Exploror 1.0--->IE3.0 JScript 网景公司---Bredan eich 在Netscape Navigator开发出---livescript 网景公司与 SUN 公司合作,因市场宣传需要,为了蹭 Java 的热度,改名为 JavaScript

5、2001 微软 IE6 XP诞生 JS引擎

6、2003 mozilla公司 firefox--->netscape navigator基础上开发出来

7、2008 google 基于 WEBKIT BLINK GEARS开发 Chrome浏览器 Chrome--->V8引擎(JS引擎) 1、直接翻译机器码 2、独立于浏览器运行

8、2009 甲骨文Oracle 收购SUN公司 JS的所有权归属到甲骨文

三: ECMA

​ European Computer Manufactures Association ​ 欧洲计算机制造联合会---总部地址为日内瓦---瑞士中立国 ​ 评估、开发、认可电信、计算机标准 ​ ECMA - 262 脚本语言的规范,名称为ECMAScript ​ ES5 ES6 --- 规范化脚本语言

四:编程语言

编译型 源码---> 编译器--->机器语言--->可执行文件 特性:需要跨平台开销成本,执行效率高。

解释型 源码---解释器---解释一行就执行一行 特性:无需跨平台开销成本,执行效率相对较慢。

脚本语言 ---> 脚本引擎 ---> 解释器 ---> 解释一行就执行一行

脚本语言,分为客户端 / 服务端两类脚本语言。 JavaScript为客户端 PHP 为服务端

五:JavaScript学习三大块

ECMAScript 语法、变量、关键字、保留字、值、原始类型、引用类型、运算、对象、继承、函数 DOM document object model 文档对象模型 ,有统一规范,执行W3C标准 BOM browser object model 浏览器对象模型,没有统一规范,但可以写兼容性

六:JS引擎为单线程,但可以通过"轮转时间片"模拟多线程。

单线程是指在同一时间内,程序只能执行一条指令。

多线程是指在同一时间内,程序可以同时执行多个指令。

轮转时间片---短时间内轮流执行多个任务的片段。 执行流程: 1、任务1、任务2 2、分别将任务1和任务2切分成多个片段 3、随机排列这些任务片段,并组成队列 4、按照组成队列顺序将任务片段送进JS进程 5、JS线程执行一个又一个的任务片段 由于JS进程执行的很快,我们感受不到,所以感觉是多线程的。

七、JS代码书写位置

1、行内式:写入标签内部。 2、内嵌式:写入 script 双标签内 3、外链式:引入外部JS文件

行内式

<input type="button" value="左键单击" onclick="alert('行内式')" />

内嵌式

<script type="text/javascript"> 
    alert('内嵌式');
</script>

内嵌式(另一种用法,常见于企业级开发中的模板替换)

<script type="text/tpl" id="model"> 
    //js代码 
</script>

外链式

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <title>Document</title>
    </head>
    <body>
        <script src="index.js"></script>
    </body>
</html>

八:变量

前期的变量知识太简单,不想写,后面复杂的在继续写

九:JS的值

原始值--->基本数据类型 Number--->数值 String--->字符串 Boolean--->布尔值 Undefined--->未定义 null--->空值

引用值--->就是对象(万物即对象) Object--->对象 Array--->数组 Function--->函数 Date--->日期 Regexp--->正则

十:堆栈内存的初步理解

  1. 栈内存,先进后出原则,原始值存储在栈内存中,原始值不可改变,但可以覆盖,可以理解覆盖即删除的意思。
  2. 堆内存,引用值存储在堆内存中,栈内存中存储了引用值得地址(指针)。

image-20231025012910122.png

原始值---栈内存关系,代码演示:

var a = 10;			//声明一个变量a,并将数值10赋值给a这个变量;
var b = a;			//在声明一个变量b,并将变量a赋值给b,也就是变量a得值赋值给了b;
	a = 1;			//变量a又重新赋值1;
console.log(b,a);	//控制台打印变量a得值;
//打印结果:10 1

图解:

image-20231025023219338.png

引用值---栈与堆内存关系,代码演示:

var arr1 = [1,2,3,4];			//声明一个数组变量arr1,并赋值1,2,3,4给变量arr1
var arr2 = arr1;				//声明一个变量arr2,并将数组变量arr1的值赋值给arr2
console.log(arr1 + '|' + arr2);	//打印arr1与arr2
//打印结果:1,2,3,4 | 1,2,3,4
console.log('---分隔符---');
arr1.push(5);					//arr1数组下标4中插入一个数值5
console.log(arr1 + '|' + arr2);	//打印arr1与arr2
//打印结果:1,2,3,4,5 | 1,2,3,4,5
console.log('---分隔符---');
	arr1 = [1,2]				//变量数组arr1重新赋值 1,2
console.log(arr1 + '|' + arr2);	//打印arr1与arr2
//打印结果:1,2 | 1,2,3,4,5

图解:

image-20231025034906693.png