详解js面向对象编程

转自：http://segmentfault.com/a/1190000000713346

基本概念

ECMA关于对象的定义是：”无序属性的集合，其属性可以包含基本值、对象或者函数。“对象的每个属性或方法都有一个名字，而每个名字都映射到一个值。

类

在现实生活中，相似的对象之间往往都有一些共同的组成特征。类，实际上是对象的设计蓝图或者制作配方。我们能基于相同的类创建出许多不同的对象，这些对象又会含有各自的属性和方法。

封装

封装主要用于阐述对象中所包含（或封装的内容），它通常由两部分组成：

1. 相关的数据（用于存储属性）
2. 基于这些数据所能做的事（所能调用的方法）

聚合

聚合是指我们将现有对象合并成一个新对象的过程。例如：Book是由一个或多个author对象，publisher对象、若干chapter对象等组合而成的对象。

继承

通过继承这种方式，我们可以非常优雅地实现对现有代码的重用。例如：我们定义了一个Person对象，他包含了wolk()，sleep(),speak(),eat()等方法，也包含了age,height,weight等属性，这时当我们再定义一个coder对象的时候，你不必将上述的属性和方法都重写一遍，你只需继承他即可，然后你只需将coder这个对象属于他自己的那部分特殊功能写出来。

多态

上述实例中，我们的coder对象继承了person对象的一些属性和方法，这意味着这两个对象都实现了"speak"等方法，现在，我们的代码中有一个叫做James的变量，即便是我们不知道它是一个person对象还是一个coder对象的情况下，也依然可以直接调用该对象的"speak"方法
。类似这种不同对象通过相同的方法调用实现各自行为的能力，我们就称之为“多态”

创建对象

我们可以通过对象直接量、new关键字和object.create()函数来创建。

对象直接量

创建对象最简单的方法就是在js中使用对象直接量，它是由若干名/值对组成的映射表，名/值对中间用冒号分隔，多个名/值对用逗号分隔。整个映射表用花括号（{}）括起来。

var empty = {};//没有任何属性的对象
var fruits = {apple:big , orange:yellow};

var company = {
    CEO : "Tim Cook",//属性名字里有空格，必须用字符串表示
    Designer:"Ive";
    "for":"all audiences",//"for"是保留字，必须用引号
    employees:{
        firstname:"David",    //这里的属性名都没有引号
        lastname:"fill" //这个属性的值是一个对象
    }
};

对象里还可以嵌套对象（company里嵌套了employees对象）

new关键字创建对象

关键字new后面跟随一个函数调用，这个函数称为构造函数（constructor），javascript语言核心的原始类型都包含内置的构造函数。

<script type="text/javascript">
    var obj = new Object();//创建一个空对象，和{}一样
    var arr = new Array();//创建一个空数组，和[]一样
</script>

js原型->参照：javascript学习总结（五）原型和原型链详解

工厂模式

由于ECMAScript中无法创建类，因此，开发人员发明了一种函数，用函数来封装以特定接口创建对象的细节：

<script type="text/javascript">
    var Car = (function(){
        var Car = function(model,year,miles){
            this.model = model;
            this.year = year;
            this.miles = miles;
        };

        return function(model,year,miles){
            return new Car(model,year,miles);
        }
    })();

    var Benz = new Car("Benz",2014,1000);
    var Audi = new Car("Audi",2013,800);
</script>

什么时候使用工厂模式?

以下几种情景下工厂模式特别有用：

对象的构建十分复杂
需要依赖具体环境创建不同实例
处理大量具有相同属性的小对象

元素、属性和方法

说到数组，我们常说其中包含的是元素，而当说到对象的时候，我们常会说其中包含的是属性。另外，对象的属性也可以是一个函数，因为函数本身也是一种数据，在这种情况下，我们会称该属性为方法：

<script type="text/javascript">
    var wolf = {
        name :wolffy；
        run:function(){
            alert("wolf,wolf!");
        }
    }
</script>

调用对象方法

<script type="text/javascript">
    var parrot = {
        name : "bage",
        hair : "brown",
        say : function(){
            alert( 'I am ' + parrot.name);
        }
    }
    parrot.say();
</script>

注：

 1. 尽量使用点号表示法来访问对象的属性和方法。
 2. 不要在对象中使用带引号的属性标示。

构造器函数

另外，我们还可以使用构造器函数的方式来创建对象。看下面一个例子：

<script type="text/javascript">
    function Person(name,age,occupation){
        this.name = name;
        this.age = age;
        this.occupation = occupation;
        this.sayName = function(){
            alert(this.name);
        }
    }

    var person1 = new Person("trigkit4",21,"student");
    var person2 = new Person("Jack",25,"Engineer");
</script>

优点

使用构造器函数的好处在于，它可以在创建对象时接收一些参数。按照惯例，构造函数的函数名应始终以一个大写字母开头，以区分普通函数。

区别

构造函数与普通函数的区别在于调用的方式不同，任何函数，只要通过new操作符来调用，那它就可以作为构造函数。

缺点

