详解js面向对象编程

基本概念

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

类

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

封装

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

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

建立对象

咱们能够经过对象直接量、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”是一个值，表示元素将隐藏