前端开发之JavaScript基础篇三
主要内容：
3、JavaScript错误--Throw、Try 和 Catch
一、创建对象的几种方式
1、使用Object或者对象字面变量创建对象
（1）使用Object创建对象
例如：
var student = new Object();
student.name = "cc";
student.age = 20;
这样，一个student对象就创建完毕，拥有2个属性name以及age，分别赋值为“cc ”和20。
（2）使用对象字面量创建对象
例如：
var student = {
name:"cc";
age:20
};
但这样有一个问题就冒出来了，如果我们有成百上千个同样的类，student1、student2等等，
我们就不得不重复修改成百上千次。。。不禁泪流满面。。。
那么能不能向工厂车间一样，有一个车床就不断生产处对象呢？所以我们有利器--“工厂模式”！
2、工厂模式创建对象
注意：JavaScript没有类的概念，我们可以使用一种函数将以上对象创建过程封装起来
便于重复调用，同时给出特定接口来初始化对象。
例如：
function createStudent(name,age){
var obj = new Object();
obj.name = name;
obj.age = age;
return obj;
}
var stu1 = createStudent("cc1",20);
var stu2 = createStudent("cc2",21);
var stu3 = createStudent("cc3",22);
如此一来，我们就可以通过createStudent函数源源不断地“生产”对象了。看起来，已经非常
完美了，但贪婪的人类总是不满足的，我们不仅希望“产品”的生产可以像工厂车间一般源源不断，
我们还想知道生产的产品是哪一种类型的。
比如：我们又定义了生产水果对象的createFruit（）函数
function createFruit(name,color){
var obj = new.object();
obj.name = name;
obj.color = color;
return obj;
}
var stu = createStudent("jack",24);
var fruit = createFruit("apple",red);
注意：
对于对象stu，fruit，我们用instanceof操作符去检测，他们统统都是Object类型。
而我们希望知道s1是Student类型的，f1是Fruit类型的、为此，我们还得继续寻找，
用自定义构造函数的方法来创建对象。
3、构造函数模式创建对象（推荐）
在上面创建Object这样的原生对象时，我们就已经使用过构造函数了：
var obj = new Object();
在创建原生数组Array类型对象时，也是用过其构造函数：
var arr = new Array(10); // 构造一个初始长度为10的数组对象
（1）注意：
1、实际上并不存在创建构造函数的特殊语法，其与普通函数唯一的区别在于调用方法。对于任意函数，
使用new操作符调用，那么它就是构造函数；不使用new操作符调用，那么它就是普通函数。
2、按照惯例，我们约定构造函数名以大写字母开头，普通函数以小写字母开头，这样有利于显性区分二者。
例如上面的new Array()，new Object()。
（2）使用new操作符调用构造函数时，会经历4个阶段：
阶段1：创建一个新对象，如：
var a = new Object(name,age); 阶段2：将构造函数作用域赋给新对象（使this指向新对象），如： this.name =name; 阶段3：执行构造函数代码； 阶段4：返回新对象。
（3）了解构造函数和普通函数的区别后，我们使用构造将工厂模式的函数重写，并添加一个方法属性：
// 学生信息的构造函数
function Student(name,age){
this.name = name;
this.age = age;
this.alertName = function(){
alert(this.name)
};
}
// 水果的构造函数
function Fruit(name,color){
this.name = name;
this.color = color;
this.alertName = function(){
alert(this.name)
} ;
}
接着我们在创建Student和Fruit的对象
var s1 = new Student("cc",21);
var f1 = new Fruit("apple","red");
（4）我们使用 instanof 操作符去检测
alert(s1 instanceof Student) // true
alert(f1 instanceof Student) // false
alert(s1 instanceof Fruit ) // false
alert(f1 instanceof Fruit) // true
alert(s1 instanceof Object); //true 任何对象均继承自Object
alert(f1 instanceof Object); //true 任何对象均继承自Object
（5）构造函数的优化
我们会发现Student和Fruit对象中共有同样的方法，当我们进行调用的时候这无疑是内存的消耗
我们完全可以在执行该函数的时候再这样做，办法是将对象方法移到构造函数外部：
function Student(name,age){
this.name = name;
this.age = age;
this.callName = callName;
}
function callName(){
alert(this.name);
}
调用方式不变，仍然是创建对象，再调用。不同在于，在调用s1.alert()时，this对象才被绑定到s1上。
var s1 = new Student("cc",21);
var s2 = new Student("ss",22);
我们通过将callName()函数定义为全局函数，这样对象中的callName属性则被设置为指向该全局函数的指针。
由此stu1和stu2共享了该全局函数，解决了内存浪费的问题。
但是，又有问题来了？
通过全局函数的方式解决对象内部共享的问题，终究不像一个好的解决方法。如果这样定义的全局函数多了，
我们想要将自定义对象封装的初衷便几乎无法实现了。更好的方案是通过原型对象模式来解决。
4、原型的模式创建对象
原型链甚至原型继承，是整个JS中最难的一部分也是最不好理解的一部分，我也不太理解，很难说清楚，
下面给一个实例帮助大家来了解，更多内容可以去W3C的官网http://www.w3school.com.cn/index.html
实例如下：
function Student() {
this.name = 'cc';
this.age = 20;
}
Student.prototype.alertName = function(){
alert(this.name);
};
var stu1 = new Student();
var stu2 = new Student();
stu1.alertName(); //cc
stu2.alertName(); //cc
alert(stu1.alertName == stu2.alertName); //true 二者共享同一函数
二、JavaScript内置对象
1、String对象
（1）创建String对象的语法：
new String(s); // 当 String() 和运算符 new 一起作为构造函数使用时，它返回一个新创建的 String 对象，存放的是字符串 s 或 s 的字符串表示。
String(s); // 当不用 new 运算符调用 String() 时，它只把 s 转换成原始的字符串，并返回转换后的值。
// 参数 s 是要存储在 String 对象中或转换成原始字符串的值。
（2）String对象属性
constructor 对创建该对象的函数的引用。
length 字符串的长度
prototype 允许你像对象添加属性和方法
（3）String（字符串）对象的方法，如下图所示：
实例如下：
// String字符串对象
//length() 返回字符串长度
var str = 'Hello cc';
console.log(str.length); // 8
// charAt() 返回指定索引的位置的字符
var strIndex = "abcd efg";
console.log(strIndex.charAt(3)); // d
// concat() 返回字符串值，表示两个或多个字符串的拼接
var str1 = "hello ";
var str2 = "world!";
console.log(str1.concat(str2));// hello world!
// match() 返回正则表达式模式对字符串进行产找，并将包含查找结果作为结果返回
console.log(strIndex.match('f')); // ["fg", index: 6, input: "abcd efg", groups: undefined]
/* search(stringObject) 是否存在相应匹配。如果找到一个匹配，search方法将返回一个整数值，
指明这个匹配距离字符串开始的偏移位置。如果没有找到匹配，返回-1*/
var strSearch = "how are you ?";
console.log(strSearch.search('y')); // 8
console.log(strSearch.search('p')); // -1
// replace(a,b) 字符串b替换了a -- replace(a,b)
console.log(str.replace('cc','ab')); // Hello ab
//slice(start，end) 返回start到end-1之间的字符串，索引从0开始
var strToEnd = "never give up ...";
console.log(strToEnd.slice(1,6)); // ever
// substr(start,end) ，左闭右开
var subStr = str.substr(1,3);
console.log(subStr); // ell
// toUpperCase() 大写
var bigStr= str.toUpperCase();
console.log(bigStr) ; // HELLO CC
// toLowerCase() 小写
var smallStr= str.toLowerCase();
console.log(smallStr) ;// hello cc
// split(’a‘,1) 第一个参数是以什么样的字符串进行切割，第二个参数是返回的数组的最大长度
var newArr = str.split(' ',3);
console.log(newArr); // (2) ["Hello", "cc"]
2、Number 对象
在 JavaScript 中，数字是一种基本的数据类型，且只有一种数字类型。
JavaScript 还支持 Number 对象，该对象是原始数值的包装对象。
（1） 创建Number对象的语法
var myNum = new Number(value);
var myNum = Number(value);
注意：
① 极大或极小的数字可通过科学（指数）计数法来写：
var y=123e5; // 12300000
var z=123e-5; // 0.00123
② 所有 JavaScript 数字均为 64 位
JavaScript 不是类型语言。与许多其他编程语言不同，JavaScript 不定义不同类型的数字，比如整数、短、长、浮点等等。
JavaScript 中的所有数字都存储为根为 10 的 64 位（8 比特），浮点数。
（2）常用方法
// 1、toString() 将number类型转换成字符串类型
var num = 123.456;
var numStr = num.toString();
console.log(numStr,typeof numStr); // 23.456,string
// 2、toFixed() 四舍五入,括号内的参数表示保留几位小数
var numNex = num.toFixed(2) ;
console.log(numNex); // 123.46
3、Date 日期对象
（1）创建日期对象
创建日期对象只有构造函数一种方式，使用new关键字。
// 创建一个date对象
var myDate = new Date();
（2）常用方法及实例，如下图所示：
4、Math函数
（1）作用
Math（算数）对象的作用是：执行常见的算数任务。
（2）常用方法及实例如下所示：
三、JavaScript 错误 - Throw、Try 和 Catch
1、含义：
try 语句测试代码块的错误。
catch 语句处理错误
throw 语句创建自定义错误。
2、用法：
JavaScript 测试和捕捉
try 语句允许我们定义在执行时进行错误测试的代码块。
catch 语句允许我们定义当 try 代码块发生错误时，所执行的代码块。
JavaScript 语句 try 和 catch 是成对出现的。
语法：
try
{
//在这里运行代码
}
catch(err)
{
//在这里处理错误
}
3、实例：
!DOCTYPE html>
<html>
<head>
<script>
var txt="";
function message()
{
try
{
adddlert("Welcome guest!");
}
catch(err)
{
txt="There was an error on this page.\n\n";
txt+="Error description: " + err.message + "\n\n";
txt+="Click OK to continue.\n\n";
alert(txt);
}
}
</script>
</head>
<body>
<input type="button" value="View message" onclick="message()">
</body>
</html>
4、Throw语句
throw 语句允许我们创建自定义错误。
正确的技术术语是：创建或抛出异常（exception）。
如果把 throw 与 try 和 catch 一起使用，那么您能够控制程序流，并生成自定义的错误消息。
语法（异常可以是 JavaScript 字符串、数字、逻辑值或对象。）：
throw exception
实例;
<!DOCTYPE html>
<html>
<body>
<script>
function myFunction()
{
try
{
var x=document.getElementById("demo").value;
if(x=="") throw "值为空";
if(isNaN(x)) throw "不是数字";
if(x>10) throw "太大";
if(x<5) throw "太小";
}
catch(err)
{
var y=document.getElementById("mess");
y.innerHTML="错误：" + err + "。";
}
}
</script>
<h1>我的第一个 JavaScript 程序</h1>
<p>请输入 5 到 10 之间的数字：</p>
<input id="demo" type="text">
<button type="button" onclick="myFunction()">测试输入值</button>
<p id="mess"></p>
</body>
</html>
四、JavaScript 表单验证
1、含义：
JavaScript 可用来在数据被送往服务器前对 HTML 表单中的这些输入数据进行验证。
2、作用：
JavaScript 可用来在数据被送往服务器前对 HTML 表单中的这些输入数据进行验证。
被 JavaScript 验证的这些典型的表单数据有：
用户是否已填写表单中的必填项目？
用户输入的邮件地址是否合法？
用户是否已输入合法的日期？
用户是否在数据域 (numeric field) 中输入了文本？
3、必填或必选项目验证
下面的函数用来检查用户是否已填写表单中的必填（或必选）项目。假如必填或必选项为空，那么警告框会弹出，
并且函数的返回值为 false，否则函数的返回值则为 true（意味着数据没有问题）：
function validate_required(field,alerttxt)
{
with(field)
{
if(value==null || value=="")
{
alert(alerttxt);
return false;
}
else
{
return true;
}
}
}
完整代码：
<! DOCTYPE html>
<head>
<script type="text/javascript">
function validate_required(field,alerttxt)
{
with (field)
{
if (value==null||value=="")
{alert(alerttxt);return false}
else {return true}
}
}
function validate_form(thisform)
{
with (thisform)
{
if (validate_required(email,"Email must be filled out!")==false)
{email.focus();return false}
}
}
</script>
</head>
<body>
<form action="submitpage.htm" onsubmit="return validate_form(this)" method="post">
Email: <input type="text" name="email" size="30">
<input type="submit" value="Submit">
</form>
</body>
</html>
4、E-mail验证
下面的函数检查输入的数据是否符合电子邮件地址的基本语法。
输入的数据必须包含 @ 符号和点号(.)。同时，@ 不可以是邮件地址的首字符，并且 @ 之后需有至少一个点号：
function validate_email(field,alerttxt)
{
with (field)
{
apos=value.indexOf("@")
dotpos=value.lastIndexOf(".")
if (apos<1||dotpos-apos<2)
{
alert(alerttxt);
return false
}
else {return true}
}
}
完整代码：
<! DOCTYPE html>
<head>
<script type="text/javascript">
function validate_email(field,alerttxt)
{
with (field)
{
apos=value.indexOf("@")
dotpos=value.lastIndexOf(".")
if (apos<1||dotpos-apos<2)
{alert(alerttxt);return false}
else {return true}
}
}
function validate_form(thisform)
{
with (thisform)
{
if (validate_email(email,"Not a valid e-mail address!")==false)
{
email.focus();
return false
}
}
}
</script>
</head>
<body>
<form action="submitpage.htm"onsubmit="return validate_form(this);" method="post">
Email: <input type="text" name="email" size="30">
<input type="submit" value="Submit">
</form>
</body>
</html>
读书原为修身，正己才能正人正世；不修身不正己而去正人正世者，无一不是盗名欺世；你把念过的书能用上十之一二，就是很了不得的人了。——朱先生
