JavaScript高级应用——类与函数篇

Type

Note：JavaScript为弱类型的语言

Note：定义变量a的方法为： “var a;”且可以在定义的同时指定值，编译器将根据给定的值来判断类型。

Javascript is a dynamically and weakly typed language. Variables are declared with the keyword var, and the type of the variable is inferred at run-time. Common simple types, such as Number, String, and Boolean are supported. The most important type however is the Object type; almost everything in Javascript is an object.

JavaScript是一种动态的弱类型的语言。变量使用var作为关键字进行定义，变量的类型在运行的时候才进行推断。JavaScript支持Number、String和Boolean型的变量，当然其中最重要的类型就是类类型，基本上JavaScript中的所有的东西都是由类构成的。

Arrays

Note：数组有两种定义方式：

example:
<script type="text/javascript">
var a = [1，2，3]；
//或者
var a = new Array(3);
</script>

默认情况下，如果没有定义a为数组，则不能在程序中直接采用下标方式[]，引用a中的成员，因为默认情况下，a是采用var定义的变量。

example：
<script type="text/javascript">
var a；
a[0] = 1；//此行出错，提示a[0]未定义
</script>

这种情况在多维数组情况下需要特别的注意。

Note：JS数组可以是任意类型的数值，数组长度可实时改变。

Javascript has built-in Array objects. Arrays in Javascript are different from C or Java arrays - a Javascript array is actually a collection of arbitrary values. The values don't have to be of the same type, and the array length may change at run time.

example:
<script type="text/javascript">
var a = [3,2,1];
a.push(7); // [3,2,1,7]
alert(a);
a.sort(); // [1,2,3,7]
alert(a);
alert(["a", "b"].indexOf("b")); // 1
</script>

Note：数组的长度随着你的定义得最大的下标，进行动态更改。

example：
<script type="text/javascript">
var a = [1,2];
a[15] = 15;
</script>

则，a的下标大小从0-15共16个。

Note:多维数组的定义

如果要定义a = [[],[],[]]

在JavaScript中为：

example:
<script type="text/javascript">
var a = new Array(3);//line 1
a[0] = new Array();//line 2
a[1] = new Array(); //line 3
a[2] = new Array(); //line 4
</script>

