javascript进阶——面向对象特性

浏览数：23 / 时间：2015年06月09日

面向对象的javascript是这门语言被设计出来时就考虑的问题，熟悉OOP编程的概念后，学习不同的语言都会发现不同语言的实现是不同的，javascript的面向对象特性与其他具有面向对象特性的语言的实现的区别比较大，通过不断编程实践才能逐渐体会到面向对象的优点从而形成自己独特的javascript面向对象实现方式，这也是编写可重用代码的关键。

一、语言特性

对象（Object）是组成javascript 的基本单元，javascript中一切都是对象。其中引用（reference）、作用域（scope）、闭包（closure）和上下文（context）是其最重要的几个部分。

1、引用

引用是一个指向对象实际位置的指针，其中实际对象不能是引用，也就是引用指向的只能是具体的对象，而不能是另一个引用（不同于C语言中允许多级指针、perl语言中允许多层引用）。javascript里的结果沿着引用链一直上溯到原来那个对象，通过维护一系列对其他对象的引用构成了一个引用系统，提供了极大的灵活性。当实际对象改变之后，原来指向它的引用依然保持指向旧的对象。

[html] view plain copy print ?

var obj = new Object();
var objRef = obj;
obj.oneProperty = 1;
alert(obj.oneProperty == objRef.oneProperty);//显示true
var items = new Array("1","2","3");
var itemsRef = items;
items.push("4");
alert(items.length == itemsRef.length);//结果是true，因为Array对象将数组元素作为其属性对象保存
items = new Array("one","two","three");
alert(items != itemsRef); //结果true，已经是两个不同的对象了

2、函数重载和类型检查

重载在其他很多面向对象语言（C#、C++、java等）中都有实现，但是javascript没有直接支持，但是javascript的函数有一个arguments对象，本质是一个只读数组（只能读取信息，不能修改）。函数重载依赖判断传入参数数量和判断传入参数类型。前者使用arguments.length来获取。

参数类型判断：

使用typeof操作符：返回一个字符串名称，表示变量内容的类型，当返回object时，自定义对象都是返回object，因此很难与其他对象区分。
构造函数constructor属性：引用的是原来用来构造该对象的那个函数名。

而在区别如下表：

变量	typeof的值	变量.constructor
{an:"object"}	"object"	Object
["an","array"]	"object"	Array
function(){}	"function"	Function
"a string"	"string"	String
55	"number"	Number
true	"boolean"	Boolean

3、作用域与闭包

javascript中作用于是由函数划分的，不是用块划分的。javascript运行时创建一个全局对象为其执行环境，为全局作用域，所有全局作用域中的变量都是window的属性。

闭包意味着内层的函数可以引用存在于包围它的函数内的变量，即使外层函数的执行已终止。

首先可以使代码清晰，调用过程简洁。其次可以实现Curry化，就是通过把多个参数填充到函数体中，实现将函数转化为一个新的经过简化的接收更少参数的函数的技术。同时，由于闭包只能使用外层函数中变量的最终值而不是该变量创建时的值，最常见的就是for循环中的计数器，在闭包中调用函数时计数器是最后一次赋值，可以使用匿名函数解决。

[javascript] view plain copy print ?

function delayAlert(msg,time){
setTimeout(function(){
alert(msg);
}, time);
}
delayAlert("welcome", 2000);//调用代码清晰简洁
function add(num){
return function(toAdd){return num + toAdd};
}
var addFive = add(5);
alert(add(4) == 9); //结果true，闭包实现函数的Curry化
var obj = document.getElementById("main");
var items = ["click", "keypress"];
for(var i = 0; i < items.length; i++){
(function(){
var item = items[i];
obj["on" + item] = function(){alert(item);};
})();
}
//使用匿名函数激发出作用域，for循环中获得当前循环时的i值

4、上下文对象

javascript运行时创建全局执行环境，全局对象就是window的属性，上下文对象通过this变量体现。this指向当前对象所在的作用域的直系父对象，同时，提供了call和apply两个方法来改变函数执行的上下文。

[javascript] view plain copy print ?

function changeColor(color){
this.style.color = color;
}
changeColor.call(document.getElementById("main"), "black");

二、面向对象编程

1、对象及方法

对象是一系列属性的集合，与其他语言里的散列表结果类似。创建方式有三种

使用new Object()，再单独添加属性和方法
使用{......}键值对创建
使用构造函数创建，任何函数都可以被实例化为一个对象。

公共方法：对象的每个实例中都可以使用的公共方法，使用prototype属性，包含了一个可以作为所有新实例的基引用的对象。给原型添加属性的结果就是由改原型实例化的每个对象都会获得这些属性。

私有方法：在构造函数中单独申明的方法，理解为一个函数中的作用域下的私有变量，实例化的对象不能在外部访问。

特权方法：查看处理私有变量的同时允许用户已公共方法方式访问的方法。是在动态生成的，运行时才添加到对象中，不是在代码第一次编译生成的，比往对象的prototype上绑定方法的开销大，但是功能更大更灵活。

静态方法：仅为组织代码而使用的方法，不能在该对象的实例上下文中访问，只属于主对象本身的那个上下文中。

[javascript] view plain copy print ?

function User(properties){
for( var i in properties){ (function(which){
var p = i;
which["get" + p] = function(){return properties[p];};
which["set" + p] = function(){properties[p] = val;};
})(this);)
}
}
//特权方法实例
var user = new User({name:"Bob",age:44});
alert(user.name == null); //没有name属性
alert(user.getname() == "Bob");//动态获取属性
user.setage(22);
alert(user.getage() == 22);//动态获取

2、继承

原型式继承：对象的构造函数可以从其他对象中继承方法，它创建出一个原型对象后，所有其他的新对象都可以基于这个原型对象来构建。

整个过程使用原型属性（prototype）来实现，这是每个函数都有的一个属性，适用于单继承而非多继承。

[javascript] view plain copy print ?

function Person(name){this.name = name;};
Person.prototype.getName = function(){return this.name;};
function User(name, password){this.name = name;
this.password = password;};
User.prototype = new Person();
User.prototype.getPassword = function(){return this.password;};

其中User对象的原型prototype设置为一个Person对象，因此每当实例化User对象时，得到的每个User对象都会带有Person对象所有的方法，从而如同操作Person对象一样。这个技巧可以简化javascript的继承而编写一系列的包装函数。

类式继承：带有方法的类就可以实例化为对象。

[javascript] view plain copy print ?

//继承自单一函数。将新函数绑定到对象的prototype上
Function.prototype.method = function(name, func){
this.prototype[name] = func;
return this;
};
Function.method(‘inherits‘, function(parent){var this.prototype = new parent(); return this;});
//从单一父对象继承所有内容
Function.method(‘swiss‘, function(parent){
for (var i = 1; i < arguments.length; i++){
var name = arguments[i];
this.prototype[name] = parent.prototype[name];
}
return this;
});

改进原型式继承的代码：