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谢谢

posted @ 2016-12-14 18:40 wrshun 阅读(242) 评论(0) 编辑收藏举报

会员力量，点亮园子希望

刷新页面返回顶部

天遮不住我的眼

JavaScript学习笔记（高级部分—02）

公告