想说爱你不容易 对象

想说爱你不容易 对象

最近几天一直和朋友在讨论关于对象 的问题，固然，在这里说的对象不是指男女友对象，是占据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