JavaScript笔记

JavaScript笔记

Web发展史

Mosaic，是互联网历史上第一个.

获普遍用和能够显示图片的网页浏览器。

于1993年问世。

1994年4月，马克.安德森和Silicon Graphics(简称为SGI，中译为“视算科技”或者“硅图”)公司的创始人吉姆.克拉克(jim Clark)在美国加州设立了“Mosaic Communication Corporation”.Mosaic公司成立以后，因为伊利诺伊大学拥有Mosaic的商标权，且伊利诺伊大学已将

技术转让给Spy Glass公司，开发团队必需彻底重新撰写浏览器程式码，且浏览器名称更改为Netscape Navigator,公司名字于1994年12月更改名为“Netscape Communication Corporation”，此后沿使用至今，中译为“网景”。微软的InternetExplorer及Mozilla Firefox等，其早期版本皆以Mosaic为基础而开发。微软随后买下Spy Glass公司的技术开发出Internet Explorer浏览器，而Mozilla Firefox则是网景通

讯家开放代码后所衍生出的版本。

js历史

JavaScript作为Netscape Navigator浏览器的一部分初次出现在1996年。

它最初的设计目标是改善网页的使用户体验。

作者：Brendan Eich

期初JavaScript被命名为LiveScript，后因和sun公司合作，因市场宣传需要改名JavaScript。后来sun公司被oracle收购，JavaScript版权归Oracle所有。

浏览器组成

1.Shell部分—–翻译为 贝壳

2.内核部分

渲染引擎（语法规则和渲染）

Js引擎

其余板块

Js引擎

2001年发布IE6，初次实现对js引擎的优化和分离。

2008年Google发布最新浏览器Chrome，它是采使用优化后的JavaScript引擎，

引擎代号V8，因能把js代码直接转化为机械码来执行，进而以速度快而闻名。

后Firefox也推出了具有强大功能的js引擎

Firefox3.5 TraceMokey（对频繁执行的代码做了路径优化）

Firefox4.0 leagerMokey

Js的逼格

? 解释性语言——（不需要编译成文件）跨平台

? 单线程

? ECMA标准——为了获得技术优势，微软推出了Jscript，

? Cenvi推出了ScriptEase，与JavaScript同样可在浏览器上运行，为了统一规格JavaScript兼容与ECMA标准，因而也称为ECMAScript

? 编译 C 、C++

优点：快

不足：移植性不好（不跨平台）

? .Java —— > javac ——— > .class ——— > jvm -——>解释性执行

? 解释：JavaScript、PHP、Python

优点：跨平台

不足：略微慢

Js三大部分

ECMAScript DOM BOM

主流浏览器

IE trident Trident内核一直延续到IE11,IE11的后继者Edge采使用了新内核EdgeHTML

Chrome webkit/blink

Chromium（Blink，V8）（开源）值得一提是谷歌专门研发了自己的JS引擎——V8，极大地提高了JS的运算速度。因为chromium也是开源的，所以搜狗、QQ、360都使用chromium内核。

自13年4月后，谷歌开始在Chromium项目中研发Blink渲染引擎，之前一直使用的是Webkit的渲染引擎。之所以研发独立的渲染引擎，是由于苹果推出的Webkit2与chromium的设计存在冲突，影响了chromium的架构移植工作

Firefox Gecko Gecko是Netscape6Z开始采使用的内核，是一个开源内核,后来被FF（FireFox）采使用

Opera presto 自Opera7.0开始用。13年2月后为了减少研发成本，放弃Presto,采使用chromium,之后也紧跟Blink的脚步。

Safafi webkit

如何引入js？

页面内嵌

外部引入

为了符合web标准（w3c标准中的一项）结构、样式、行为相分离，通常会采使用外部引入。

Js基本语法

变量(variable)

变量公告

公告、赋值分解

单一var

命名规则：

1. 变量名必需以英文字母、_、$开头

2. 变量名可以包括英文字母、_、$、数字

3. 不可以使用系统的关键字、保留字作为变量名

Js语句基本规则

1、 语句后面要使用分号结束

2、 Js语法错误解引发后续代码终止，但是不会影响其余js代码块

3、 书写格式要规范，= + / – 两边都应该有空格

document.write('你好');//输出语句

var a;//公告一个变量

a=1;//给变量赋值

var b=10;

document.writeln(a);//输出变量a的值

document.writeln(b);//输出b的值

var c = '世界真好，我却是如此的暴躁！',

d,

e,

f,

g;

document.writeln(c);

var ab=20;

var cd=30;//可以相加

document.writeln(ab+cd);

//原始值

// Number 、Boolean、 String 、undefined 、null

数字天生就是是浮点型

字符串，使用双引号或者单引号

布尔类型，

