JavaScript初探系列之面向对象

面向对象的语言有一个标志，即拥有类的概念，抽象实例对象的公共属性与方法，基于类可以创建任意多个实例对象，一般具有封装、继承、多态的特性！但JS中对象与纯面向对象语言中的对象是不同的，ECMA标准定义JS中对象：无序属性的集合，其属性可以包含基本值、对象或者函数。可以简单理解为JS的对象是一组无序的值，其中的属性或方法都有一个名字，根据这个名字可以访问相映射的。

一重新认识面向对象

为了说明 JavaScript 是一门彻底的面向对象的语言，首先有必要从面向对象的概念着手 , 探讨一下面向对象中的几个概念：

一切事物皆对象
对象具有封装和继承特性
对象与对象之间使用消息通信，各自存在信息隐藏

以这三点做为依据，C++ 是半面向对象半面向过程语言，因为，虽然他实现了类的封装、继承和多态，但存在非对象性质的全局函数和变量。Java、C# 是完全的面向对象语言，它们通过类的形式组织函数和变量，使之不能脱离对象存在。但这里函数本身是一个过程，只是依附在某个类上。

然而，面向对象仅仅是一个概念或者编程思想而已，它不应该依赖于某个语言存在。比如 Java 采用面向对象思想构造其语言，它实现了类、继承、派生、多态、接口等机制。但是这些机制，只是实现面向对象编程的一种手段，而非必须。换言之，一门语言可以根据其自身特性选择合适的方式来实现面向对象。所以，由于大多数程序员首先学习或者使用的是类似 Java、C++ 等高级编译型语言（Java 虽然是半编译半解释，但一般做为编译型来讲解），因而先入为主地接受了“类”这个面向对象实现方式，从而在学习脚本语言的时候，习惯性地用类式面向对象语言中的概念来判断该语言是否是面向对象语言，或者是否具备面向对象特性。这也是阻碍程序员深入学习并掌握 JavaScript 的重要原因之一。

实际上，JavaScript 语言是通过一种叫做原型（prototype）的方式来实现面向对象编程的。下面就来讨论基于类的（class-based）面向对象和基于原型的 (prototype-based) 面向对象这两种方式在构造客观世界的方式上的差别。

二基于类的面向对象和基于原型的面向对象方式比较

在基于类的面向对象方式中，对象（object）依靠类（class）来产生。而在基于原型的面向对象方式中，对象（object）则是依靠构造器（constructor）利用原（prototype）构造出来的。举个客观世界的例子来说明二种方式认知的差异。

例如工厂造一辆车，一方面，工人必须参照一张工程图纸，设计规定这辆车应该如何制造。这里的工程图纸就好比是语言中的类 (class)，而车就是按照这个类（class）制造出来的；另一方面，工人和机器 ( 相当于 constructor) 利用各种零部件如发动机，轮胎，方向盘 ( 相当于 prototype 的各个属性 ) 将汽车构造出来。

事实上关于这两种方式谁更为彻底地表达了面向对象的思想，目前尚有争论。但笔者认为原型式面向对象是一种更为彻底的面向对象方式，理由如下：

首先，客观世界中的对象的产生都是其它实物对象构造的结果，而抽象的“图纸”是不能产生“汽车”的，也就是说，类是一个抽象概念而并非实体，而对象的产生是一个实体的产生；

其次，按照一切事物皆对象这个最基本的面向对象的法则来看，类 (class) 本身并不是一个对象，然而原型方式中的构造器 (constructor) 和原型 (prototype) 本身也是其他对象通过原型方式构造出来的对象。

再次，在类式面向对象语言中，对象的状态 (state) 由对象实例 (instance) 所持有，对象的行为方法 (method) 则由声明该对象的类所持有，并且只有对象的结构和方法能够被继承；而在原型式面向对象语言中，对象的行为、状态都属于对象本身，并且能够一起被继承，这也更贴近客观实际。

最后，类式面向对象语言比如 Java，为了弥补无法使用面向过程语言中全局函数和变量的不便，允许在类中声明静态 (static) 属性和静态方法。而实际上，客观世界不存在所谓静态概念，因为一切事物皆对象！而在原型式面向对象语言中，除内建对象 (build-in object) 外，不允许全局对象、方法或者属性的存在，也没有静态概念。所有语言元素 (primitive) 必须依赖对象存在。但由于函数式语言的特点，语言元素所依赖的对象是随着运行时 (runtime) 上下文 (context) 变化而变化的，具体体现在 this 指针的变化。正是这种特点更贴近 “万物皆有所属，宇宙乃万物生存之根本”的自然观点。在程序清单 1中window便类似与宇宙的概念。

三 JavaScript面向对象的特点

抽象：抓住关键需要的点（比如员工工资发放系统，只需要知道名字，工号就可以，不需要身高，体重之类的属性）

封装：电视机就像个黑盒子，内部的原理电路板什么都不用管，只要会用表面的功能就好啦！比如JQ，会用就行，里面的原理可暂时不管。

继承： 父亲有一些功能，儿子继承了这些功能。儿子还可以根据自己的需要有些新的功能和特征。目的是为了最大目的的重用代码。

