(1)、从对象本身理解，对象就是单个实物的抽象。
一本书、一辆车、一台电视可以被视为对象，一张网页、一个数据库、一个服务器请求也可以被视为一个对象，当实物被抽象成对象，那么实物之间的关系就变成了对象之间的关系，从而就可以模拟现实情况，针对对象进行编程。
(2)、从对象的性质理解，对象是一个容器，包含属性和方法。
所谓属性，就是对象的状态，所谓方法，就是对象的行为(完成某种任务)，比如，我们可以把动物抽象为对象，属性记录具体是哪一种动物，方法表示动物的行为，比如：捕猎、奔跑、攻击、飞、爬、休息等。
总体来讲，对象是一个整体，对外提供一些操作，比如电视，我们并不了解其内部构成以及工作原理，但是我们都会使用，对于电视来说，只要用好按钮，会操作，这个电路那个元件怎么工作，跟我们没什么关系，只要电视能正常运行就好了，我们只要知道每个按钮是干嘛的，就可以使用这些功能，这就是面向对象。再比如获取时间 date，通过不同的属性我们可以获取到不同的时间，比如年份月份星期，我们并不知道他具体是怎么实现的，但是都知道使用哪个属性可以获取到所需要的，这就是面向对象。
那到底什么是面向对象？简单说就是在不了解内部原理的情况下，会使用其功能。就是使用对象时，只关注对象提供的功能，不关注其内部细节。典型的应用实例就是 jquery。
面向对象是一种通用的思想，并非只有编程中能用，任何事情都可以使用，生活中充满了面向对象的思想，只是我们不直接叫面向对象，而是叫一些别的什么。比如你去吃饭，你就告诉厨师来一份红烧肉，然后就可以坐下来等着吃了，你不可能给厨师说要把肉切成方的或者圆的，要先放盐，再放酱油，还要加红糖，加冰糖也可以，谁真要这样，厨师非得跟你急，他是厨师还是你是厨师，你只要把想吃的告诉他，你不用去管他是怎么做的，他自然会做好给你端上来，这就是生活中典型的面向对象的思想。
虽然不同于传统的面向对象编程语言，但是 js 也有很强的面向对象编程能力，接下来就具体分析以下什么是 js 面向对象编程。
面向对象编程（object oriented programming，缩写为 oop）是目前主流的编程范式，所谓范式，就是符合某一种级别的关系模式的集合。他的核心思想是将真实世界中各种复杂的关系，抽象为一个个对象，然后由对象之间的分工与合作，完成对真实世界的模拟。面向对象编程的程序就是符合某一种级别的关系模式的集合，是一系列对象的组合，每一个对象都是功能中心，具有明确分工，可以完成接受信息、处理数据、发出信息等任务。因此，面向对象编程具有灵活性、代码的可重用性、模块性等特点，并且容易维护和开发，非常适合多人合作的大型项目，而在平时项目中一般不常使用。
面向对象编程(oop)的特点：
(1)、抽象：抓住核心问题
所谓抽象，先来看看百度对于抽象的解释：抽象是从众多的事物中抽取出共同的、本质性的特征，而舍弃其非本质的特征。例如苹果、香蕉、鸭梨、葡萄、桃子等，它们共同的特性就是水果。得出水果概念的过程，就是一个抽象的过程。要抽象，就必须进行比较，没有比较就无法找到在本质上共同的部分。共同特征是指那些能把一类事物与其他类事物区分开来的特征，这些具有区分作用的特征又称本质特征。因此抽取事物的共同特征就是抽取事物的本质特征，舍弃非本质的特征。所以抽象的过程也是一个裁剪的过程。在抽象时，同与不同，决定于从什么角度上来抽象。抽象的角度取决于分析问题的目的。
在 js 中，抽象的核心就是抽，就是抓住共同特征，抓住核心的问题。比如说人，有很多特征，比如姓名、性别、籍贯、出生日期、身高、体重、血型、家庭住址、父母是谁、孩子叫啥等，如果一个公司要建立员工档案，不可能将每个特征都注明，需要抓住一些主要的特征，比如：姓名、性别、部门、职位，或者再加上入职日期就完了。如果需要注册一个婚恋网站，那这时候就不是需要员工档案中注明的那些特点了，要一些比如：性别、年龄、身高、体形、星座、有车否、有房否、工作、收入、家庭状况等。就是把一类事物主要的特征、跟问题相关的特征抽取出来。这就是面向对象编程的抽象。
(2)、封装：不考虑内部实现，只考虑功能使用
何为封装，就好比一台电视机，我们能看到电视机，比如外观、颜色等，但是看不到内部的构成，我们也不用知道内部是什么鬼，依然可以正常使用，除非这货坏了，这内部的东西就是封装。js 就是不考虑内部的实现，只考虑功能的使用，就像使用 jquery 一样，jquery 就是对 js 的封装，我们使用 jquery 的功能，能完成与 js 相同的效果，并且还比使用 js 更方便。
(3)、继承：从已有对象上，继承出新的对象
所谓继承，也可以叫做遗传，通俗理解就是父母能干的事孩子也能干，比如吃饭，睡觉。在 js 中，比如有一个对象 a，a 中有一些功能，现在从 a 中继承出一个对象 b，这个对象 b 就具有对象 a 的所有功能。
还有一种情况是多重继承，好比一个孩子可以有好多个爹，显然这是不可能的事，但是在程序中这是可行的，比如有一类盒子，盒子有一个特征可以用来装东西，还有一类汽车，汽车的特征就是会跑，有轱辘，这时候就可以多重继承，继承出另一类集装箱货车，他特征既可以装东西又会跑，有轱辘。
(4)、多态
多态，顾名思义就是多种状态，在面向对象语言中，接口的多种不同的实现方式即为多态。多态在 js 中不是那么明显，但是对于强语言比较有用，比如 java，c++。对于 js 这种弱语言，意义并不大。
2、对象的组成对象可分为宿主对象，本地对象和内置对象。
宿主对象就是 dom 和 bom，即由浏览器提供的对象。
本地对象为非静态对象，所谓本地对象，就是需要先 new，再使用。常用的对象如：object、function、array、string、boolean、number、date、regexp、error。
内置对象为静态对象，就是不需要 new，直接可以使用的类。math 是最常见，也是可以直接使用的仅有的内置对象。
面向对象的第一步，就是要创建对象。典型的面向对象编程的语言都存在 类(class) 这样一个概念，所谓类，就是对象的抽象，表示某一类事物的共同特征，比如水果，而对象就是类的具体实例，比如苹果就是水果的一种，类是抽象的，不占用内存，而对象是具体的，占用存储空间。但是在 js 中没有 类 这个概念，不过可以使用构造函数实现。
之前我们说过，所谓构造函数，就是用来创建新对象的函数，作为对象的基本结构，一个构造函数，可以创建多个对象，这些对象都有相同的结构。构造函数就是一个普通的函数，但是他的特征与用法和普通函数不一样。构造函数的最大特点就是，在创建对象时必须使用 new 关键字，并且函数体内部可以使用 this 关键字，代表了所要创建的对象实例，this 就用于指向函数执行时的当前对象。具体情况下面我们再做分析，现在先来研究下对象的组成。
其实我们已经理解了对象的概念，也就不难看出他是由什么构成的，对象就是由属性和方法组成的，js 中一切皆对象，那在 js 中，属性和方法到底该怎么理解呢？属性就是变量，方法就是函数。属性代表状态，就像动物的属性记录他具体是哪一种动物一样，他是静态的，变量名称也可以说是方法名称，是对方法的描述。而方法也就是行为，是完成某种任务的过程，他是动态的。
3、面向对象编程我们通过实例的方式，为对象添加属性和方法，来理解对象的组成和面向对象。
(1)、实例：给对象添加属性
<script> var a = 2; alert(a); //返回：2 var arr = [5,6,7,8,9]; //给数组定义一个属性a,等于2。 arr.a = 2; alert(arr.a); //返回：2 arr.a++; alert(arr.a); //返回：3 </script>
通过上面的实例，我们可以看到，变量和属性就是一样的，变量可以做的事，属性也可以做，属性可以做的事，变量也可以做。他们的区别就在于，变量是自由的，不属于任何对象，而属性不是自由的，他是属于一个对象的，就像例子中的对象 a，他是属于数组 arr 的，在使用的时候就写为 arr.a。我们可以给任何对象定义属性，比如给 p 定义一个属性用于索引：op[i].index = i。
(2)、实例：给对象添加方法
<script> function a(){ alert('abc'); //返回：abc } var arr = [5,6,7,8,9]; //给函数添加一个a函数的方法 arr.a = function (){ alert('abc'); //返回：abc }; a(); arr.a(); </script>
通过上面的实例，可以看到，a 函数也是自由的，而当这个 a 函数属于一个对象的时候，这就是方法，是数组 arr 的 a 方法，也就是这个对象的方法。所以函数和方法也是等同的，函数可以做的事，方法就可以做，他们的不同，也是在于函数是自由的，而方法是属于一个对象的。
我们不能在系统对象中随意附加属性和方法，否则会覆盖已有的属性和方法。比如实例中我们是在数组对象上附加属性和方法的，数组有他自己的属性和方法，我们再给其附加属性和方法，就会覆盖掉数组本身的属性和方法，这一点需要注意。
(3)、实例：创建对象
<script> var obj = new object(); var d = new date(); var arr = new array(); alert(obj); //返回：[object object] alert(d); //返回当前时间 alert(arr); //返回为空，空数组 </script>
创建一个新对象，可以 new 一个 object。object 是一个空白对象，只有系统自带的一些很少量的东西，所以在实现面向对象的时候，就可以给 object 上加方法，加属性。这样可以最大限度的避免跟其他起冲突。
(4)、实例：面向对象程序
<script> //创建一个对象 var obj = new object(); //可写为：var obj={}; //给对象添加属性 obj.name = '小白'; obj.qq = '89898989'; //给对象添加方法 obj.showname = function (){ alert('我的名字叫：'+this.name); }; obj.showqq = function (){ alert('我的qq是：'+this.qq); }; obj.showname(); //返回：我的名字叫：小白 obj.showqq(); //返回：我的qq是：89898989 //再创建一个对象 var obj2 = new object(); obj2.name = '小明'; obj2.qq = '12345678'; obj2.showname = function (){ alert('我的名字叫：'+this.name); }; obj2.showqq = function (){ alert('我的qq是：'+this.qq); }; obj2.showname(); //返回：我的名字叫：小白 obj2.showqq(); //返回：我的qq是：12345678 </script>
这就是一个最简单的面向对象编程，创建一个对象，给对象添加属性和方法，模拟现实情况，针对对象进行编程。这个小程序运行是没有什么问题，但是存在很严重的缺陷，一个网站中不可能只有一个用户对象，可能有成千上万个，不可能给每个用户都 new 一个 object。其实可以将其封装为一个函数，然后再调用，有多少个用户，调用多少次，这样的函数就被称为构造函数。
4、构造函数构造函数(英文：constructor)就是一个普通的函数，没什么区别，但是为什么要叫构造函数呢？并不是这个函数有什么特别，而是这个函数的功能有一些特别，跟别的函数就不一样，那就是构造函数可以构建一个类。构造函数的方式也可以叫做工厂模式，因为构造函数的工作方式和工厂的工作方式是一样的。工厂模式又是怎样的呢？这个也不难理解，首先需要原料，然后就是对原料进行加工，最后出厂，这就完事了。构造函数也是同样的方式，先创建一个对象，再添加属性和方法，最后返回。既然说构造函数可以构建一个类出来，这个该怎么理解呢？很 easy，可以用工厂方式理解，类就相当于工厂中的模具，也可以叫模板，而对象就是零件、产品或者叫成品，类本身不具备实际的功能，仅仅只是用来生产产品的，而对象才具备实际的功能。比如：var arr = new array(1,2,3,4,5); array 就是类，arr 就是对象， 类 array 没有实际的功能，就是用来存放数据的，而对象 arr 具有实际功能，比如：排序sort()、删除shift()、添加push()等。我们不可能这么写：new arr(); 或 array.push();，正确的写法：arr.push();。
<script> function userinfo(name, qq){ //1.原料 - 创建对象 var obj = new object(); //2.加工 - 添加属性和方法 obj.name = name; obj.qq = qq; obj.showname = function (){ alert('我的名字叫：' + this.name); }; obj.showqq = function (){ alert('我的qq是：' + this.qq); }; //3.出厂 - 返回 return obj; } var obj1 = userinfo('小白', '89898989'); obj1.showname(); obj1.showqq(); var obj2 = userinfo('小明', '12345678'); obj2.showname(); obj2.showqq(); </script>
这个函数的功能就是构建一个对象，userinfo() 就是构造函数，构造函数作为对象的类，提供一个模具，用来生产用户对象，我们以后在使用时，只调用这个模板，就可以无限创建用户对象。我们都知道，函数如果用于创建新的对象，就称之为对象的构造函数，我们还知道，在创建新对象时必须使用 new 关键字，但是上面的代码，userinfo() 构造函数在使用时并没有使用 new关 键字，这是为什么呢？且看下文分解。
5、new 和 this(1)new
new 关键字的作用，就是执行构造函数，返回一个实例对象。看下面例子：
<script>var user = function (){ this.name = '小明'; };var info = new user(); alert(info.name); //返回：小明</script>
上面实例通过 new 关键字，让构造函数 user 生产一个实例对象，保存在变量 info 中，这个新创建的实例对象，从构造函数 user 继承了 name 属性。在 new 命令执行时，构造函数内部的 this，就代表了新生产的实例对象，this.name 表示实例有一个 name 属性，他的值是小明。
使用 new 命令时，根据需要，构造函数也可以接受参数。
<script> var user = function (n){ this.name = n; }; var info = new user('小明'); alert(info.name); //返回：小明 </script>
new 命令本身就可以执行执行构造函数，所以后面的构造函数可以带括号，也可以不带括号，下面两行代码是等价的。
var info = new user;var info = new user();
那如果没有使用 new 命令，直接调用构造函数会怎样呢？这种情况下，构造函数就变成了普通函数，并不会生产实例对象，this 这时候就代表全局对象。
<script> var user = function (n){ this.name = n; }; alert(this.name); //返回：小明 var info = user('小明'); alert(info.name); //报错 </script>
上面实例中，调用 user 构造函数时，没有使用 new 命令，结果 name 变成了全局变量，而变量 info 就变成了 undefined，报错：无法读取未定义的属性 'name'。使用 new 命令时，他后边的函数调用就不是正常的调用，而是被 new 命令控制了，内部的流程是，先创建一个空对象，赋值给函数内部的 this 关键字，this 就指向一个新创建的空对象，所有针对 this 的操作，都会发生在这个空对象上，构造函数之所以叫构造函数，就是说这个函数的目的，可以操作 this 对象，将其构造为需要的样子。下面我们看一下 new 和函数。
<script> var user = function (){ //function = user(){ alert(this); } user(); //返回：window new user();//返回：object </script>
通过上面实例，可以看到，在调用函数时，前边加个 new，构造函数内部的 this 就不是指向 window 了，而是指向一个新创建出来的空白对象。
说了这么多，那为什么我们第四章的构造函数，在使用的时候没有加 new 关键字呢，因为我们完全是按照工厂模式，也就是构造函数的结构直接编写的，我们的步骤已经完成了 new 关键字的使命，也就是把本来 new 需要做的事，我们已经做了，所以就用不着 new 了。那这样岂不是做了很多无用功，写了不必要的代码，浪费资源，那肯定是了，这也是构造函数的一个小问题，我们在下一章再做具体分析。
(2)、this
this 翻译为中文就是这，这个，表示指向。之前我们提到过，this 指向函数执行时的当前对象。那么我们先来看看函数调用，函数有四种调用方式，每种方式的不同方式，就在于 this 的初始化。
①、作为一个函数调用
1 <script>2 function show(a, b) {3 return a * b;4 }5 alert(show(2, 3)); //返回：66 </script>
实例中的函数不属于任何对象，但是在 js 中他始终是默认的全局对象，在 html 中默认的全局对象是 html 页面本身，所以函数是属于 html 页面，在浏览器中的页面对象是浏览器窗口(window 对象)，所以该函数会自动变为 window 对象的函数。
<script> function show(a, b) { return a * b; } alert(show(2, 3)); //返回：6 alert(window.show(2, 3));//返回：6 </script>
上面代码中，可以看到，show() 和 window.show() 是等价的。这是调用 js 函数最常用的方法，但不是良好的编程习惯，因为全局变量，方法或函数容易造成命名冲突的 bug。
当函数没有被自身的对象调用时，this 的值就会变成全局对象。
1 <script>2 function show() {3 return this;4 }5 alert(show()); //返回：[object window]6 </script>
全局对象就是 window 对象，函数作为全局对象对象调用，this 的值也会成为全局对象，这里需要注意，使用 window 对象作为一个变量容易造成程序崩溃。
②、函数作为方法调用
<script> var user = { name : '小明', qq : 12345678, info : function (){ return this.name + 'qq是：' + this.qq; } } alert(user.info()); </script>
在 js 中可以将函数定义为对象的方法，上面实例创建了一个对象 user，对象拥有两个属性(name和qq)，及一个方法 info，该方法是一个函数，函数属于对象，user 是函数的所有者，this 对象拥有 js 代码，实例中 this 的值为 user 对象，看下面示例：
<script> var user = { name : '小明', qq : 12345678, info : function (){ return this; } } alert(user.info()); //返回：[object object] </script>
函数作为对象方法调用，this 就指向对象本身。
③、使用构造函数调用函数
如果函数调用前使用了 new关键字，就是调用了构造函数。
<script> function user(n, q){ this.name = n; this.qq = q; } var info = new user('小明', 12345678); alert(info.name); //返回：小明 alert(info.qq); //返回：12345678 </script>
这看起来就像创建了新的函数，但实际上 js 函数是新创建的对象，构造函数的调用就会创建一个新的对象，新对象会继承构造函数的属性和方法。构造函数中的 this 并没有任何的值，this 的值在函数调用时实例化对象(new object)时创建，也就是指向一个新创建的空白对象。
④、作为方法函数调用函数
在 js 中，函数是对象，对象有他的属性和方法。call() 和 apply() 是预定义的函数方法，这两个方法可用于调用函数，而且这两个方法的第一个参数都必须为对象本身。
<script> function show(a, b) { return a * b; } var x = show.call(show, 2, 3); alert(x); //返回：6 function shows(a, b) { return a * b; } var arr = [2,3]; var y = shows.apply(shows, arr); var y1 = shows.call(shows, arr); alert(y); //返回：6 alert(y1); //返回：nan </script>
上面代码中的两个方法都使用了对象本身作为作为第一个参数，两者的区别在于：apply()方法传入的是一个参数数组，也就是将多个参数组合称为一个数组传入，而call()方法则作为call的参数传入（从第二个参数开始），不能传入一个参数数组。
通过 call() 或 apply() 方法可以设置 this 的值, 且作为已存在对象的新方法调用。在下面用到的时候，我们再具体分析。
this 就是用于指向函数执行时的当前对象，下面再看一个实例：
<body> <div id="div1"></div> <script> var odiv = document.getelementbyid('div1'); //给一个对象添加事件，本质上是给这个对象添加方法。 odiv.onclick = function (){ alert(this); //this就是odiv }; var arr = [1,2,3,4,5]; //给数组添加属性 arr.a = 12; //给数组添加方法 arr.show = function (){ alert(this.a); //this就是arr }; arr.show(); //返回：12 function shows(){ alert(this); //this就是window } //全局函数是属于window的。 //所以写一个全局函数shows和给window加一个shows方法是一样的。 window.shows = function (){ alert(this); }; shows(); //返回：[object window] </script> </body>
上面的代码，this 就代表着当前的函数(方法)属于谁，如果是一个事件方法，this 就是当前发生事件的对象，如果是一个数组方法，this 就是数组对象，全局的方法是属于 window 的，所以 this 指向 window。
6、原型前面我们说过构造函数在使用时没有加 new，这只能算是一个小问题，没有加我们可以给加上，无伤大雅，但其实他还存在着一个更严重的问题，那就是函数重复定义。
<script> function userinfo(name, qq){ //1.原料 - 创建对象 var obj = new object(); //2.加工 - 添加属性和方法 obj.name = name; obj.qq = qq; obj.showname = function (){ alert('我的名字叫：'+this.name); }; obj.showqq = function (){ alert('我的qq是：'+this.qq); }; //3.出厂 - 返回 return obj; } //1.没有new。 var obj1 = userinfo('小白', '89898989'); var obj2 = userinfo('小明', '1234567'); //调用的showname返回的函数都是相同的。 alert(obj1.showname); alert(obj2.showname); //2.函数重复。 alert(obj1.showname == obj2.showname); //返回：false </script>
通过上面的代码，我们可以看到，弹出这两个对象的 showname，调用的 showname 返回的函数是相同的，他们新创建对象所使用的方法都是一样的，尽管这两个函数长的是一样的，但其实他们并不是一个东西，我们将 对象1 和 对象2 做相等比较，结果返回 false。这时候就带来了一个相对严重的问题，一个网站中也不可能只有 2 个用户，比如有 1 万个用户对象，那么就会有 1 万 showname 和 showqq 方法，每一个对象都有自己的函数，但明明这两个函数都是一样的，结果却并非如此。这样就很浪费系统资源，而且性能低，可能还会出现一些意想不到的问题。该怎么解决这个问题呢？方法也很简单，就是使用原型。
(1)、什么是原型
js 对象都有一个之前我们没有讲过的属性，即 prototype 属性，该属性让我们有能力向对象添加属性和方法，包括 string对象、array对象、number对象、date对象、boolean对象，math对象 并不像 string 和 date 那样是对象的类，因此没有构造函数 math()，该对象只用于执行数学任务。
所有 js 的函数都有一个prototype属性，这个属性引用了一个对象，即原型对象，也简称原型。这个函数包括构造函数和普通函数，我们讲的更多是构造函数的原型，但是也不能否定普通函数也是有原型的。
在看实例之前，我们先来看几个小东西：typeof运算符、constructor属性、instanceof运算符。
typeof 大家都熟悉，js 中判断一个变量的数据类型就会用到 typeof 运算符，返回结果为 js 基本的数据类型，包括 number、string、boolean、object、function、undefined，语法：typeof obj。
constructor 属性返回所有 js 变量的构造函数，typeof 无法判断 array对象 和 date对象 的类型，因为都返回 object，所以我们可以利用 constructor 属性来查看对象是否为数组或者日期，语法：obj.constructor。
<script> var arr = [1,2,3,4,5]; function isarray(obj) { return arr.constructor.tostring().indexof(array) > -1; } alert(isarray(arr)); //返回：ture var d = new date(); function isdate(obj) { return d.constructor.tostring().indexof(date) > -1; } alert(isdate(d)); //返回：ture </script>
这里需要注意，constructor 只能对已有变量进行判断，对于未声明的变量进行判断会报错，而 typeof 则可对未声明变量进行判断（返回 undefined）。
instanceof 这东西比较高级，可用于判断一个对象是否是某一种数据类型，查看对象是否是某个类的实例，返回值为 boolean 类型。另外，更重要的一点是 instanceof 还可以在继承关系中用来判断一个实例是否属于他的父类型，语法：a instanceof b。
<script> // 判断 a 是否是 a 类的实例 , 并且是否是其父类型的实例 function a(){} function b(){} b.prototype = new a(); //js原型继承 var a = new b(); alert(a instanceof a); //返回：true alert(a instanceof b); //返回：true </script>
上面的实例中判断了一层继承关系中的父类，在多层继承关系中，instanceof 运算符同样适用。
下面我们就来看看普通函数的原型：
1 <script>2 function a(){}3 alert(a.prototype instanceof object); //返回：true4 </script>
上面代码中 a 是一个普通的函数，我们判断函数 a 的原型是否是对象，结果返回 true。
说了这么多，原型到底是个什么东西，说简单点原型就是往类的上面添加方法，类似于class，修改他可以影响一类元素。原型就是在已有对象中加入自己的属性和方法，原型修改已有对象的影响，prototype 属性可返回对象类型原型的引用，如果对象创建在修改原型之前，那么该对象不会拥有修改后的原型方法，就是说原型链的改变，不会影响之前产生的对象。有关原型链的知识，下面我们在讲继承时，再做分析。
下面我们通过实例的方式，进一步的理解原型。
实例：给数组添加方法
<script> var arr1 = new array(2,8,8); var arr2 = new array(5,5,10); arr1.sum = function (){ var result = 0; for(var i=0; i
实例：给原型添加方法
<script> var arr1 = new array(2,8,8); var arr2 = new array(5,5,10); array.prototype.sum = function (){ var result = 0; for(var i=0; i
(2)、解决历史遗留问题
现在我们就可以使用原型，来解决没有 new 和函数重复定义的问题了。
<script> function userinfo(name, qq){ //1.原料 - 创建对象 //var obj = new object(); //加了new之后，系统(浏览器)会自动替你声明一个变量： //var this = new object(); //2.加工 - 添加属性和方法 /* obj.name = name; obj.qq = qq; obj.showname = function (){ alert('我的名字叫：'+this.name); }; obj.showqq = function (){ alert('我的qq是：'+this.qq); }; */ this.name = name; this.qq = qq; //3.出厂 - 返回 //return obj; //系统也会自动替你返回： //return this; } //2.函数重复的解决：userinfo给类加原型。 userinfo.prototype.showname = function (){ alert('我的名字叫：' + this.name); }; userinfo.prototype.showqq = function (){ alert('我的qq是：' + this.qq); }; //1.加上没有new。 var obj1 = new userinfo('小白', '89898989'); var obj2 = new userinfo('小明', '1234567'); obj1.showname(); obj1.showqq(); obj2.showname(); obj2.showqq(); //加了原型之后 alert(obj1.showname == obj2.showname); //返回：true </script>
上面的代码看着有点复杂，我们把不必要的省略，如下：
<script> function userinfo(name, qq){ this.name = name; this.qq = qq; } userinfo.prototype.showname = function (){ alert('我的名字叫：' + this.name); }; userinfo.prototype.showqq = function (){ alert('我的qq是：' + this.qq); }; var obj1 = new userinfo('小白', '89898989'); var obj2 = new userinfo('小明', '1234567'); obj1.showname(); obj1.showqq(); obj2.showname(); obj2.showqq(); alert(obj1.showname == obj2.showname); //返回：true </script>
现在代码是不是比最初的样子，简洁了很多，new 关键字也使用了，而且每个对象都是相等的。通过上面的实例，我们可以看到，再加上 new 之后，使用就方便了很多，代码明显减少了，因为在加了 new 之后，系统也就是浏览器自动为你做两件事，这就是 new 的使命，第一件事是替你创建了一个空白对象，也就是替你声明了一个变量：var this = new object();，第二件事就是再提你返回这个对象：return this;，这里需要注意，在之前我们也讲过，在调用函数的时候，前边加个 new，构造函数内部的 this 就不是指向 window 了，而是指向一个新创建出来的空白对象。
这种方式就是流行的面向对象编写方式，即混合方式构造函数，混合的构造函数/原型方式(mixed constructor function/prototype method)，他的原则是：用构造函数加属性，用原型加方法，也就是用构造函数定义对象的所有非函数属性，用原型方式定义对象的函数方法。用原型的作用，就是此对象的所有实例共享原型定义的数据和(对象)引用，防止重复创建函数，浪费内存。原型中定义的所有函数和引用的对象都只创建一次，构造函数中的方法则会随着实例的创建重复创建(如果有对象或方法的话)。这里需要注意，不管在原型中还是构造函数中，属性(值)都不共享，构造函数中的属性和方法都不共享，原型中属性不共享，但是对象和方法共享。所以创建类的最好方式就是用构造函数定义属性，用原型定义方法。使用该方式，类名的首字母要大写，这也是一种对象命名的规范。
7、面向对象实例通常我们在写程序时，都使用的是面向过程，即要呈现出什么效果，基于这样的效果，一步步编写实现效果的代码，接下来我们就把面向过程的程序，改写成面向对象的形式。面向过程的程序写起来相对容易些，代码也比较直观，易读性强，我们先看一个面向过程的实例。
实例：面向过程的选项卡
<!doctype html> <html> <head> <meta charset="utf-8"> <title>javascript实例</title> <style> #div1 input{background:white;} #div1 input.active{background:green;color:white;} #div1 div{ width:200px; height:200px; background:#ccc; display:none; } </style> <script> window.onload = function (){ //1、获取所需元素。 var odiv = document.getelementbyid('div1'); var obtn = odiv.getelementsbytagname('input'); var adiv = odiv.getelementsbytagname('div'); //2、循环遍历所有按钮。 for(var i=0; i
实例：面向对象的选项卡
<!doctype html> <html> <head> <meta charset="utf-8"> <title>javascript实例</title> <style> #div1 input{background:white;} #div1 input.active{background:green;color:white;} #div1 div{ width:200px; height:200px; background:#ccc; display:none; } </style> <script> window.onload = function(){ new tabshow('div1'); }; function tabshow(id){ var _this = this; var odiv = document.getelementbyid(id); this.obtn = odiv.getelementsbytagname('input'); this.adiv = odiv.getelementsbytagname('div'); for(var i=0; i
8、继承和原型链(1)、继承
前边我们简单的说过继承是从已有对象上，再继承出一个新对象，继承就是在原有类的基础上，略作修改，得到一个新的类，不影响原有类的功能。继承的实现有好几种方法，最常用的就是 call() 方法和原型实现继承。下面看一个继承的实例：
1 <script> 2 function a(){ 3 this.abc = 12; 4 } 5 a.prototype.show = function (){ 6 alert(this.abc); 7 }; 8 9 function b(){ 10 a.call(this); 11 } 12 13 for(var i in a.prototype){ 14 b.prototype[i]=a.prototype[i]; 15 } 16 17 b.prototype.fn=function (){ 18 alert('abc'); 19 }; 20 21 var objb = new b(); 22 alert(objb.abc); //返回：12 23 objb.show(); //返回：12 24 objb.fn(); //返回：abc 25 26 var obja = new a(); 27 obja.fn(); //报错：a没有该方法 28 </script>
上面的代码，b函数 继承了 a函数 的属性，通过 call 方法，该方法有一个功能，可以改变这个函数在执行时里边的 this 的指向，如果 b函数 中不使用 call，this 则指向 new b()，使用 call 后，this 则指向 a。方法继承 b.prototype = a.prototype;，a 的方法写在原型里，赋给 原型b，原型也是引用，将 a的原型 引用给 b的原型，就相当于 原型a 和 原型b 公用引用一个空间，所以 原型b 自己的方法，原型a 也可以用，给 原型b 添加一个方法，也就是给 原型a 添加一个方法。所以可以使用循环遍历 原型a 中的内容，再将这些内容赋给 原型b，这样 原型a 就没有 原型b 的方法了，也就是给 b 再添加方法，a 将不会受到影响(obja.fn() 报错)，b 不仅有从父级继承来的方法(objb.show())，还有自己的方法(obj.fn())。
(2)、原型链
在 js 中，每当定义一个对象（函数）时，对象中都会包含一些预定义的属性。其中函数对象的一个属性就是原型对象 prototype。这里需要注意：普通对象没有 prototype，但有__proto__ 属性。原型对象的主要对象就是用于继承。
1 <script> 2 var a = function(name){ 3 this.name = name; 4 }; 5 a.prototype.getname = function(){ 6 alert(this.name); 7 } 8 var obj = new a('小明'); 9 obj.getname(); //返回：小明 10 11 </script>
上面的代码，通过给 a.prototype 定义了一个函数对象的属性，再 new 出来的对象就继承了这个属性。
js 在创建对象（不论是普通对象还是函数对象）时，都有一个叫做 __proto__ 的内置属性，用于指向创建它的函数对象的原型对象 prototype。
1 <script> 2 var a = function(name){ 3 this.name = name; 4 } 5 a.prototype.getname = function(){ 6 alert(this.name); 7 } 8 var obj = new a('小明'); 9 obj.getname(); //返回：小明 10 11 alert(obj.__proto__ === a.prototype); //返回：true 12 </script>
同样，a.prototype 对象也有 __proto__ 属性，它指向创建它的函数对象（object）的 prototype。
1 <script> 2 var a = function(name){ 3 this.name = name; 4 } 5 a.prototype.getname = function(){ 6 alert(this.name); 7 } 8 var obj = new a('小明'); 9 obj.getname(); //返回：小明 10 11 alert(a.prototype.__proto__ === object.prototype); //返回：true 12 </script>
object.prototype 对象也有 __proto__ 属性，但它比较特殊，为 null。
1 <script> 2 var a = function(name){ 3 this.name = name; 4 } 5 a.prototype.getname = function(){ 6 alert(this.name); 7 } 8 var obj = new a('小明'); 9 obj.getname(); //返回：小明 10 11 alert(object.prototype.__proto__); //返回：null 12 </script>
综上，我们把这个由 __proto__ 串起来的直到 object.prototype.__proto__ 为 null 的链就叫做原型链。
在 js 中，可以简单的将值分为两种类型，即原始值和对象值。每个对象都有一个内部属性 (prototype)，通常称之为原型。原型的值可以是一个对象，也可以是 null。如果他的值是一个对象，则这个对象也一定有自己的原型，由于原型对象本身也是对象，而他自己的原型对象又可以有自己的原型，这样就组成了一条链，我们就称之为原型链。js 引擎在访问对象的属性时，如果在对象本身中没有找到，则会去原型链中查找，如果找到，直接返回值，如果整个链都遍历且没有找到属性，则返回 undefined。原型链一般实现为一个链表，这样就可以按照一定的顺序来查找，如果对象没有显式的声明自己的 ”__proto__”属性，那么这个值默认的设置为 object.prototype，而当 object.prototype 的 ”__proto__”属性值为 ”null”时，则标志着原型链的终结。
9、json 的面向对象json 的面向对象，就是把方法包含在一个 json 中，在仅仅只有一个对象时使用，整个程序只有一个对象，写起来比较简单，但是不适合多个对象。这种方式也被称为命名空间，所谓命名空间，就是把很多 json 用附加属性的方式创建，然后每个里边都有自己的方法，这种方法主要用来分类，使用方便，避免冲突。就相当于把同一类方法归纳在一起，既可以不冲突，而且找起来方便。
1 <script> 2 //创建一个空的json 3 var json = {}; 4 5 //现在就有了3个空的json 6 json.a = {}; 7 json.b = {}; 8 json.c = {}; 9 10 //现在3个json里边各有一个getuser函数，而且各不相同。 11 //在js中，如果是相同命名的函数就会产生冲突，相互覆盖。 12 //但是这3个json不会相互冲突，相互覆盖。 13 json.a.getuser = function (){ 14 alert('a'); 15 }; 16 json.b.getuser = function (){ 17 alert('b'); 18 }; 19 json.c.getuser = function (){ 20 alert('c'); 21 }; 22 json.a.getuser(); //返回：a 23 json.b.getuser(); //返回：b 24 json.c.getuser(); //返回：c 25 </script>
以上就是javascript学习总结【8】、面向对象编程 的内容。