如果在line 2中没有定义 a[0]，则，如果后面引用a[0][[0]会出错，因为默认情况下，a[0]为var，不是数组。这点是与普通数组一致的

 

Objects

对象，是组形式的数据对。Java 中叫 Map，Python 叫 dictionary。

var emptyMap = {};
var homogeneousMap = {"one": 1, "two": 2, "three": 3};
var heterogeneousMap = {"one": 1,
"two": "two",
"three": 3.0};

One of the most important concepts in Javascript is the "object". Each object is basically a set of key-value pairs. It is called a Map in Java, hash (perl), or dictionary (Python).

Keys can be arbitrary strings, values can be anything.

Objects can be created, in particular, using the {} literal notation, using the Object and other contructors with the new operator:

用大括号或者 new 操作符来创建对象

example:
<script type="text/javascript">
var simpleObject = {a:1}, emptyObject = new Object();
var dateObject = new Date();
alert(simpleObject);
alert(emptyObject);
alert(dateObject);
</script>

Properties access

对象属性访问。用. 语法或者中括号 [] 下标语法访问属性。

Properties assignment
属性赋值

Similarly, you can assign to properties of an object:

homogeneousMap["red blue"] = 10;
homogeneousMap.two = 20;

Properties removal
删除属性

delete homogeneousMap["one"];
delete homogeneousMap.two;

Iteration
遍历。用 for [color#c00]key[/color] in [color#c00]Object[/color] 语句

<script type="text/javascript">
var heterogeneousMap = {"one": 1,"two": "two", "three": 3.0};

for (var key in heterogeneousMap)
{
window.alert("heterogeneous map property /"" + key + "/" = " + heterogeneousMap[key]);
}
</script>

Only iterates over enumerable properties. For example, length is a property of an array, but a for..in loop doesn't iterate over it:
for...in 用于可枚举的属性而不是length。

example:
<script type="text/javascript">
var arr = ["a","b"]; alert(arr.length); // 2
for(var prop in arr) alert(prop); // alerts 1 and 2.
</script>

Functions

函数是对象的一种形式。能够动态地创建、存储、传输以及返回值。

Functions are first-class objects. That means that they can be created dynamically, stored, passed and returned just like any other value.

example:
<script type="text/javascript">
var callable = function (message)
{
  // <-- notice assignment
  window.alert(;Callable called with message = " + message);
}
function callCallable(f, x)
{
  f(x);
}
callCallable(callable, "Hello world!");
</script>

Closures are supported:

example:
<script type="text/javascript">
function createClosure(initial)
{
  var res = function ()
  {
    initial = initial + 1;
    window.alert("Closure with modified state " + initial);
  }
  return res;
}
var f = createClosure(1);
f();
f();
// alerts 2 and 3
</script>

OOP in Javascript

javascript 中的面向对象方法

function MyObject(name, value)
{
  this.name = name;
  this.value = value;
}

JavaScript中的对象系统是基于原型的，这也意味着它与普通的面向对象语言，比如Java和C++不一样。基于原型意味着，建立新类的时候，是新建一个包含指定的属性和方法的构造函数，而并不是不是新建立一个类类型。this关键字用于指代那个类生成的实例。可以这样理解this对象，它本质上就是一个包含成员入口的属性列表。

生成MyObject类实例的方法如下：

var my = new MyObject("foo", 5);

如果类不需要参数的情况下，可以省略()，如下：

function MyObject2()
{
  this.name = "cc";
  this.value = 1;
}
var my2 = new MyObject2;

事实上采用typeof查看MyObject的类型，会发现它是function；但是my的typeof就是Object

类的原型：Prototype

任何类都有默认的属性prototype

使用this与prototype定义类的区别

example：
<script type="text/javascript">
function A()
{
  this.value1 = 1;
  this.func1 = function(){};
  A.value2 = 2;
  A.func2 = function(){};
}
A.prototype.value3 = 3;
A.prototype.func3 = function(){};
var x= new A;
</script>

则，A拥有的属性与方法如下所示：

Methods: func2
Fields: value2
Fields of prototype of prototype: prototype
则，A.prototype拥有的属性与方法如下所示：

Methods: func3
Fields: value3
则，A的实例x拥有的属性与方法如下所示：

Methods: func1
Fields: value1
Methods of prototype: func3
Fields of prototype: value3
也就是说实例x没有属性value2和方法func2

总结如下：
1.类A包含它自己本身的属性value2和方法func2，以及内置的prototype
2.this也是一个类，它为类A的实例x所拥有，而不为类A所拥有

值得注意的是类A的属性value2和方法func2，在它本身定义的时候并不存在，也就是说在，语句“var x= new A;”之前不存在，直到语句“var x= new A;”之后才存在。也就是说，类A自身的属性和方法直到它被第一次实例化之后才有意义。但是A.prototype的属性和方法与此不同，它自从定义的时候就存在了，与实例化无关。

Note：this与prototype定义的命名冲突的情况

事实上，编译器尝试先搜索this定义的属性或者方法，当找不到的时候才在prototype中进行寻找。

example：
<script type="text/javascript">
function C()
{
  this.value1 = 1;
  this.func1 = function(){};
}
C.prototype.value1 = 3;
C.prototype.func1 = f
a379
unction(){};
var y = new C;
</script>

在这种情况下,y.value1输出的值为1，也就是说C.prototype.value1的取值也之无关。

类中静态属性和方法的定义

目前被认可的有两种方法：（同样用上例作说明）
1.采用上述A.value定义静态属性，采用A.func定义静态方法
2.采用上述A.prototype.value定义静态属性，采用A.prototype.func定义静态方法
在一些文献中，
称A.value定义的属性为static class variables
称A.func定义的方法为static class functions
称A.prototype.value定义的属性为shared member variables
称A.prototype.value定义的方法为shared member functions

采用方法1和2在一般情况下是一样的，但是还是有一定的差别，举例说明如下：

(1).类A的实例x并没有属性value2和方法func2，也就是说x.value2和x.func2都不存在，只存在A.value2和A.func2
(2). x.value3改变的时候 A.prototype.value3不改变，但是 A.prototype.value3改变的时候 x.value3将随之改变

example：
<script type="text/javascript">
function A()
{
  this.value1 = 1;
  this.func1 = function(){};
  A.value2 = 2;
  A.func2 = function(){};
}
A.prototype.value3 = 3;
A.prototype.func3 = function(){};
var x= new A; //x.value3 = 3;
x.value3 = 33;//A.prototype.value3 = 3;同时x.value3 = 33;
A.prototype.value3 = 333;//A.prototype.value3 = 333;同时x.value3 = 333;
</script>

类中继承

var parentPropertyMap = {"bar": "I'm the bar"};

// Define the constructor with inheritable properties
function ChildObject(foo) {
this.foo = foo;
}
ChildObject.prototype = parentPropertyMap;

childPropertyMap1 = new ChildObject("I'm the foo1");
childPropertyMap2 = new ChildObject("I'm the foo2");

// Prints "childPropertyMap1.foo = I'm the foo1"
window.alert("childPropertyMap1.foo = " + childPropertyMap1.foo);

// Prints "childPropertyMap2.foo = I'm the foo2"
window.alert("childPropertyMap2.foo = " + childPropertyMap2.foo);

// Prints "childPropertyMap1.bar = I'm the bar"
window.alert("childPropertyMap1.bar = " + childPropertyMap1.bar);

// Prints "childPropertyMap2.bar = I'm the bar"
window.alert("childPropertyMap2.bar = " + childPropertyMap2.bar);
The member foo is an instance member added to the
instance's property map during construction:

function ChildObject(foo) {
this.foo = foo;
}

while bar is in the constructor's prototype:

var parentPropertyMap = {"bar": "I'm the bar"};
...
ChildObject.prototype = parentPropertyMap;

which is ''inherited'' during the new operation:

childPropertyMap1 = new ChildObject("I'm the foo1");
childPropertyMap2 = new ChildObject("I'm the foo2");

In other words, the member, bar, is shared across all instances of ChildObject.

Therefore, by implementing the prototype member of the constructor function, we can think of the constructor function itself as the "class" object.

example：
<script type="text/javascript">

</script>