四理解对象

第一种：基于Object对象

var person = new Object();
person.name = 'My Name';
person.age = 18;
person.getName = function(){
 return this.name;
}

第二种：对象字面量方式（比较清楚的查找对象包含的属性及方法）

var person = {
 name : 'My name',
 age : 18,
 getName : function(){
 return this.name;
 }
}

JS的对象可以使用‘.’操作符动态的扩展其属性，可以使用’delete’操作符或将属性值设置为’undefined’来删除属性。如下：

person.newAtt=’new Attr’;//添加属性
alert(person.newAtt);//new Attr
delete person.age;
alert(person.age);//undefined(删除属性后值为undefined);

五 this关键字

一句话“当前的这个方法属于谁的，this就指谁”。见下面代码

var arr = [1,2,3];
arr.a = 12;
arr.show = function(){ //这个function属于arr的，所以this指的是arr。
    alert(this.a); //弹出12
}

六创建对象

使用Object构造函数或对象字面量都可以创建对象，但缺点是创建多个对象时，会产生大量的重复代码，因此下面介绍可解决这个问题的创建对象的方法

1、工厂模式

function createPerson(name, age, job) {
 var o = new Object();
 o.name = name;
 o.age = age;
 o.job = job;
 o.getName = function () {
 return this.name;
 }
 return o;//使用return返回生成的对象实例
}
var person = createPerson('Jack', 19, 'SoftWare Engineer');

创建对象交给一个工厂方法来实现，可以传递参数，但主要缺点是无法识别对象类型，因为创建对象都是使用Object的原生构造函数来完成的。

2、构造函数模式

function Person(name,age,job){
 this.name = name;
 this.age = age;
 this.job = job;
 this.getName = function () {
 return this.name;
 }
}
var person1 = new Person('Jack', 19, 'SoftWare Engineer');

var person2 = new Person('Liye', 23, 'Mechanical Engineer');

使用自定义的构造函数（与普通函数一样，只是用它来创建对象），定义对象类型（如：Person）的属性和方法。它与工厂方法区别在于：

没有显式地创建对象
直接将属性和方法赋值给this对象；
没有return语句；（js内部已经帮助我们反悔了一个object的对象）

此外，要创建Person的实例，必须使用new关键字，以Person函数为构造函数，传递参数完成对象创建；实际创建经过以下4个过程：

创建一个对象
将函数的作用域赋给新对象（因此this指向这个新对象，如：person1）
执行构造函数的代码
返回该对象

上述由Person构造函数生成的两个对象person1与person2都是Person的实例，因此可以使用instanceof判断，并且因为所有对象都继承Object，因此person1 instanceof Object也返回真：

alert(person1 instanceof Person);//true;
alert(person2 instanceof Person);//true;
alert(person1 instanceof Object);//true;
alert(person1.constructor === person2.constructor);//ture;
alert(person1==person2)；//false

虽然构造函数方式比较不错，但也存在缺点，那就是在创建对象时，特别针对对象的属性指向函数时，会重复的创建函数实例，以上述代码为基础，可以改写为：

function Person(name,age,job){
 this.name = name;
 this.age = age;
 this.job = job;
 this.getName = new Function () {//改写后效果与原代码相同，不过是为了方便理解
        return this.name;
 }
}

   上述代码，创建多个实例时，会重复调用new Function();创建多个函数实例，这些函数实例还不是一个作用域中，当然这一般不会有错，但这会造成内存浪费。当然，可以在函数中定义一个getName = getName的引用，
而getName函数在Person外定义，这样可以解决重复创建函数实例问题，但在效果上并没有起到封装的效果，如下所示：

function Person(name,age,job){
 this.name = name;
 this.age = age;
 this.job = job;
 this.getName = getName;
}
function getName() {//到处是代码，看着乱！！
        return this.name;
}

3、原型模式

JS每个函数都有一个prototype(原型)属性，这个属性是一个指针，指向一个对象，它是所有通过new操作符使用函数创建的实例的原型对象。原型对象最大特点是，所有对象实例共享它所包含的属性和方法，也就是说，所有在原型对象中创建的属性或方法都直接被所有对象实例共享。

function Person(){
}
Person.prototype.name = 'Jack';//使用原型来添加属性
Person.prototype.age = 29;
Person.prototype.getName = function(){
 return this.name;
}
var person1 = new Person();
alert(person1.getName());//Jack
var person2 = new Person();
alert(person1.getName === person2.getName);//true;共享一个原型对象的方法

原型是指向原型对象的，这个原型对象与构造函数没有太大关系，唯一的关系是函数的prototype是指向这个原型对象！而基于构造函数创建的对象实例也包含一个内部指针为：[[prototype]]指向原型对象。原型对象和css中类逊则其有不谋二和的一面哦！

实例属性或方法的访问过程是一次搜索过程：

首先从对象实例本身开始，如果找到属性就直接返回该属性值；
如果实例本身不存在要查找属性，就继续搜索指针指向的原型对象，在其中查找给定名字的属性，如果有就返回；

