开发你不能忽略的问题？JavaScript（JS）

一、​JavaScript基础加强​

JavaScript是在浏览器内容运行，无需编译、解释执行动态脚本语言，是一种弱类型语言，所有变量使用var定义。

JavaScript的3个组成部分分别为：核心(ECMAScript)、文档对象模型(DOM)、浏览器对象模型(BOM)

1.​ECMAScript核心语法​

①：​代码编写位置​

分为内部JS和外部JS【使用src进行引入】

<meta http-equiv="Content-Type" content="text/html; charset=gbk">

<title>JavaScript程序编写</title>

<!-- 内部JS -->

<script type="text/javascript">

// 编写JavaScript代码

alert(1);

</script>

<!-- 外部JS-->

<script type="text/javascript" src="1.js"></script>

②：​学习顺序​

JavaScript依次从​变量​(标示符、关键字)，运算符，程序结构(if while for)，以及​函数​来进行学习。

(1)所有的变量使用var来定义，是弱类型变量，不代表没有类型，变量本身还是有类型的。【var a=10，var b=1.5；他们分别为整数以及浮点数类型】

(2)每行结尾分号可有可无，建议编写。

(3)注释和Java类似，支持单行注释(//)和多行注释(/* */)

③：​数据类型​

JavaScript分为原始数据类型和引用数据类型，分别存储于栈和堆中。

​原始数据类型​：number、string、boolean、null和undefined

​引用数据类型​：存在很多种，每种都是object对象

可以使用typeof查看数据类型，使用instanceof判断变量数据类型

​Demo:​

<script type="text/javascript">

// 定义所有变量都用var，但是变量本身具有类型

​​var​a = 10; // 整数

​​var​b = 1.5; // 浮点数

​​var​c = ​true​; // 布尔

​​var​d = "abc"; // 字符串 基本数据类型

​​var​e = 'abc'; // 字符串

// 通过typeof查看数据类型

alert(typeof d);

// 通过instanceof判断变量数据类型

alert(d instanceof Object);//falae

alert(a instanceof Object);//falae

​​var​s = ​new​String("abc"); // 对象类型

alert(s ​instanceof​Object);

</script>

④：​null和undefined的区分​

null：对象不存在；

undefined：对象存在，访问属性或者方法不存在(对象未初始化)

2.​ECMAScript对象​

ECMAScript常用的有7个对象，依次为String、Number、Boolean、Math、Date、Array以及Regxp。

①：​String类型常用属性方法​

建议查看手册，这里需要注意的为length属性以及match方法

charAt()、concat()、indexOf()、lastIndexOf()、match()、replace()、split()、substr()、substring()、toLowerCase()、toUpperCase()

Java中提供matches方法 例如："1234".matches("\\d+") ---- 返回true

JavaScript 与 matches方法等价的那个方法，是 RegExp 对象提供test方法

例如：/^\d+$/.test("1234") --- 返回true

/^\d+$/ 等价于 new RegExp("^\\d+$")

"1234".match("^\\d+$") 返回是匹配正则表达式内容，而不是布尔值，等价于 /^\d+$/.exec("1234")

②：​Math常用属性和方法​

PI 属性

round(x) 把数四舍五入为最接近的整数

random() 返回 0 ~ 1 之间的随机数

pow(x,y) 次幂

sqrt(x) 平方根

③：​Date常用属性和方法​

toLocaleString() 返回当地本地化日期格式 2012年12月12日 11:07:52

getTime() 返回从1970年1月1日到目前为止 毫秒值

​Demo：​

<script type="text/javascript">

​​var​s1 = "abc"; // s1是基本数据类型

​​var​s2 = ​new​String("abc") ; // s2是对象类型

// alert(s1 == s2); //

// alert("98"==98);// true

// alert("true"==true); // false

// alert(1==true); // true

​​var​d = 010;// 八进制

​​var​d2 = 0x10; // 十六进制

// match方法 类似 Java中 matches，有区别

// alert(/^\d+$/.test("1234abc")); // 等价于 java中matches

// alert("1234".match("^\\d+$")); // math方法返回的是匹配正则表达式内容，而不是布尔值

// alert(/^\d+$/.exec("1234abc1234"));// 返回匹配的内容

// Date使用

​​var​date = ​new​Date(); //当前日期

alert(date.toLocaleString());// 返回当地国际化日期格式

​​var​dateStr = date.getFullYear()+"-"+date.getMonth()

+"-"+date.getDate()+" "+date.getHours()+":"+date.getMinutes()

+":"+date.getSeconds();

alert(dateStr);

</script>

④：​Array常用属性方法​

push() 加入元素到数组

pop() 从数组移除最后一个元素

reverse()反转

join() 连接数组元素 通过特定内容 返回字符串

sort() 排序

slice() 截取数组中指定元素 从start到end

​Demo：​

<script type="text/javascript">

// 定义数组 使用Array对象

// 方式一

​​var​arr1 = [1,2,3];

// 数组的遍历 通过长度和下标

​​for​(​var​i=0;i< arr1.length ; i++){

// alert(arr1[i]);

}

// 方式二

​​var​arr2 = ​new​Array(3);// 定义长度为3的数组

arr2[0] = "aa";

arr2[1] = "bb";

arr2[2] = "cc"

arr2["100"] = "dd";

// alert(arr2.length);

// alert(arr2[4]);

// 方式三

​​var​arr3 = ​new​Array(1,2,3);// 数组三个元素 1, 2 ,3

// alert(arr3.join("-")); // 1-2-3

alert(arr3.slice(1,3)); // 从1下标，截取到3下标，1下标包含，3下标不包含

</script>

3.​ECMAScript核心语法——函数​

①：​函数定义的三种方式​

​注意：​第二种方式使用越来越多，第三种不常用，第一种常用

<script type="text/javascript">

// 方式一

​​function​add(a,b){ // 没有返回值，形参不需要声明类型

​​​return​a+b; // 可以返回

}

// alert(add(1,2));

// 方式二 function 匿名函数， sub成为函数名称

​​var​sub = ​function​(a,b){

​return​a-b;

}

// alert(sub(10,8));

// 方式三 使用Function对象 定义函数

// 语法 new Funtion(arg1,arg2 ... , body)

​​var​mul = ​new​Function("a","b","return a*b;"); // 不常用

// alert(mul(10,20));

// 所有函数 都是Function实例

alert(mul ​instanceof​Function);// true

</script>

②：JavaScript全局函数(内置函数)

一组与编码解码相关的函数

encodeURI()&decodeURI()

encodeURIComponent()&decodeURIComponent()

escape()&unescape()

此块具体内容请参照W3C文档查看。

4.​ECMAScript核心——JavaScript面向对象编程​

Java是面向对象，写Java程序，写类和对象。JavaScript是基于对象，写Js，不用创建类，使用Js内部已经定义好的对象。

①：​定义JavaScript对象的两种方式​

​方式一：使用已经存在的对象，通过关键字进行创建​

​var​s = ​new​String("aaaa");

​var​o = ​new​Object();

​var​date = ​new​Date();

// alert(date instanceof Object);// true

// JS对象 类似一个map结构

​​var​arr = ​new​Array(3);

arr[0] = 100;// 使用数组下标 为数组元素赋值

arr['aaa'] = 1000; // 定义对象属性

// alert(arr['aaa']);

arr.showInfo = ​function​(){// 定义对象方法

alert(arr.join(","));

};

// arr.showInfo(); //100, ,

Js其实就是一个类似map结构，key为属性名和方法名，value为属性值和方法定义

​方式二：通过{}创建​

​var​obj = {

name : '张三',

age : 20,

getName : ​function​(){

// 访问对象属性 通过关键字 this

​​​​return this​.name;

}

};

// 访问对象 属性 [] 和 .

// alert(obj.name);

// alert(obj["age"]);

alert(obj.getName());

// 添加一个方法到 obj对象

obj.getAge = ​function​(){

​return this​.age;

}

alert(obj.getAge());

JavaScript中的对象是通过 new function创建的，在Js中function等同于一个类结构

// 定义类 结构

​​var​Product = ​function​(name,price){

​this​.name = name; // 保存name的值 到对象属性中

​​​this​.price = price;

}

// 基于类结构创建对象，使用new 关键字

​​var​p1 = ​new​Product("冰箱",1000);

​var​p2 = ​new​Product("洗衣机",1500);

// alert(p1.name);

// alert(p1.price);

function本身代表一个函数，JavaScript对象通过new function来获得的，理解function就是对象构造函数

②：​Object和function的关系​

JavaScript中所有引用类型都是对象Object实例 ------- Function instanceOf Object //true

JavaScript 中所有对象都是通过 new Function实例(function) 获得 ------ Object instance Function //true

JavaScript所有对象构造函数都是function实例；JavaScript所有对象都是object实例，function也是object实例。

​使用JavaScript的传递性进行推论！​

A：function是用来定义一个函数，所有函数实例都是Function对象

B：JavaScript中，所有对象都是通过new function得到的

Var Object = function(){...}

Var String = function(){...}

Var Array = function(){...}

Var Date = function(){...}

结论：所有对象构造器都是Function实例

alert(String instanceOf Function) //true

alert(Object instanceOf Function) //true

C：创建一个对象，需要使用new function

Var s = new String()

Var o = new Object()

Var arr = new Array()

Var date = new Date()

结论：JavaScript中，一切对象都是object实例

alert(s instanceOf Object) //true

alert(Function instanceOf Object) //true

​var​f = ​new​Function(); // 实例化Function对象

​var​o = ​new​Object(); // 实例化Object对象

alert(f ​instanceof​Function); // true

alert(f ​instanceof​Object); // true

alert(o ​instanceof​Function); // false

alert(o ​instanceof​Object); // true

③：​function原型属性​

JavaScript所有对象都由function构造函数得来的 ，通过修改 function构造函数 prototype属性，动态修改对象属性和方法。

④：​继承​

A：使用原型链完成JavaScript单继承

​var​A = ​function​(){

​this​.name = 'xxx';

}

​var​B = ​function​(){

​this​.age = 20;

}

// 方式一 可以通过 prototype原型完成单继承B的原型指向A

B.prototype = ​new​A(); // 从A实例中，继承所有属性

​​var​b = ​new​B();

alert(b.name);

// 练习：通过prototype为String类添加一个trim方法

String.prototype.trim = ​function​(){

​return this​.replace(/(^\s*)(\s*$)/g, "");

}

B：对象冒充完成多继承

​var​C = ​function​(){

​this​.info = 'c';

}

​var​D = ​function​(){

​this​.msg = 'd';

}

​var​E = ​function​(){

// 同时继承C和D

​​​this​.methodC = C;

​this​.methodC();

​delete this​.methodC;

​this​.methodD = D;

​this​.methodD();

​delete this​.methodD;

​this​.desc = 'e';

}

​var​e = ​new​E();

// alert(e.info);

// alert(e.msg);

// alert(e.desc);

⑤：​动态方法调用​

可以改变this的指向，可以完成对象多继承

// 定义函数

​​function​printInfo(){

alert(​this​.name);

}

// 属性name 值 张三

​​var​o = {name: '张三'};

// o.printInfo();// 函数不属于对象o

// JS提供动态方法调用两个方法，允许一个对象调用不是属于它自己的方法(call apply)

// printInfo.call(o);

// printInfo.apply(o);

​​function​add(a,b){

​this​.sum = a+b;

}

// call传 多个参数

// add.call(o,8,10);

// apply 传递参数数组

add.apply(o,​new​Array(8,10));

// alert(o.sum);

// 动态方法调用 ，实现多重继承，原理就是对象冒充

​​var​A = ​function​(){

​this​.info = 'a';

}

​var​B = ​function​(){

// 动态方法调用继承

A.call(​this​);

}

​var​b = ​new​B();

alert(b.info);