var cc=false;

var ccc=true;

var c1=undefined;

var c2=null;

document.writeln(c1);

document.writeln(c2);

//引使用值

var arr = [1,2,3,true,false,'世界真好，我却是如此的暴躁！']

document.writeln(arr[5]);

document.writeln(“

“);//可以将标签写在js中

var arr1 = [1];

var arr2 = arr1;

arr1.push(2);

? 可以写多个代码块，但是互不影响

? 运算操作符

+

1、 数学运算、字符串链接

2、 任何数据类型加字符串都等于字符串

– * / % = ()

优先级=最弱，()最高

++ — += -= /= *= %=

? NaN——Not a Number

? Infinity 无穷—数字类型

? 交换两个数。

? 比较运算符

> = <= !=

比较结果为Boolean类型

数字、汉字、字母(比较的是ASC)都可以进行比较。

undefined == undefined true

infinity == infinity true

NaN == NaN false

? 逻辑运算符

&amp;&amp; || !

? 被认定为false的值

undefined null nan “” 0 false

Var a = 1 &amp;&amp; 2;

Document.write(a);//2

先看第一表达式转换成布尔值的结果，假如结果为真，那么他会看第二个表达式转换为布尔值的结果，而后假如只有两个表达式的话，只需看到第二个表达式，就会返回该表达式的值了。

Var a = 1 &amp;&amp; 2+2;

Document.write(a);//4

Var a = 0 &amp;&amp; 2+2;

Document.write(a);//0

假如第一个表达式是false，那么就会返回第一个表达式的值。

假如第一个为真，就会继续往下看，第二个是真的，接着往下看，假如看到头都是真，就会把最后一个返回，假如有假的，就会返回假的值。

var a = 1 + 1 &amp;&amp; 1 – 1 ;

document.write(a);

2 > 1 &amp;&amp; document.write(“真哥很帅！”);

练习：

1、写出打印结果

var a =(10*3-4/2+1)%2,

b = 3;

b %= a+3;

document.write(a++);

document.write(“
”);

document.write(–b);

2、var a = 123; var b = 234;请交换 a,b的值。

条件语句

if if else if

if 和 &amp;&amp; 转换

for

while ,do while

if(1){

document.write(“真哥很帅！”);

}

var score = window.prompt(‘请输入值’);//接收输入的值

var score = parseInt(window.prompt(‘请输入值’));

//接收输入的值,转换为int类型

作业：

1.计算2的n次幂，n可输入，n为自然数

2.计算n的阶乘，n可输入

3.输入a,b,c三个数字，打印出最大的。

答案：

1.

var mul = 1;

for(var i = 0;i < n;i ++){

mul *= 2;

}

document.write(mul);

2.

var mul = 1;

for(var i = 1;i <= n;i++){

mul *= i;

}

document.write(mul);

浏览器控制台

条件语句补充：

switch case

case后的值的类型可以是任意类型。

break

continue

初识引使用值

数组

var array = [1,2,”abc”,undefined]

array.length

console.log();

对象

var obj = {

lastName:”deng”,

age:40,

sex:undefined,

handsome:false

}

console.log(obj.age);

编程形式的区别：

1、 面向过程

2、 面向过程

typeof

6种数据类型

number string boolean undefined object function

//object—->null [] {}

// function—-function(){}

var num = 123;

console.log(typeof(num));

console.log(typeof num);

var a = “2”*”3”

console.log(typeof(a)+”:”+a);

类型转换

1、显示类型转换

Number（mix）

var num = Number(“123”);

var num = Number(true);

var num = Number(undefined);—NaN—转不成的

parseInt(string,radix)

parseFloat(string)

toString(radix)—-undefined和null不能使用这个

String(mix)

Boolean()

2.隐式转换

isNaN()

console.log(isNaN(NaN))—-true

console.log(isNaN(“abc”))—-true

++ — + – （一元正负）

var a=”abc”;

a++;

+a 和 –a 都是数字类型

+ ———–> String类型

– * / %

&amp;&amp; || !

=

var a = 1>’2’;

false>true;

2>1>3

undefined== undefined

null==null

null=undefined

NaN==NaN

== !=

不发生类型转换

=== ！==

没有定义a，但是放在typeof种不会报错

console.log(typeof(a));

console.log(typeof(typeof(a)));

alert();

var num = 123.3455678;

document.write(num.toFixed(3));//保留3位小数

函数

定义

function test(){}

test();

1、 function 函数名(){函数体}

2、 函数名和变量名的起名规则一样

函数表达式

3、 var test = function abc(){}—–命名函数表达式

4、 var test = function(){}—–匿名函数表达式

可以打印出函数名 test.name

函数公告

组成形式

函数名称

参数

形参

实参

什么类型都可以。