基于以上分析，原型模式创建的对象实例，其属性是共享原型对象的；但也可以自己实例中再进行定义，在查找时，就不从原型对象获取，而是根据搜索原则，得到本实例的返回；简单来说，就是实例中属性会屏蔽原型对象中的属性；

原型与in操作符

一句话：无论原型中属性，还是对象实例的属性，都可以使用in操作符访问到；要想判断是否是实例本身的属性可以使用object.hasOwnProperty(‘attr’)来判断；

原生对象中原型

原生对象中原型与普通对象的原型一样，可以添加/修改属性或方法，如以下代码为所有字符串对象添加去左右空白原型方法：

String.prototype.trim = function(){
 return this.replace(/^\s+/,'').replace(/\s+$/,'');
}
var str = '   word space   ';
alert('!'+str.trim()+'!');//!word space!

原型模式的缺点，它省略了为构造函数传递初始化参数，这在一定程序带来不便；另外，最主要是当对象的属性是引用类型时，它的值是不变的，总是引用同一个外部对象，所有实例对该对象的操作都会其它实例：

function Person() {
}
Person.prototype.name = 'Jack';
Person.prototype.lessons = ['Math','Physics'];
var person1 = new Person();
person1.lessons.push('Biology');
var person2 = new Person();
alert(person2.lessons);//Math,Physics,Biology，person1修改影响了person2

4、组合构造函数及原型模式

目前最为常用的定义类型方式，是组合构造函数模式与原型模式。构造函数模式用于定义实例的属性，而原型模式用于定义方法和共享的属性。结果，每个实例都会有自己的一份实例属性的副本，但同时又共享着对方方法的引用，最大限度的节约内存。此外，组合模式还支持向构造函数传递参数，可谓是集两家之所长。

function Person(name, age, job) {
 this.name = name;
 this.age = age;
 this.job = job;
 this.lessons = ['Math', 'Physics'];
}
Person.prototype = {
 constructor: Person,//原型字面量方式会将对象的constructor变为Object，此外强制指回Person
    getName: function () {
 return this.name;
 }
}
var person1 = new Person('Jack', 19, 'SoftWare Engneer');
person1.lessons.push('Biology');
var person2 = new Person('Lily', 39, 'Mechanical Engneer');
alert(person1.lessons);//Math,Physics,Biology
alert(person2.lessons);//Math,Physics
alert(person1.getName === person2.getName);//true,//共享原型中定义方法

在所接触的JS库中，jQuery类型的封装就是使用组合模式来实例的！！！

七继承

ECMAScript只支持实现继承，其实现继承主要是靠原型链来实现。那么我们就先来讲讲原型链。原型链的基本思想是利用原型让一个引用类型继承另一个引用类型的属性和方法。

简单回顾下构造函数、原型和实例的关系：

每个构造函数都有一个原型对象，原型对象包含一个指向构造函数的指针（prototype），而实例则包含一个指向原型对象的内部指针（__proto__）。

 function Person(name)   //基类构造函数
 {
 this.name = name;
 };



 Person.prototype.SayHello = function ()  //给基类构造函数的prototype添加方法,原型
 {
 alert("Hello, I'm " + this.name);
 };



 function Employee(name, salary) //子类构造函数
 {
 Person.call(this, name);    //调用基类构造函数，用Person类代替Employee类，Employee类拥有Person类的方法
            this.salary = salary;
 };



 Employee.prototype = new Person();  //建一个基类的对象作为子类原型的原型，这里很有意思

 Employee.prototype.ShowMeTheMoney = function ()  //给子类添构造函数的prototype添加方法
 {
 alert(this.name + " $" + this.salary);
 };

 var BillGates = new Person("Bill Gates");   //创建基类Person的BillGates对象
        var SteveJobs = new Employee("Steve Jobs", 1234);   //创建子类Employee的SteveJobs对象

 BillGates.SayHello(); //通过对象直接调用到prototype的方法
        SteveJobs.SayHello();       //通过子类对象直接调用基类prototype的方法，关注！
        SteveJobs.ShowMeTheMoney(); //通过子类对象直接调用子类prototype的方法

 alert(BillGates.SayHello == SteveJobs.SayHello); //显示：true，表明prototype的方法是共享的

call:调用一个对象的一个方法，以另一个对象替换当前对象。

call([thisObj[,arg1[, arg2[, [,.argN]]]]])
参数
thisObj
可选项。将被用作当前对象的对象。
arg1, arg2, , argN
可选项。将被传递方法参数序列。
说明
call 方法可以用来代替另一个对象调用一个方法。call 方法可将一个函数的对象上下文从初始的上下文改变为由 thisObj 指定的新对象。

function add(a,b)
{
 alert(a+b);
}
function sub(a,b)
{
 alert(a-b);
}

add.call(sub,3,1);

这个例子中的意思就是用 add 来替换 sub，add.call(sub,3,1) == add(3,1) ，所以运行结果为：alert(4);

参考资料《JavaScript高级程序设计》

http://www.cnblogs.com/zhangshiwen/p/3627085.html

http://www.cnblogs.com/gaojun/archive/2013/10/24/3386552.html

1、工厂模式

2、构造函数模式

原型与in操作符

原生对象中原型

更多相关文章

随机推荐