浅谈原型对象和原型链（源于学习整理笔记）

在Javascript中，万物皆对象，但对象也有区别，大致可以分为两类，即：普通对象（Object）和函数对象（Function）。

一般而言，通过new Function产生的对象是函数对象，其他对象都是普通对象。

在Javascript中创建对象有两种方式：对象字面量和使用new表达式、

在JS中，每当创建一个函数对象f1 时，该对象中都会内置一些属性，其中包括prototype和__proto__,  prototype即原型对象，它记录着f1的一些属性和方法。

需要注意的是，prototype 对f1是不可见的，也就是说，f1不会查找prototype中的属性和方法。 

function f(){}

f.prototype.foo = "abc";

console.log(f.foo); //undefined

那么，prototype有什么用呢？ 其实prototype的主要作用就是继承。 通俗一点讲，prototype中定义的属性和方法都是留给自己的“后代”用的，因此，子类完全可以访问prototype中的属性和方法。

想要知道f1是如何把prototype留给“后代”，我们需要了解一下JS中的原型链，此时，JS中的 __proto__ 入场了，这哥们长的很奇特，隐藏的也很深，以致于你经常见不到它，但它在普通对象和函数对象中都存在， 它的作用就是保存父类的prototype对象，JS在通过new 表达式创建一个对象的时候，通常会把父类的prototype赋值给新对象的__proto__属性，这样，就形成了一代代传承...

1.    原型链的形成真正是靠__proto__ 而非prototype,当JS引擎执行对象的方法时，先查找对象本身是否存在该方法，如果不存在，会在原型链上查找，但不会查找自身的prototype。

2.    一个对象的__proto__记录着自己的原型链，决定了自身的数据类型，改变__proto__就等于改变对象的数据类型。

3.    函数的prototype不属于自身的原型链，它是子类创建的核心，决定了子类的数据类型，是连接子类原型链的桥梁。

4.    在原型对象上定义方法和属性的目的是为了被子类继承和使用。

在JavaScript中，函数也是对象，实际上，JavaScript里一切都是对象。函数对象和其它对象一样，拥有可以通过代码访问的属性和一系列仅供JavaScript引擎访问的内部属性。其中一个内部属性是[[Scope]]，由ECMA-262标准第三版定义，该内部属性包含了函数被创建的作用域中对象的集合，这个集合被称为函数的作用域链，它决定了哪些数据能被函数访问。    

JS面向对象的程序设计

         面向对象的语言有一个标志，即拥有类的概念，抽象实例对象的公共属性与方法，基于类可以创建任意多个实例对象，一般具有封装、继承、多态的特性！但JS中对象与纯面向对象语言中的对象是不同的，ECMA标准定义JS中对象：无序属性的集合，其属性可以包含基本值、对象或者函数。可以简单理解为JS的对象是一组无序的值，其中的属性或方法都有一个名字，根据这个名字可以访问相映射的值（值可以是基本值/对象/方法）。

 一、理解对象:

         第一种：基于Object对象

var person = new Object();

person.name = 'My Name';

person.age = 18;

person.getName = function(){

    return this.name;

}

        第二种：对象字面量方式（比较清楚的查找对象包含的属性及方法）

var person = {

    name : 'My name',

    age : 18,

    getName : function(){

        return this.name;

    }

}

      JS的对象可以使用‘.’操作符动态的扩展其属性，可以使用’delete’操作符或将属性值设置为’undefined’来删除属性。如下：

person.newAtt=’new Attr’;//添加属性

alert(person.newAtt);//new Attr

delete person.age;

alert(person.age);//undefined(删除属性后值为undefined);

二、对象属性类型

      ECMA-262第5版定义了JS对象属性中特征（用于JS引擎，外部无法直接访问）。ECMAScript中有两种属性：数据属性和访问器属性

      1、数据属性：

      数据属性指包含一个数据值的位置，可在该位置读取或写入值，该属性有4个供述其行为的特性：

      [[configurable]]:表示能否使用delete操作符删除从而重新定义，或能否修改为访问器属性。默认为true;

      [[Enumberable]]:表示是否可通过for-in循环返回属性。默认true;

      [[Writable]]:表示是否可修改属性的值。默认true;

      [[Value]]:包含该属性的数据值。读取/写入都是该值。默认为undefined;如上面实例对象person中定义了name属性，其值为’My name’,对该值的修改都反正在这个位置

      要修改对象属性的默认特征（默认都为true)，可调用Object.defineProperty()方法，它接收三个参数：属性所在对象，属性名和一个描述符对象（必须是：configurable、enumberable、writable和value，可设置一个或多个值）。

      如下：（浏览器支持：IE9+、Firefox 4+、Chrome、Safari5+）

var person = {};

Object.defineProperty(person, 'name', {

    configurable: false,

    writable: false,

    value: 'Jack'

});

alert(person.name);//Jack

delete person.name;

person.name = 'lily';

