想说爱你不容易 对象

想说爱你不容易 对象

最近几天一直和朋友在讨论关于对象 的问题，当然，在这里说的对象不是指男女朋友对象，是占据javascript整个的对象，毕竟js是面向对象的编程语言，那么首先我们要搞清楚什么是对象，不管你怎么去查阅资料，很难去给对象下一个定义，因为这玩意说实话没有特定的含义，需要我们去慢慢的去理解。在这里吧 我也谈一下我对对象的理解。

对象，从哲学理论（博主不是在吹，哲学思想很重要）上讲十分抽象，大家肯定听说过一切皆是对象这句话。我们看到的任何东西都可以是对象，比如电视机，电脑，空调，洗衣机。。等等我们并不知道电视机里面构造是啥 我们会用就行，就像我们不需要知道Date对象里面是啥，我们知道它是获取日期的就行。其实对象这个概念来源于生活，就像你去饭店吃饭一样，吩咐厨师来一碗苏格兰打卤面，你根本不需要知道苏格兰打卤面怎么做的，你只要知道厨师会做就行，通过调用（指挥）厨师就能获取你想要的东西（面）。

俗话说的好 要知其然知其所以然，现在我们不但要会用对象 ，我们还要学会写一个对象，这样也能帮我们更好的知道什么是对象 以及对象的一些特性。

浏览器自带的对象很多像Date，Array,Regexp,Error...等这些都是自带功能的对象，但是有一个对象自身是没有功能的，就像一个新的画布一样，我们可以在上面绘制我们想要的东西，这个对象就是Object,它是一个空白对象。现在我们做这样一个例子创建一个人物对象他的名字叫张三，年龄23，他有自己的showName，showAge方法。如下

var person = new Object();
person.name = '张三';
person.age = 23;
person.showName = function(){
    alert("我的名字叫"+this.name)
}
person.showAge = function(){
    alert("我的年龄是"+this.age+"岁")
}
person.showName();//我的名字叫张三
person.showAge();//我的年龄是23岁

假如现在要你在创建一个人叫李四年龄24有自己的showName,showAge方法，那么我们可能会这样写

var person = new Object();
person.name = '张三';
person.age = 23;
person.showName = function(){
    alert("我的名字叫"+this.name)
}
person.showAge = function(){
    alert("我的年龄是"+this.age+"岁")
}
person.showName();//我的名字叫张三
person.showAge();//我的年龄是23岁
//.................................
var person1 = new Object();
person1.name = '李四';
person1.age = 24;
person1.showName = function(){
    alert("我的名字叫"+this.name)
}
person1.showAge = function(){
    alert("我的年龄是"+this.age+"岁")
}
person1.showName();//我的名字叫李四
person1.showAge();//我的年龄是24岁

我相信写到这里你还是可以接受，但是假如现在再让你添加一个人，或者十个人 我相信你会疯掉，所以我们可以对代码优化，最好的办法就是抽出相同的部分封装成方法 如下

function Createperson(name,age){
    //原料
    var Person = new Object();
    //加工
    Person.name = name;
    Person.age = age;
    Person.showName = function(){
        alert("我的名字叫"+this.name)
    }
    Person.showAge = function(){
        alert("我的年龄是"+this.age+"岁")
    }
    //出厂
    return Person;
}
var person = Createperson('张三',23)
person.showName();//我的名字叫张三
person.showAge();//我的年龄是23岁
//.................................
var person1 = Createperson('李四',24)
person1.showName();//我的名字叫李四
person1.showAge();//我的年龄是24岁

这样写是不是代码减少了很多，这里有几个概念我需要说明一下，

• 构造函数：Createperson函数在这里有一个别名叫做构造函数，为什么呢？因为它是专门用来生成对象的。
• 属性：构造函数里面的name和age叫做属性，其实属性和变量是一个概念，只不过变量是自由的，而属性是属于一个对象的，
• 工厂方式：创建对象的方式有很多种，而这里运用的是工厂方式，就是原料>加工>出厂的过程。

平常我们创建实例都会写一个new 而我们上面的代码却没有写new 而是直接调用Createperson方法，那么我们可以给它前面加一个new 吗？当然任何函数前面都可以加new 只不过会有些区别，比如下面例子

function show (){
    alert(this);
}
show()//window
new show()//Object
//也就是说当没有new 的时候，this是指向window的，因为这个方法本身就属于window，而当添加上new的时候此时this指向的是一个新的对象

我们队上面的代码进行改造，会得到如下代码

