javascipt——原型

1、原型存在的意义

JS不是面向对象的语言，没有类的概念，但是提供了构造器函数，其也可以创建一个对象。构造器函数如下：

function people(name, age, sex) {
    this.name = name;
    this.age = age;
    this.sex = sex;
    this.message = function () {
        console.log("名字：" + this.name + "；年龄：" + this.age + "；性别：" + this.sex);
    }
}

 　　创建对象如下：

var long=new people("小龙",24,"男");
long.message();
var yu=new people("小玉",23,"女");
yu.message()

 结果如图：

每一次new一个新的对象时，都会根据构造函数复制一份副本保存到内存中。由于一般来说不同对象其属性值是不同的，如上面的 name、age、sex。但是方法的内容确是相同的。现在每new一个对象就复制一次方法保存的内存中实在有些浪费内存。解决这个问题就要用到原型。

方法通过原型实现 如下：

function people(name, age, sex) {
    this.name = name;
    this.age = age;
    this.sex = sex;
}
people.prototype=new function ()   //为构造函数重写原型。
{
    this.message = function () {
        console.log("名字：" + this.name + "；年龄：" + this.age + "；性别：" + this.sex);
    }
}

　　创建对象如下：

var long=new people("小龙",24,"男");
long.message();
var yu=new people("小玉",23,"女");
yu.message()

 　　结果如图：

 可见最终实现的效果是一致的。

2、prototype 与 __proto__的区别（注意：__proto__ 的前后均是两个下划线）

首先要明确一点的是：原型是一个实例化的对象而不是构造函数。

要区分 prototype 与 __proto__首先要明确原型对象与构造函数、实例化对象之间的连接关系。　　

对于构造函数，我们是通过构造函数的prototype 属性连接的。如上的 构造函数的原型对象被我们重写。 prototype  属性指向一个新的对象。在使用构造函数创建对象时。除了将构造函数中我们自己定义的属性复制到新的对象，保存到内存中外，还会为新对象自动创建属性  __proto__  。其值为构造函数的 prototype  属性值。

因此可以得出结论：prototype 与 __proto__类似于C语言的指针，均是指向了原型对象。

如图：

 

3、实例化对象与静态属性

 　　每一个实例化对象均有属于自己的内存，通过构造函数定义的属性、方法均保存在该内存中，因此对于构造器函数中创建的属性在每一个实例之间是隔绝的；而原型也拥有自己专有的内存区域，每一个实例化对象均可以访问、修改的操作。因此可以将所有共用的属性直接放到原型对象中，这样就实现了类似C#中的静态属性的功能。

例：

var people = function () {
    this.message = function () {
        console.log("姓名：" + this.name + "；年龄：" + this.age + "；性别：" + this.sex)
    }
    this.setsex = function (sex) {
        this.__proto__.sex = sex;
    }
}
var man = function () {
    this.sex = "男";
}
man.prototype = new people();
var man_people = function (name, age) {
    this.name = name;
    this.age = age;
}
man_people.prototype = new man()
var long = new man_people("小龙", 24);
var qiang = new man_people("小强", 23);
long.message();
qiang.message();
long.setsex("女");  //此处给他们做个变性手术

long.message();
qiang.message();

 

4、创建共用组件

　　待续：

 

参考：

http://www.cnblogs.com/yangjinjin/archive/2013/02/01/2889103.html;

http://www.cnblogs.com/charling/p/3597793.html;

http://www.cnblogs.com/onepixel/p/5024903.html;

http://www.cnblogs.com/ljchow/archive/2010/06/08/1753526.html;

http://www.cnblogs.com/wishyouhappy/p/3721778.html