新手如何理解JS面向对象开发？

今天有时间讲讲我对面向对象的理解跟见解，尽可能用通俗的语言来表达，多多指教！

现在前端开发已经愈来愈火了，对于前端开发的要求也是愈来愈高了，在面试中，常常有面试官会问：你对JS面向对象熟悉吗？

其实，也就是至关于在问你，在工做中有没有用过面向对象开发？说到这里，有人就问了，什么事面向对象？

面向对象： 用我我的最简单的理解表达就是，Object的操做。另一种理解： 给你一个条件，你去找个对象帮我处理这个事情，你就不要本身动手了。

说白了，咱们就是在操做对象，那么咱们就须要去建立这个对象，建立对象的方法有不少种，这里就不一一列举了，可是咱们要知道，操做的全部的对象都是Object的实例，甚至还能够从原型去生成实例对象。

工做例子：

var obj = {};   

obj.token = '';

obj.username = '';

obj.userid = '';

这样，一个对象搞定了。若是咱们要写不少个呢？好比不少地方都用到了，是否是重复要写不少次？MMP，头都大了。

有没有办法解决呢？

那么有人就问了，为何不作一个简单的封装呢？好比：

function obj (token,username,userid) {

　　return {

　　　　token:token,

　　　　username:username,

　　　　userid:userid

　　}

}

而后须要的时候，调用这个obj方法传参就OK了呀？

那么问题来了，封装是没错，也能用，也有道理，那么请问，你这不是在调用函数吗？用一次调一次，他们之间有关系吗？

这时候就问了，那怎么办？有，其实也就说，有没有办法让不一样的实例都指向同一个方法（函数）让他们产生关系。那么JS就给出了构造函数这个模式用来解决从原型对象去生成实例，使用了this变量，new运算符。

先不上例子，先说说为何构造函数能解决这个问题。首先，它也是一个普通的函数，就是由于它用了this变量与new运算符使得它可以从原型对象上去new一个实例，而且JS规定每一实例都要有一个constructor属性，这个属性可厉害了，它的做用就是把每个实例都指向同一个构造函数。也就是说，无论你生多少个儿子，爸爸就是那个构造函数。

接着看个例子：

function obj () {

　　　　this.token:token;

　　　　this.username:username;

　　　　this.userid:userid;

}

var obj1 = new obj('asdfsdf82377888sdfds','john',1);

var obj2 = new obj('dfvswc89923884928k','Steph',2);

好了，例子也有了，根据上面的解释，你能够理解为obj1,obj2的爸爸都是obj，也就是都是构造函数obj的实例。

来个工做中涉及到的案例，好比上面的例子是发送一条数据到后台的，而且在前端需求中明确要求这个信息是要有时间的，也就是说这条信息是何时发布的也要现实出来，这时候后端程序员说：“我不处理了，你本身一块儿送过来吧”。那这时候，怎么处理？来来来，往下看

function obj () {

　　　　this.token:token;

　　　　this.username:username;

　　　　this.userid:userid;

　　　　this.tamp: new Date().getTime();

}

这样，O了！

问题来了，在每次生成实例的时候，this.tamp这个属性是否是都要自动生成一次？而每一个实例都多出这么一个属性所占有的空间，是否是浪费资源？

解决办法： 属性prototype

先来讲说概念，构造函数prototype属性，这个属性指向一个对象，而这个对象的全部的属性跟方法，都会被构造函数的实例所继承。

什么意思呢？也就是说，构造函数的这个属性里的东西均可以被它的实例继承

举例：obj构造函数定义一个prototype属性，这个属性指到一个对象，咱们给这个对象加上一个属性，好比就叫tamp，那么这个属性都会被obj的实例拿到。也就解决了上面的问题。

最终能够这么写：

function obj () {

　　　　this.token:token;

　　　　this.username:username;

　　　　this.userid:userid;

}

obj.prototype.tamp = new Date().getTime();

var message = new obj('sdfasdf434fasf','name',3);

var final = JSON.parse(JSON.stringify(message));

final.tamp = message.tamp;

最后将final对象传给后台搞定！