alert(person.name);//Jack

      可以看出，delete及重置person.name的值都没有生效，这就是因为调用defineProperty函数修改了对象属性的特征；值得注意的是一旦将configurable设置为false，则无法再使用defineProperty将其修改为true（执行会报错：can't redefine non-configurable property）;

      2、访问器属性：

      它主要包括一对getter和setter函数，在读取访问器属性时，会调用getter返回有效值；写入访问器属性时，调用setter，写入新值；该属性有以下4个特征：

      [[Configurable]]:是否可通过delete操作符删除重新定义属性；

      [[Numberable]]:是否可通过for-in循环查找该属性；

      [[Get]]:读取属性时调用，默认：undefined;

      [[Set]]:写入属性时调用，默认：undefined;

      访问器属性不能直接定义，必须使用defineProperty()来定义，如下：

var person = {

    _age: 18

};

Object.defineProperty(person, 'isAdult', {

    get: function () {

        if (this._age >= 18) {

            return true;

        } else {

            return false;

        }

    }

});

alert(person.isAdult?'成年':'未成年');//成年

      从上面可知，定义访问器属性时getter与setter函数不是必须的,并且，在定义getter与setter时不能指定属性的configurable及writable特性；

      此外，ECMA-262（5）还提供了一个Object.defineProperties()方法，可以用来一次性定义多个属性的特性：

var person = {};

Object.defineProperties(person,{

    _age:{

        value:19

    },

    isAdult:{

        get: function () {

            if (this._age >= 18) {

                return true;

            } else {

                return false;

            }

        }

    }

});

alert(person.isAdult?'成年':'未成年');//成年

 

      上述代码使用Object.defineProperties()方法同时定义了_age及isAudlt两个属性的特性

      此外，使用Object.getOwnPropertyDescriptor()方法可以取得给定属性的特性：

var descriptor = Object.getOwnPropertyDescriptor(person,'_age');

alert(descriptor.value);//19

   对于数据属性，可以取得：configurable,enumberable,writable和value；

   对于访问器属性，可以取得：configurable,enumberable,get和set

三、创建对象

使用Object构造函数或对象字面量都可以创建对象，但缺点是创建多个对象时，会产生大量的重复代码，因此下面介绍可解决这个问题的创建对象的方法

     1、工厂模式

function createPerson(name, age, job) {

    var o = new Object();

    o.name = name;

    o.age = age;

    o.job = job;

    o.getName = function () {

        return this.name;

    }

    return o;//使用return返回生成的对象实例

}

var person = createPerson('Jack', 19, 'SoftWare Engineer');

     创建对象交给一个工厂方法来实现，可以传递参数，但主要缺点是无法识别对象类型，因为创建对象都是使用Object的原生构造函数来完成的。

     2、构造函数模式

function Person(name,age,job){

    this.name = name;

    this.age = age;

    this.job = job;

    this.getName = function () {

        return this.name;

    }

}

var person1 = new Person('Jack', 19, 'SoftWare Engineer');

var person2 = new Person('Liye', 23, 'Mechanical Engineer');

 

     使用自定义的构造函数（与普通函数一样，只是用它来创建对象），定义对象类型（如：Person）的属性和方法。它与工厂方法区别在于：

·       没有显式地创建对象

·       直接将属性和方法赋值给this对象；

·       没有return语句；

      此外，要创建Person的实例，必须使用new关键字，以Person函数为构造函数，传递参数完成对象创建；实际创建经过以下4个过程：

1.   创建一个对象

2.   将函数的作用域赋给新对象（因此this指向这个新对象，如：person1）

3.   执行构造函数的代码

4.   返回该对象

     上述由Person构造函数生成的两个对象person1与person2都是Person的实例，因此可以使用instanceof判断，并且因为所有对象都继承Object，因此person1 instanceof Object也返回真：

alert(person1 instanceof Person);//true;

alert(person2 instanceof Person);//true;

alert(person1 instanceof Object);//true;

alert(person1.constructor === person2.constructor);//ture;

     虽然构造函数方式比较不错，但也存在缺点，那就是在创建对象时，特别针对对象的属性指向函数时，会重复的创建函数实例，以上述代码为基础，可以改写为：

function Person(name,age,job){

    this.name = name;

    this.age = age;

    this.job = job;

    this.getName = new Function () {//改写后效果与原代码相同，不过是为了方便理解

        return this.name;

    }

}

   上述代码，创建多个实例时，会重复调用new Function();创建多个函数实例，这些函数实例还不是一个作用域中，当然这一般不会有错，但这会造成内存浪费。当然，可以在函数中定义一个getName = getName的引用，而getName函数在Person外定义，这样可以解决重复创建函数实例问题，但在效果上并没有起到封装的效果，如下所示：

function Person(name,age,job){

    this.name = name;

    this.age = age;

    this.job = job;

    this.getName = getName;

}

