A1—浅谈JavaScript中的原型（二）

原型是什么？想要了解这个问题，我们就必须要知道对象。

对象

根据w3cschool上的介绍：对象只是带有属性和方法的特殊数据类型。

我们知道，数组是用来描述数据的。其实呢，对象也是用来描述数据的。只不过有一点点的区别，那就是数组的下标只能是数字。所以，数组最好只用来装同样意义的内容。比如说[1,2,3,4,5]或者[“a”,”b”,”c”,”d”,”e”]等。因为他们的表达的含义是一样的。那么如何表达含义不一样的内容呢？[“小明”,12,”男”]这样的内容。鬼知道它要表达什么啊！所以，由于数组的下标只能是数字。无法准确的表达每一项的含义。于是乎，对象出现了。

对象=> { “name”:”小明”,”age”:12,”sex”:”男”}。对象就是由各种key:value对组成的数据结构。

看，数组[“小明”,12,”男”]与对象{ “name”:”小明”,”age”:12,”sex”:”男”}都有相同的值。只不过对象表达的更清晰。更能让人知道每一个数据表达的含义是什么！

我们上面的对象，很明显的想要描述一个人的各项信息。那么能不能描述一下这个人能做的事情呢？比如说：“唱歌”“读书”。

当然可以！

{

“name”:”小明”,

”age”:12,

”sex”:”男”,

”sing”:function{

console.log(“我在唱歌”);

},

”read”:function{

console.log(“我在读书”);

}

}看，通过上面这样一组一组的key:value对就能够清晰的表达一个人的各项属性和方法

属性：对象的key对应的东西都叫做属性。方法：(接上句)但是，如果这个key对应的是一个函数，那么我们叫它方法。

好了，现在我们知道什么叫对象以及对象可以拥有方法。那么在JavaScript中我们想要创建多个相似的对象该怎么办呢？很明显，我们不是一条一条写出来的。

我们知道，在JavaScript中，函数的作用是复用代码。而定义一个对象其实就是一条条代码组成的。那么我们可以这样写。

function createPeople{

var obj = {

“name”:”小明”,

”age”:12,

”sex”:”男”,

”sing”:function{

console.log(“我在唱歌”);

},

”read”:function{

console.log(“我在读书”);

}

}

}

看，我们使用函数来简化了代码的书写。这样每当我们调用一次函数就能够创建一个“小明”出来。可是我们如果创建的对象的属性值不一样，该怎么办呢？

思考：简单，函数不是可以传递参数吗？

我先把函数内部的对象的所有属性都定义成形参。然后当函数调用的时候传递实参就可以了呀！

代码如下：

function createPeople(name,age,sex){

var obj = {

“name”:name,

”age”:age,

”sex”:sex,

”sing”:function{

console.log(“我在唱歌”);

},

”read”:function{

console.log(“我在读书”);

}

}

}

现在好了，我们每执行一次函数并传递不同的参数，就可以获得到不同的对象了。

createPeople(“小明”,12,”男”);=>得到一个小明对象

createPeople(“小红”,12,”女”);=>得到一个小红对象

但是！！！！！！！！

发现没有？？？？？

每调用一次createPeople函数，我们就会定义两个新的函数：sing和read。并且定义完毕之后会被这个对象的属性引用。那么这样的话我们创建了小明和小红，就会在内存中开辟4个地址。

分别存放小红.sing、小红.read、小明.sing、小明.read。

而小红.sing和小明.sing的功能是一模一样的。小红.read和小明.read方法也是一模一样的。这不科学！！！！！！

现在我们只是调用了两次createPeople，就会创建四个新的函数。那么如果调用二十次呢？如果每个对象不仅仅只有两个方法呢？

我们知道函数的使命就是让代码被复用。可是，却出现了每一个对象都有一个自己的方法这种情况。这样将会造成内存的极大浪费！

也就是说：

小明.sing===小红.sing的结果为false

那我们就想：要是能提取出来就好啦！

当然可以！

function createPeople(name,age,sex){

var obj = {

“name”:name,

”age”:age,

”sex”:sex,

”sing”:sing,

”read”:read

}

}

function sing{

console.log(“我在唱歌”);

}

function read{

console.log(“我在读书”);

}

发现没有？我们成功的将所有的对象的方法，都提取出来了，这样不管创建多少对象。都仅仅会在内存中有一个地址。也即是说

createPeople(“小明”,12,”男”);=>得到一个小明对象

createPeople(“小红”,12,”女”);=>得到一个小红对象

此时：小红.sing ===小明.sing结果为true

但是，如果方法一旦多了，就会在全局作用域下造成污染。全局作用域中会出现好多的变量。所以再进一步简化：

function createPeople(name,age,sex){

var obj = {

“name”:name,

”age”:age,

”sex”:sex,

”sing”:peopleMethod .sing,

”read”:peopleMethod .read

}

}

var peopleMethod = {

sing: function {

console.log(“我在唱歌”);

},

read:function {

console.log(“我在读书”);

}

}

好了，现在不怕污染全局作用域了。（虽然还是会有一个全局变量，但是已经比之前好多了不是吗）

那么，根据这个原理，小明调用的sing方法，其实是peopleMethod的sing方法。

小红调用的sing方法其实也是peopleMethod的sing方法。

这样的话我们可以说小明和小红的方法都是peopleMethod的。

那也就可以说，

peopleMethod是小明和小红的方法对象。

而JavaScript就在设计之初，将这个对象放在了构造函数上。

这样从构造函数构造出来的对象，就会共享原型上的方法。