JavaScrpt的面向对象全面解析

每次说到javascript的面向对象，总感觉自己心里懂，但是却不知道该怎么说，这就是似懂非懂到表现，于是乎，每次一说，就要到处去查找资料，零零碎碎到看了一些，感觉有懂了，但是过段时间，好像又不知道是怎么回事了，于是乎，又到处找资料，然道是我本来就缺对象？才不理解对象是啥，以至于现实中找找对象，javascript中也在找对象！哎，好尴尬啊！直到我看到了一个妹纸写到“不可不知的javascript面向对象”，我才明白面向对象是什么，这是不是说我要找到对象就是这个妹纸呢😄，先记录一下备忘吧，下面是妹纸写到主要内容：

对象的创建：

1 创建一个面向对象

缺点：当我们想创建多个面向对象的时候，重复代码过多，需要封装，所以有了工厂方法。

2 工厂方式

函数，整个过程像工厂的流水线，所以叫工厂方式

缺点：无法识别创建的对象的类型。因为全部都是Object，没有区分度，不像Date、Array等，因此出现了构造函数模式。

3 构造函数模式

我们通过这二个方面来改变：

1 函数名首字母大写

这是为了区别于普通的函数，构造函数本身其实就是普通的函数，只是我们专门用它来实现了构造的功能，所以专门起了一个名字叫构造函数，任何函数都可以成为构造函数，这取决于你调用函数的方式，当使用了New的方式调用就成了构造函数。

2 New 关键字调用

调用函数的时候用了 New关键字，那么New到底做了什么？用不用New有什么区别？再来看下面的例子

我们会发现当用New去调用一个函数的时候，this的指向会不一样。其实New主要做了下面这些事，不过下面写的只是大概的行为，并不是内部源码。

属性指向构造函数的原型对象,这样obj就可以调用CreatePerson原型对象下的所有方法，这里原型先知道结论，下面会讲。 CreatePerson.apply(obj); //用apply方法让this指向obj对象 this.name = name; //obj对象添加属性，方法 this.showName = function(){ alert(this.name); }; return obj;//返回这个对象 }

函数构造模式存在的问题：

缺点：可见这两个对象并不是共用一个方法，每new一次，系统都会新创建一个内存，这两个对象各自有各自的地盘，但他们具有相同的功能，还不共用，肯定不是我们所希望的。所以就有了下一种方法，原型+构造模式

4 原型+构造模式

原型：每个函数都有一个prototype属性，它是一个对象，也称作原型对象，我们可以把方法和属性写在它上面（不过原型对象不仅仅有我们写的属性和方法，还有别的，下面会介绍），而通过这个函数创建出来的实例对象，都能共享这个原型对象下的方法和属性。所以我们只需要把想要共享的东西放在函数的prototype下，不想共享的东西通过构造函数来创建就可以了。看个栗子（原型+构造）

测试为true，可见showName()方法是共享的，也就是说他们共用一个内存，更进一步的说它们存在引用关系，也就是说你更改了p1的showName也会影响p2的showName。

_proto_属性:

同一个函数造出来的实例对象能共享这个函数的prototype下的方法和属性，但是它是如何做到的呢？这里要出场的就是_proto_属性.

每个实例化对象都有_proto_属性，它是一个指针，指向函数的prototype，也就是保存了它的地址。（JS中任何对象的值都是保存在堆内存中，我们声明的变量只是一个指针，保存了这个对象的实际地址，所以有了地址就能找到对象），所以总得来说，每个实例化对象都有_proto_属性，保存了构造函数的原型对象的地址，通过这个属性就可以拥有原型对象下的所有属性和方法，_proto_属性实际就是实例化对象和原型对象之间的连接

原型链：

每个函数都可以成为构造函数，每个函数都有原型对象，每个原型对象也可以是一个实例化对象，比如，你创建了一个函数fun,它是构造函数function的实例化对象，而function的原型对象，又是Object的实例对象。所以fun有个_proto_属性可以访问到function的原型对象,function原型对象也是个实例对象，也有个_proto_属性,可以访问到Object的原型对象，所以通过_proto_属性，就形成了一条原型链。每个实例化对象都可以访问到链子上方的方法和属性，所以fun是可以访问Object原型对象下的方法和属性的。实际上所有对象都可以访问到Object的原型对象。

原型链的访问规则：先在自身的下面寻找，再去一级一级的往原型链上找。

如下：

原型对象：

原型对象下可能有三种属性：

1 原型对象所带方法和属性 2 constructor 3_proto_属性

constructor:构造函数属性，每个函数的原型对象都有的默认属性，指向函数。

每个实例化对象本身是没有constructor属性的，他们下面默认只有一个_proto_属性,用来连接原型对象，而和构造函数本身是没有直接的联系的。所以它的constructor是访问的原型对象上的。所以当原型对象的constructor变化了，实例化对象的constructor也会改变。但是如果这个对象本身既是原型对象，又是实例化对象，那就拥有了constructor属性，无需从原型对象上面访问。**

看下面的例子，来验证我们所说的：

添加的方法， 2 构造函数constructor 3 _proto_(和上一层构造函数原型对象的连接) console.log(CreatePerson.prototype.__proto__===Object.prototype); // true 这个原型对象本身又是object的实例化对象，所有_proto_指向Object的原型对象 console.log(CreatePerson.prototype.__proto__===Object); // false 可见是和构造函数下原型对象的连接，不是构造函数 console.log(CreatePerson.prototype.constructor); //CreatePerson CreatePerson.prototype是Object实例化对象,也是原型对象，所以自身拥有constructor属性 console.log(Object.prototype.__proto__); // null 原型链的终点是null console.log(CreatePerson.__proto__); //function.prototype // CreatePerson本身既是构造函数又是function的实例化对象，拥有_proto_属性，指向function的原型对象 console.log(CreatePerson.constructor); // function 继承自function.prototype console.log(CreatePerson.prototype instanceof CreatePerson ) //验证是否在一条原型链上 false

字面量法定义原型：

为了创建对象的代码更方便，你一定见过这样的代码，就是字面量法：

属性，就去上级原型对象找，找到了Object console.log(a1.constructor ); //Object 也变了，验证了它是访问的原型对象上的

因此我们在写的时候需要修正一下原型的指向：

以上所述是小编给大家介绍的JavaScrpt的面向对象全面解析。编程之家 jb51.cc 收集整理的教程希望能对你有所帮助，如果觉得编程之家不错，可分享给好友！感谢支持。

原文链接：https://www.f2er.com/js/39421.html