形参和实参的个数可以不一致。

arguments—[11,2,3]—–形参

函数名.length

求任意数的和，利使用不定参

实参和形参数量一致时，有一个映射规则

arguments 和 变量是一致的 一个变 另一个也变

返回值

作使用域初探

作使用域定义：变量（变量作使用域又称上下文）和函数生效（能被访问）的区域

全局、局部变量

作使用域的访问顺序

js运行三部曲

语法分析：

代码是解释一行执行一行，但是在解释之前，要通篇扫描一遍看一下有没有语法错误。这个扫描的过程就是语法分析。

预编译：

? function test(){

console.log(‘a’);

}

test();

? test();

function test(){

console.log(‘a’);

}

? var a=123;

console.log(a);

? console.log(a);

var a=123;

//函数公告整体提升

//函数无论写在哪里，都会提升到逻辑最前面。

//变量 公告提升

var a =123;

会拆开写成

var a;//把公告变量提升到最前面

a=123;

但是处理不了深层次的问题，处理深层次的问题，必需要明白其底层原理。

console.log(a);

function a(a){

var a=234;

var a=function(){

}

a();

}

var a=123;

铺垫知识，预编译前奏：

1. imply global 暗示全局变量：即任何变量，假如变量未经公告就赋值，此变量就为全局对象所有。

eg:a = 123;

eg:var a = b = 123;

2. 一切公告的全局变量，全是window的属性。

eg:var a = 123;===>window.a=123;

var a=1;

// window.a=1

b=2;

// window.b=2;

window{

a:1

}

// window就是全局的域。

当我们公告一个变量的时候，这个变量就存放在window对象中，当我们输出的时候，就会去这里去找。

function test(){

var a=b=123;

}

test();

访问window.a是undefined，访问window.b是123,由于b归全局所有

window就是全局。

// 假如我们去公告3个变量

var a = 1;

var b = 2;

var c = 3;

// 其实就是相当于

// window{

// a : 1,

// b : 2,

// c : 3

// }

// 其实就是

// console.log(a)——>console.log(window.a);

预编译

四部曲：

1. 创立AO对象

2. 找形参和变量公告，将变量和形参名作为AO属性名，值为undefined

3. 将实参值和形参统一

4. 在函数体里面找函数公告，值赋予函数体

// 预编译发生在函数执行的前一刻

// 1.会创立一个AO 对象(Activation Object )

//(执行期上下文)

// AO{

// a:123,

// b:function(){},

// d:function d(){}

// }

例子：

function test(a,b){

console.log(a);

c = 0;

var c;

a = 3;

b = 2;

console.log(b);

function b(){}

function d(){}

console.log(b);

}

test(1);

例子：

function test(a,b){

console.log(a);

console.log(b);

var b = 234;

console.log(b);

a = 123;

console.log(a);

function a(){}

var a;

b = 234;

var b = function (){}

console.log(a);

console.log(b);

}

test(1);

全局的执行上下文

生成了一个GO对象 Global Object

例子：

console.log(test);

function test(test){

console.log(test);

var test = 234;

console.log(test);

function test(){}

}

test(1);

var test = 123;

例子：

var global = 100;

function fn(){

console.log(global);

}

fn();

例子：

global = 100;

function fn(){

console.log(global);

global = 200;

console.log(global);

var global = 300;

}

fn();

var global;

例子：

function test(){

console.log(b);

if(a){

var b = 100;

}

console.log(b);

c = 234;

console.log(c);

}

var a;

test();

a = 10;

console.log(c);

作使用域精解：

[[scope]]:每个JavaScript函数都是一个对象，对象中有些属性我么可以访问，但有些不可以，这些属性仅供JavaScript引擎存取，[[scope]]就是其中一个。

[[scope]]指的就是我们所说的作使用域，其中存储了运行期上下文的集合。

作使用域链：[[scope]]中存储的执行期上下文对象的集合，这个集合呈链式链接，我们把这种链式链接叫做作使用域链。

运行期上下文：当函数执行时，会创立一个称为执行期上下文的内部对象，一个执行期上下文定义了一个函数执行时的环境，函数每次执行时对应的执行上下文都是独一无二的，所以屡次调使用一个函数会导致创立多个执行上下文，当函数执行完毕，他所产生的执行上下文被销毁。

查找变量：从作使用域链的顶端依次向下查找。

闭包：

当内部函数被保存到外部时，将会生成闭包。闭包会导致原有作使用域链不释放，造成内存泄漏。

立即执行函数：

定义：此类函数没有公告，在一次执行过后即释放，适合做初始化工作。

(function(){

var a=123;

console.log(a);

}())

传参：

(function(a,b,c) {

console.log(a+b+c);

}(1,2,3))

闭包章节案例：