JavaScript学习笔记（高级部分—02）
47、switch语句的语法：
switch (i) {
case 20: alert("20");
break;
case 30: alert("30");
break;
case 40: alert("40");
break;
default: alert("other");
}
48、函数概述：函数是一组可以随时随地运行的语句 函数是由这样的方式进行声明的：关键字 function、函数名、一组参数，以及置于括号中的待执行代码。(代码来自w3school)
function sayHi(sName, sMessage) {
alert("Hello " + sName + sMessage);
}
函数可以通过其名字加上括号中的参数进行调用
49、arguments对象 在函数代码中，使用特殊对象arguments，开发者无需明确指出参数名，就能访问他们。 还可以用arguments对象检测函数的参数个数，引用属性arguments.length即可。 用arguments对象判断传递给函数的参数个数，即可模拟函数重载(代码来自w3school)
function doAdd() {
if(arguments.length == 1) {
alert(arguments[0] + 5);
} else if(arguments.length == 2) {
alert(arguments[0] + arguments[1]);
}
}
doAdd(10); //输出 "15"
doAdd(40, 20); //输出 "60"
50、function 对象（类）两种声明函数的方法：(代码来自w3school)
function sayHi(sName, sMessage) {
alert("Hello " + sName + sMessage);
}
var sayHi = new Function("sName", "sMessage", "alert(\"Hello \" + sName + sMessage);");
Function对象的length属性声明了函数的参数个数
Function对象也有与所有对象共享的valueOf()方法和toString()方法，这两个方法返回的都是函数的源代码，在调试时尤其有用。
51、ECMAScript最易让人误解的一点是，它支持闭包。闭包，指的是函数可以使用函数之外定义的变量。(代码来自w3school)
var sMessage = "hello world";
function sayHelloWorld() {
alert(sMessage);
}
sayHelloWorld();
52、面向对象技术：对象：属性的无序集合，每个属性存放一个原始值、对象或函数 类：每个对象都由类定义，可以把类看做对象的配方，类不仅要定义对象的接口，还要定义对象的内部工作（使属性和方法发挥作用的代码）
53、对象应用：声明和实例化 对象的创建方式是用关键字new后面跟上实例化的类的名字
54、对象类型 一般来说，可以创建并使用的对象有三种：本地对象、内置对象和宿主对象。常见本地对象：function Object Array Number等
55、对象作用域 在传统的面向对象程序设计中，主要关注于公用和私有作用域。公有作用域中的对象属性可以从对象外部访问。而私有作用域中的属性只能在对象内部访问，即对于外部世界来说，这些属性并不存在，这意味着如果类定义了私有属性和方法，则它的子类也不能访问这些属性和方法。 受保护作用域也是用于定义私有的属性和方法，只是这些属性和方法还能被其子类访问。 ECMAScript中只存在一种作用域，ECMAScript中所有对象的所有属性和方法都是公用的。 由于缺少私有作用域，开发者确定了一个规约，说明哪些属性和方法应该被看做私有的。这种规约规定在属性前后加下划线：obj._color_ = "blue";有些开发者还喜欢用单下划线说明私有成员，如：obj._color。 严格来说，ECMAScript并没有静态作用域，不过，它可以给构造函数提供属性和方法。 关键字this总是指向调用该方法的对象。
56、定义类或对象(代码来自w3school)
<html>
<body>
<script type="text/javascript">
function person(name,age){
var per=new Object();
per.name=name;
per.age=age;
per.showAge=function(){
alert(this.age);
}
return per;
}
var per1=person("a",16);
per1.showAge();
var per2=person("b",17);
per2.showAge();
</script>
</body>
</html>
<html>
<body>
<script type="text/javascript">
function showColor() {
document.write(this.color);
}
function createCar(sColor,iDoors,iMpg) {
var oTempCar = new Object;
oTempCar.color = sColor;
oTempCar.doors = iDoors;
oTempCar.mpg = iMpg;
oTempCar.showColor = showColor;
return oTempCar;
}
var oCar1 = createCar("red",4,23);
var oCar2 = createCar("blue",3,25);
oCar1.showColor();
document.write("<br />")
oCar2.showColor();
</script>
</body>
</html>
<html>
<body>
<script type="text/javascript">
function Car(sColor,iDoors,iMpg) {
this.color = sColor;
this.doors = iDoors;
this.mpg = iMpg;
this.showColor = function() {
document.write(this.color);
};
}
var oCar1 = new Car("red",4,23);
var oCar2 = new Car("blue",3,25);
oCar1.showColor();
document.write("<br />")
oCar2.showColor();
</script>
</body>
</html>
下面这种方式用的多一点
<html>
<body>
<script type="text/javascript">
function Car(sColor,iDoors,iMpg) {
this.color = sColor;
this.doors = iDoors;
this.mpg = iMpg;
this.drivers = new Array("Mike","John");
}
Car.prototype.showColor = function() {
document.write(this.color);
}; var oCar1 = new Car("red",4,23);
var oCar2 = new Car("blue",3,25); oCar1.drivers.push("Bill"); document.write(oCar1.drivers);
document.write("<br />")
document.write(oCar2.drivers); </script>
</body>
</html>
57、通过使用ECMAScript，不仅可以创建对象，还可以修改已有对象的行为。Prototype属性不仅可以定义构造函数的属性和方法，还可以为本地对象添加属性和方法。
通过已有的方法创建新方法，可以用prototype属性为任何已有的类定义新方法，就像处理自己的类一样。
我们还可以为已有的方法命名更易懂的名称。(代码来自w3school)
<html>
<body> <script type="text/javascript"> Array.prototype.enqueue = function(vItem) {
this.push(vItem);
}; Array.prototype.dequeue = function() {
return this.shift();
}; var arr = new Array(3)
arr[0] = "George"
arr[1] = "John"
arr[2] = "Thomas" arr.enqueue("Bill");
document.write(arr); document.write("<br />") arr.dequeue();
document.write(arr); </script> </body>
</html>
添加与已有方法无光的方法。
为本地对象添加新方法：如果想给ECMAScript中每个对象添加新方法，必须在Object对象的prototype属性上定义它。
就像给已有的类定义新方法一样，也可重定义已有的方法。
<html>
<body> <script type="text/javascript"> Function.prototype.originalToString = Function.prototype.toString; Function.prototype.toString = function() {
if (this.originalToString().length > 100) {
return "Function too long to display.";
} else {
return this.originalToString();
}
}; function sayHi() {
alert("hi");
} document.write(sayHi.toString()); </script> </body>
</html>
58、JavaScript中的每个对象都有prototype属性，JavaScript中对象的prototype属性的解释是：返回对象类型原型的引用。 A.prototype=new B(); 理解prototype不应把它和继承混淆，A的prototype为B的一个实例，可以理解为A将B中的方法和属性全部克隆了一遍，A能使用B的方法和属性。这里强调的是克隆而不是继承。可以出现这种情况：A的prototype是B的实例，同时B的prototype也是A的实例。
59、继承
60、继承机制实现：要用ECMAScript实现继承机制，你可以从要继承的基类入手，所有开发者定义的类都可作为基础，出于安全原因，本地类和宿主类不能作为基类，这样可以防止公用访问编译过的浏览器级的代码，因为这些代码可以被用于恶意攻击。
继承方式：1.对象冒充，其原理如下，构造函数使用this关键字给所有属性和方法赋值（即采用类声明的构造函数方式），因为构造函数只是一个函数，所以可使ClassA构造函数成为ClassB的方法，然后调用它，ClassB就会收到ClassA的构造函数中定义的属性和方法。例子如下：(代码来自w3school)
function ClassA(sColor) {
this.color = sColor;
this.sayColor = function () {
alert(this.color);
};
}
function ClassB(sColor) {
}
对象冒充可以实现多重继承
<html>
<head>
<title>Example</title>
</head>
<body>
<script type="text/javascript">
function ClassA(sColor) {
this.color = sColor;
this.sayColor = function () {
alert(this.color);
};
} function ClassB(sColor, sName) {
this.newMethod = ClassA;
this.newMethod(sColor);
delete this.newMethod; this.name = sName;
this.sayName = function () {
alert(this.name);
};
} var objA = new ClassA("blue");
var objB = new ClassB("red", "John");
objA.sayColor();
objB.sayColor();
objB.sayName(); </script> </body>
</html>
61、call()方法是与经典冒充方法最相似的方法，它的第一个参数用作this的对象，其他参数都直接传递给函数自身。(代码来自w3school)
<html>
<head>
<title>Example</title>
</head>
<body>
<script type="text/javascript">
function ClassA(sColor) {
this.color = sColor;
this.sayColor = function () {
alert(this.color);
};
} function ClassB(sColor, sName) {
ClassA.call(this, sColor); this.name = sName;
this.sayName = function () {
alert(this.name);
};
} var objA = new ClassA("blue");
var objB = new ClassB("red", "John");
objA.sayColor();
objB.sayColor();
objB.sayName(); </script> </body>
</html>
62、apply()方法有两个参数，用作this的对象和要传递给函数的参数的数组。(代码来自w3school)
function sayColor(sPrefix,sSuffix) {
alert(sPrefix + this.color + sSuffix);
};
var obj = new Object();
obj.color = "blue";
sayColor.apply(obj, new Array("The color is ", "a very nice color indeed."));
63、原型链 继承这种形式在ECMAScript中原本用于原型链的。原型链的弊端在于不能多继承。
64、混合模式---开发者的选择。(代码来自w3school)
<html>
<head>
<title>Example</title>
</head>
<body>
<script type="text/javascript">
function ClassA(sColor) {
this.color = sColor;
} ClassA.prototype.sayColor = function () {
alert(this.color);
}; function ClassB(sColor, sName) {
ClassA.call(this, sColor);
this.name = sName;
} ClassB.prototype = new ClassA(); ClassB.prototype.sayName = function () {
alert(this.name);
}; var objA = new ClassA("blue");
var objB = new ClassB("red", "John");
objA.sayColor();
objB.sayColor();
objB.sayName(); </script> </body>
</html>
以上便是我学习JavaScript时，所做的笔记，如果有地方错误，希望能够提醒我，O(∩_∩)O谢谢
JavaScript学习笔记（高级部分—02）的更多相关文章
- Java程序猿的JavaScript学习笔记（汇总文件夹）
最终完结了,历时半个月. 内容包含: JavaScript面向对象特性分析,JavaScript高手必经之路. jQuery源代码级解析. jQuery EasyUI源代码级解析. Java程序猿的J ...
- Java程序猿的JavaScript学习笔记（8——jQuery选择器）
计划按例如以下顺序完毕这篇笔记: Java程序猿的JavaScript学习笔记(1--理念) Java程序猿的JavaScript学习笔记(2--属性复制和继承) Java程序猿的JavaScript ...
- Java程序猿JavaScript学习笔记（2——复制和继承财产）
计划和完成在这个例子中,音符的以下序列: Java程序猿的JavaScript学习笔记(1--理念) Java程序猿的JavaScript学习笔记(2--属性复制和继承) Java程序猿的JavaSc ...
- Java程序猿的JavaScript学习笔记（3——this/call/apply）
计划按例如以下顺序完毕这篇笔记: Java程序猿的JavaScript学习笔记(1--理念) Java程序猿的JavaScript学习笔记(2--属性复制和继承) Java程序猿的JavaScript ...
- Java程序猿JavaScript学习笔记（4——关闭/getter/setter）
计划和完成这个例子中,音符的顺序如下: Java程序猿的JavaScript学习笔记(1--理念) Java程序猿的JavaScript学习笔记(2--属性复制和继承) Java程序猿的JavaScr ...
- Java程序猿JavaScript学习笔记（14——扩大jQuery UI）
计划和完成这个例子中,音符的顺序如下: Java程序猿的JavaScript学习笔记(1--理念) Java程序猿的JavaScript学习笔记(2--属性复制和继承) Java程序猿的JavaScr ...
- javascript学习笔记(四) Number 数字类型
数字格式化方法toFixed().toExponential().toPrecision(),三个方法都四舍五入 toFixed() 方法指定小数位个数 toExponential() 方法 用科学 ...
- JavaScript学习笔记之数组（二）
JavaScript学习笔记之数组(二) 1.['1','2','3'].map(parseInt) 输出什么,为什么? ['1','2','3'].map(parseInt)//[1,NaN,NaN ...
- JavaScript学习笔记[0]
JavaScript学习笔记[0] 使用的是廖雪峰JavaScript教程. 数据类型 Number 表示数字,不区分浮点整形. === 比较时不转化数据类型. == 反之. NaN与任何值都不想等, ...
- Java程序猿的JavaScript学习笔记（1——理念）
计划按例如以下顺序完毕这篇笔记: Java程序猿的JavaScript学习笔记(1--理念) Java程序猿的JavaScript学习笔记(2--属性复制和继承) Java程序猿的JavaScript ...
随机推荐
- 95秀-ViewPager 使用实例
Activity的样式 <style name="under_live_indicator" parent="android:Theme.NoTitleBa ...
- 95秀-弹窗+listview+动画 示例
Dialog布局 dialog.xml <?xml version="1.0" encoding="utf-8"?> <RelativeLay ...
- hdu 2211
题意: 中文题目,自己看.............. 递归调用.... 没什么难度,注意下long long就行........ AC代码: #include <iostream> #de ...
- 使用Javascript 实现类
/** * 人类 * @author rubekid */ function Person(options){ //私有属性 var _name; //姓名 var _age; //年龄 /** * ...
- 摘抄官方文档： spring boot配置 iframe同源可访问
使用java配置,跟spring security配置在一起 @EnableWebSecurity public class WebSecurityConfig extends WebSecurity ...
- 26.单片机中利用定时器中断,在主流程while(1){}中设置每隔精确时间计量
{ CountMilliseconds++;//只负责自加,加到最大又重新从0开始 } u16 setDelay(u16 t) { ); } u8 checkDelay (u16 t)//返回非零表示 ...
- 如何退出Activity？如何安全退出已调用多个Activity的Application？
如何退出Activity?如何安全退出已调用多个Activity的Application? 退出Activity直接调用finish()方法 //用户点击back键就是退出一个Activity 退出 ...
- php本页面调试报错配置
ini_set('display_errors', 'On'); ini_set('memory_limit', '64M'); //报错,详细 error_reporting(E_ALL); //不 ...
- jsp中的动作元素：<jsp:plugin>
<jsp:plugin>用来产生客户端浏览器的特别标签(object或embed),可以使用它来插入Applet或JavaBean. 当jsp文件被编译把结果发给浏览器是,<jsp: ...
- 解决百度Ueditor编辑器表格不显示边框问题
一.主要内容 CMS使用百度Ueditor编辑器中的表格功能,在编辑模式下可以正常显示边框,而文章发布之后表格不能显示边框.本博文经过查阅相关资料,最终解决了该问题. 二.使用平台 1. dedecm ...