function Createperson(name,age){
    //var Person = new Object();
    this.name = name;
   this.age = age;
    this.showName = function(){
        alert("我的名字叫"+this.name)
    }
    this.showAge = function(){
        alert("我的年龄是"+this.age+"岁")
    }
    //return Person;
}
var person = new Createperson('张三',23)
person.showName();//我的名字叫张三
person.showAge();//我的年龄是23岁
//.................................
var person1 = new Createperson('李四',24)
person1.showName();//我的名字叫李四
person1.showAge();//我的年龄是24岁

我相信大家很奇怪为什么有了new之后要这样写，其实是这样的，没有new的时候我们要自己创建一个空白对象并把这个空白对象返回出去，但是有了new之后就不一样了系统会暗地里悄无声息地帮我们做两件事情第一：创建一个空白对象第二：把空白对象返回出去 也就是这样的逻辑

function Createperson(name,age){
    //var Person = new Object();
    //浏览器会偷偷的这样做 var this = new Object();
    this.name = name;
   this.age = age;
    this.showName = function(){
        alert("我的名字叫"+this.name)
    }
    this.showAge = function(){
        alert("我的年龄是"+this.age+"岁")
    }
    //return Person;
    //浏览器偷偷的return this
}
var person = new Createperson('张三',23)
person.showName();//我的名字叫张三
person.showAge();//我的年龄是23岁
//.................................
var person1 = new Createperson('李四',24)
person1.showName();//我的名字叫李四
person1.showAge();//我的年龄是24岁

经过上面代码的改造我们现在给构造函数添加了new，但是还有问题 假如现在要添加更多的人，那么我们要不停的new(),那么内存中就是每个人都有name age showName showAge ,这样太浪费内存空间 看过我前面文章的朋友可能知道该怎么处理，在处理之前我在重复讲三个概念

• 原型：什么是原型呢？其实原型我们之前接触过，可能你没有很深的概念，在css中我们给一组元素添加样式会用到class，给一个元素添加样式可能会用到行间样式，然而在js中给一组对象添加方法就叫做原型，例如下面一个简单的例子

var arr1 = new Array(1,2,3);
var arr2 = new Array(1,2,4);
arr1.sum = function(){
    var result = 0;
    for(var i =0;i<this.length; i++){
        result += this[i];
    }
    return result;
}
alert(arr1.sum())//6
alert(arr2.sum())//arr2.sum is not a function

为什么arr2没有sum方法呢，其实很简单，因为你只给arr1添加了sum方法，就好比给一个元素添加了行间样式，这个样式只属于这个元素而已，那么要怎样才能让arr2上面也有sum方法呢，这就要利用原型了。我们把代码改成下面这样子

var arr1 = new Array(1,2,3);
var arr2 = new Array(1,2,8);
Array.prototype.sum= function(){
    var result = 0;
    for(var i =0;i<this.length; i++){
        result += this[i];
    }
    return result;
}
alert(arr1.sum())//6
alert(arr2.sum())//11

• 类 什么是类呢 类其实就是一个模子 Array ,Date就是类 也可以管类叫做构造函数 模子的作用是成产产品，而类的作用是生产对象
  就像var arr = new Array();那么arr就是成产出来的对象（产品），Array就是模子（类）

有了上面的原型 类的概念我们把我们的代码进一步改造成下面的

function Createperson(name,age){
    //var Person = new Object();
    this.name = name;
   this.age = age;
    
}
Createperson.prototype.showName = function(){
    alert("我的名字叫"+this.name)
}
Createperson.prototype.showAge = function(){
    alert("我的年龄是"+this.age+"岁")
}
var person = new Createperson('张三',23)
person.showName();//我的名字叫张三
person.showAge();//我的年龄是23岁
//.................................
var person1 = new Createperson('李四',24)
person1.showName();//我的名字叫李四
person1.showAge();//我的年龄是24岁

根据上面的代码可以看到构造函数里面加的全都是属性，原型上面加的方法，其实不难理解 跟我们写样式一样，相同的我们会放到class里，不同的我们会添加行间样式，每个人的名字和年龄是不一样的所以我们把它放到构造函数里面，但是它们的方法是一样的都是弹出名字和年龄，那么我们就把相同的方法放在原型上。一句话总结就是构造函数就属性 类的原型加方法。

我们现在明白了什么是对象也知道如何去写一个对象了，说的不对的地方希望大家及时反馈，以上代码全部经过测试的，融合了书本知识和实践知识 本文原创，转载注明出处

有任何疑问可以进群4744717759交流谢谢。2017-3-18-00:16