A1—浅谈JavaScript中的原型
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了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就在设计之初，将这个对象放在了构造函数上。
这样从构造函数构造出来的对象，就会共享原型上的方法。
本文出自 “青蛙” 博客，转载请与作者联系！
以上是关于A1—浅谈JavaScript中的原型的主要内容，如果未能解决你的问题，请参考以下文章