使用构造函数的主要问题是，每个方法都要在每个实例上重新创建一遍。

扩展阅读：javascript学习总结（五）原型和原型链详解

全局对象

事实上，程序所在的宿主环境一般都会为其提供一个全局对象，而所谓的全局变量其实都只不过是该对象的属性罢了。

例如，当程序所在的宿主环境是web浏览器时，它所提供的全局对象就是window了。

内建对象

内建对象大致分为三组：

• 数据封装类对象——包括Object、Array、Boolean、Number和String。这些对象代表着javascript中不同的数据类型，并且都拥有各自不同的typeof返回值，以及undefined和null状态
• 工具类对象——包括Math、Date、RegExp等用于提供遍历的对象
• 错误类对象——包括一般性错误对象及其它各种更特殊的错误类对象

Object是js中所有对象的父级对象，这意味着我们创建的所有对象都继承于此。

所谓的空对象实际上并不是完全无用的，它还是包含了一些属性和方法的：

• 返回构造器函数的构造器属性
• 返回对象描述字符串的toString()方法
• 返回对象单值描述信息的valueOf()方法

例如：

var o = new Object();
o.toString();//[object Object]

Array

Array()是一个用来构建数组的内建构造器函数。数组主要由如下三种创建方式：

array = new Array()
array = new Array([size])
array = new Array(element0, element1, ..., elementN)

---

Array 对象方法
方法                 描述

concat()    连接两个或更多的数组，并返回结果。
join()      把数组的所有元素放入一个字符串。元素通过指定的分隔符进行分隔。
pop()       删除并返回数组的最后一个元素
push()      向数组的末尾添加一个或更多元素，并返回新的长度。
reverse()   颠倒数组中元素的顺序。
shift()     删除并返回数组的第一个元素
slice()     从某个已有的数组返回选定的元素
sort()      对数组的元素进行排序
splice()    删除元素，并向数组添加新元素。
toSource()  返回该对象的源代码。
toString()  把数组转换为字符串，并返回结果。
toLocaleString()    把数组转换为本地数组，并返回结果。
unshift()   向数组的开头添加一个或更多元素，并返回新的长度。
valueOf()   返回数组对象的原始值

concat()方法：合并数组

[1,2]concat([3,4],[5,6]);//[1,2,3,4,5,6]

join()方法：

<script type="text/javascript">
    var a = [1,2,3];
    a.join("");// =>"123"
</script>

pop()方法：移除数组最后一个元素，并将其返回

<script type="text/javascript">
    var fruits = ['apple','banana','pineapple'];
    fruits.pop();// pineapple 
    console.log(fruits);//["apple","banana"]
</script>

shift()方法：删除并返回数组的第一个元素。

<script type="text/javascript">
    var a = [1,2,3];
    a.shift();//1
    console.log(a);//[2,3]
</script>

slice(start,end)方法：截取数组的某一部分，不会对原数组进行任何修改

<script type="text/javascript">
     var num = ['a','b','c','d','e'];
     console.log(num.slice(1,4));//["b","c","d"]
     console.log(num);//["a","b","c","d","e"]
</script>

splice(start,delete_count,i1,i2…)方法：删除数组元素的同时添加新的元素。i1,i2为要插入的新元素

<script type="text/javascript">
    var arr = ['js','css','html','php','c'];
    arr.splice(1, 2,'python','jquery');//["css","html"]
    console.log(arr);//["js","python","jquery""php","c"]
</script>

---

Array对象属性
属性              描述
constructor     返回对创建此对象的数组函数的引用。
length          设置或返回数组中元素的数目。
prototype       使您有能力向对象添加属性和方法。

DOM和BOM

window对象是BOM的顶层(核心)对象，所有对象都是通过它延伸出来的，也可以称为window的子对象

有关BOM和DOM的讨论，详见我这篇文章：javascript学习总结（三）BOM和DOM详解

函数

有关函数部分的讨论，详见我这篇文章：javascript学习总结（四）function函数部分

---

这里讨论下几个js的内建函数：

parseInt() 函数可解析一个字符串，并返回一个整数。

parseInt(string, radix)

radix:进制基数，其默认值是10（即十进制）。

parseInt('10e+3');//10
parseInt('FF');//NaN
parseInt('FF',16)//255

parseFloat():将接受的参数转换成浮点值并返回。

parseFloat('123.456t');//123.456

isNaN()：该函数是“is Not a Number”的缩写，用于判断其参数是否是一个有效数字，如果是就返回true，否则返回false。

补充：

自执行函数：保证全局命名空间不被污染的模式。通过把代码装在一个匿名函数中并立刻自行调用。如此一来，该函数中的所有变量都是局部的（假设使用了var关键字）。

（function(){
    //code
})();//最后一个圆括号用于执行

有关这部分，也可参加我的另一篇文章：详解js闭包

JSON

详见：javascript学习总结（六）数据类型和JSON格式

style对象

style.display = ""；是清除`display`样式，`display`将使用默认值（块元素会变成block，内联元素会变成inline）
style.display="none"； 中“none”是一个值，表示元素将隐藏