function getName() {//到处是代码，看着乱！！

        return this.name;

}

     3、原型模式

     JS每个函数都有一个prototype(原型)属性，这个属性是一个指针，指向一个对象，它是所有通过new操作符使用函数创建的实例的原型对象。原型对象最大特点是，所有对象实例共享它所包含的属性和方法，也就是说，所有在原型对象中创建的属性或方法都直接被所有对象实例共享。

function Person(){

}

Person.prototype.name = 'Jack';//使用原型来添加属性

Person.prototype.age = 29;

Person.prototype.getName = function(){

    return this.name;

}

var person1 = new Person();

alert(person1.getName());//Jack

var person2 = new Person();

alert(person1.getName === person2.getName);//true;共享一个原型对象的方法

      原型是指向原型对象的，这个原型对象与构造函数没有太大关系，唯一的关系是函数的prototype是指向这个原型对象！而基于构造函数创建的对象实例也包含一个内部指针为：[[prototype]]指向原型对象。

       实例属性或方法的访问过程是一次搜索过程：

·       首先从对象实例本身开始，如果找到属性就直接返回该属性值；

·       如果实例本身不存在要查找属性，就继续搜索指针指向的原型对象，在其中查找给定名字的属性，如果有就返回；

     基于以上分析，原型模式创建的对象实例，其属性是共享原型对象的；但也可以自己实例中再进行定义，在查找时，就不从原型对象获取，而是根据搜索原则，得到本实例的返回；简单来说，就是实例中属性会屏蔽原型对象中的属性；

     原型与in操作符

     一句话：无论原型中属性，还是对象实例的属性，都可以使用in操作符访问到；要想判断是否是实例本身的属性可以使用object.hasOwnProperty(‘attr’)来判断；

     原生对象中原型

     原生对象中原型与普通对象的原型一样，可以添加/修改属性或方法，如以下代码为所有字符串对象添加去左右空白原型方法：

String.prototype.trim = function(){

    return this.replace(/^s+/,'').replace(/s+$/,'');

}

var str = '   word space   ';

alert('!'+str.trim()+'!');//!word space!

     原型模式的缺点，它省略了为构造函数传递初始化参数，这在一定程序带来不便；另外，最主要是当对象的属性是引用类型时，它的值是不变的，总是引用同一个外部对象，所有实例对该对象的操作都会其它实例：

function Person() {

}

Person.prototype.name = 'Jack';

Person.prototype.lessons = ['Math','Physics'];

var person1 = new Person();

person1.lessons.push('Biology');

var person2 = new Person();

alert(person2.lessons);//Math,Physics,Biology，person1修改影响了person2

     4、组合构造函数及原型模式

      目前最为常用的定义类型方式，是组合构造函数模式与原型模式。构造函数模式用于定义实例的属性，而原型模式用于定义方法和共享的属性。结果，每个实例都会有自己的一份实例属性的副本，但同时又共享着对方方法的引用，最大限度的节约内存。此外，组合模式还支持向构造函数传递参数，可谓是集两家之所长。

function Person(name, age, job) {

    this.name = name;

    this.age = age;

    this.job = job;

    this.lessons = ['Math', 'Physics'];

}

Person.prototype = {

    constructor: Person,//原型字面量方式会将对象的constructor变为Object，此外强制指回Person

    getName: function () {

        return this.name;

    }

}

var person1 = new Person('Jack', 19, 'SoftWare Engneer');

person1.lessons.push('Biology');

var person2 = new Person('Lily', 39, 'Mechanical Engneer');

alert(person1.lessons);//Math,Physics,Biology

alert(person2.lessons);//Math,Physics

alert(person1.getName === person2.getName);//true,//共享原型中定义方法

 

   在所接触的JS库中，jQuery类型的封装就是使用组合模式来实例的！！！

 

    5、动态原型模式

     组合模式中实例属性与共享方法（由原型定义）是分离的，这与纯面向对象语言不太一致；动态原型模式将所有构造信息都封装在构造函数中，又保持了组合的优点。其原理就是通过判断构造函数的原型中是否已经定义了共享的方法或属性，如果没有则定义，否则不再执行定义过程。该方式只原型上方法或属性只定义一次，且将所有构造过程都封装在构造函数中，对原型所做的修改能立即体现所有实例中：

function Person(name, age, job) {

    this.name = name;

    this.age = age;

    this.job = job;

    this.lessons = ['Math', 'Physics'];

}

if (typeof this.getName != 'function') {//通过判断实例封装

　　Person.prototype = {

　　　　constructor: Person,//原型字面量方式会将对象的constructor变为Object，此外强制指回Person

　　　　getName: function () {

　　　　　　return this.name;

　　　　}
　　}

}

var person1 = new Person('Jack', 19, 'SoftWare Engneer');

person1.lessons.push('Biology');

var person2 = new Person('Lily', 39, 'Mechanical Engneer');

alert(person1.lessons);//Math,Physics,Biology

alert(person2.lessons);//Math,Physics

alert(person1.getName === person2.getName);//true,//共享原型中定义方法

     注：以上内容参考《JavaScript 高级程序设计》第3版