js中的原型

一：原型属性

函数本身也是一个包含了方法和属性的对象。

 定义一个函数foo(),访问其他对象一样访问该函数的属性：

function foo(a, b) {
    return a * b;
}
foo.length
--2

foo.constructor
ƒ Function() { [native code] }

 函数定义时被创建的属性就包括有prototype属性，他的初始值是一个“空”对象

typeof foo.prototype
"object"

 可以自己添加该属性

foo.prototype={};

 1.利用原型添加方法和属性

构建一个具体的构造函数Gadget(),在新建时为其添加属性和方法。

function Gadget(name, color) {
    this.name = name;
    this.color = color;
    this.whatAreYou = function () {
        return 'I am a ' + this.color + '' + this.name;
    };
}

 通过构造器函数的prototype属性来增加该构造器所能提供的功能

Gadget.prototype.price = 100;
Gadget.prototype.rating = 3;
Gadget.prototype.getInfo = function () {
    return 'Rating:' + this.rating + ',price: ' + this.price;
}

 也可以另外定义一个对象，将其覆盖到之前的原型上：

Gadget.prototype = {
    price: 100,
    rating:
    }

 2.使用原型的方法和属性：

直接用该构造器来新建对象，就可以访问之前定义的那些属性和方法。

var newtoy=new Gadget('webcam','black');

newtoy.name;
"webcam"

newtoy.color;
"black"

newtoy.whatAreYou();
"I am a blackwebcam"

newtoy.price;
100

newtoy.rating;
3

newtoy.getInfo();
"Rating:3,price: 100"

 可以随时修改prototype属性，并且由同一构造器创建的所有对象的prototype属性也同时改变。

向原型中添加一个新方法：

Gadget.prototype.get = function (what) {
    return this[what];
}；

 newtoy对象在get()方法定义之前就已经被创建，我们依然可以在该对象中访问新增的方法：

newtoy.get('color');
"black"
newtoy.get('price');
100

 3.自身属性与原型属性

在getInfo()的示例中，我们使用this指针来完成对象的访问，但其实直接引用Gadget.prototype也可以完成同样的操作：

Gadget.prototype.getInfo = function () {
    return 'Rating: ' + Gadget.prototype.rating +
        ',price: ' + Gadget.prototype.price;
};

 回到之前的那个newtoy对象上：

var newtoy = new Gadget('webcam', 'black');

 newtoy.name
"webcam"

newtoy.rating
3

 每个对象都有属于自己的构造器属性，所引用的就是用于创建该对象的那个函数

newtoy.constructor===Gadget
true

newtoy.constructor.prototype.rating;
3

 每个对象都会有一个构造器，而原型本身也是一个对象，这意味着它也必然有一个构造器，而这个构造器又会有自己的原型，这种结构可能会一直不断的持续下去，并最终取决于原型链的长度，但最后一环肯定是Object内建对象，它是最高级的父级对象。

4.利用自身属性重写原型属性

如果一个对象自身属性中没有找到指定的属性，就会使用原型链中查找到的相关属性，如果，对象的自身属性与原型属性同名，自身属性的优先级高于原型属性。

示例：同一个属性名同时出现在对象的自身属性和原型属性中：

function Gadget(name) {
    this.name = name;
}
Gadget.prototype.name = 'sunyajing';

 新建一个对象，并访问该对象自身的name属性

    var toy = new Gadget('camera');
        toy.name;
"camera"

 通过hasOwnProperty()判断一个属性是自身属性还是原型属性

toy.hasOwnProperty('name');
true

 删除这个属性，同名的原型属性就会“浮出水面”

    delete toy.name;
    true

toy.name;
"sunyajing"

toy.hasOwnProperty('name');
false

 我们随时可以重建这个对象的自身属性：

   toy.name = 'camera';
    toy.name;
"camera"

 判读一个对象的某个原型属性到底是原型链中哪个原型的属性呢？可以用hasOwnProperty()属性：

 toy.toString();
"[object Object]"

 toy.hasOwnProperty('toString');
false

toy.constructor.hasOwnProperty('toString');
false

 toy.constructor.prototype.hasOwnProperty('toString');
false

Object.hasOwnProperty('toString');
false

    Object.prototype.hasOwnProperty('toString');
true

 for 更适合数组，for-in更适合对象，构造URL字符串为例：

 var params = {
        productid: 666,
        section: 'products'
    };
    var url = 'http://example.org/page.php',
        i,
        query = [];
    for (i in params) {
        query.push(i + '=' + params[i]);
    }
    url += query.join('&');
"http://example.org/page.phpproductid=666&section=products"

 并不是所有的属性都会在for-in循环中显示，例如（数组的）length属性和constructor属性就不会被显示

1.会显示的属性被称为可枚举的，可以通过propertyIsEnumerable()方法来判断对象的某个属性是否可枚举。

2.原型链中的各个原型属性也会被显示出来，当然前提是可枚举的，可以通过对象的hasOwnProperty()方法来判断一个属性是对象自身属性还是原型属性。

3.对于所有的原型属性propertyIsEnumerable()都会返回false，包括那些在for-in循环中可枚举的属性

通过以下代码看一下具体的实现方法：

  function Gadget(name, color) {
        this.name = name;
        this.color = color;
        this.getName = function () {
            return this.name;
        };
    }
    Gadget.prototype.price = 100;
    Gadget.prototype.rathing = 3;

 对他执行for-in循环，就会列出该对象中的所有属性，包括原型中的属性：

 for (var prop in newtoy) {
        console.log(prop + ' = ' + newtoy[prop]);
    }

 结果：

name = webcam
 color = black
 getName = function () {
            return this.name;
        }
 price = 100
 rathing = 3

 如果要对对象属性和原型属性做一个区分，就要调用hasOwnProperty()方法：

newtoy.hasOwnProperty('name');
true
newtoy.hasOwnProperty('price');
false

 显示对象的自身属性：

  for (var prop in newtoy) {
        if (newtoy.hasOwnProperty(prop)) {
            console.log(prop + ' = ' + newtoy[prop]);
        }
    }

 结果：

name = webcam
 color = black
 getName = function () {
            return this.name;
        }

 propertyIsEnumerable()会对所有的非内建对象属性返回true

newtoy.propertyIsEnumerable('name');
true

 对于内建属性和方法大部分是不可枚举的

newtoy.propertyIsEnumerable('constructor');
false

 如果propertyIsEnumerable()的调用是来自原型链上的某个对象，那么该对象中的属性是可枚举的

 newtoy.constructor.prototype.propertyIsEnumerable('price');
true

 5.isPrototypeOf()方法

每个对象中都会有一个isPrototypeOf()方法，这个方法告诉我们当前对象是否是另一个对象的原型

 var monkey = {
        hair: true,
        feeds: 'bananas',
        breathes: 'air'
    };

 创建一个Human的构造器函数，并设置原型属性指向monkey：

    Human.prototype = monkey;

Human.prototype = monkey;
    var george = new Human('George');
    monkey.isPrototypeOf(george);

 不知道某个原型的情况下，获得对象的原型。

    Object.getPrototypeOf(george).feeds;
    Object.getPrototypeOf(george) === monkey;

 6.神秘的_proto_链接

改写用monkey对象做原型的Human()对象构造器。

  var monkey = {
            feeds: 'bananas',
            breathes: 'air'
        };
        function Human() { }
        Human.prototype = monkey;

 创建一个developer对象，并赋予它一些属性：

        var developer = new Human();
        developer.feeds = 'pizza';
        developer.hacks = 'JavaScript';

 访问：

       developer.hacks;
      -- "JavaScript"
        developer.feeds;
      -- "pizza"

 但是breathes在developer对象自身的属性中是不存在的，所以就得去原型中查找

developer.breathes;
"air"

 这个神秘的链接叫做__proto__属性

developer.__proto__ === monkey;
true

 __proto__是某个实例对象的属性，而prototype则是属于构造器函数的属性。

typeof developer.__proto__
"object"

typeof developer.prototype;
"undefined"

 typeof developer.constructor.prototype;
"object"

 二：扩展内建对象

内建对象的构造器函数（Array、String、Object、Function）都是可以通过原型来扩展的

  Array.prototype.inArray = function (needle) {
            for (var i = 0, len = this.length; i < len; i++) {
                if (this[i] === needle) {
                    return true;
                }
            }
            return false;
        };

        var colors = ['red', 'green', 'blue'];
        colors.inArray('red');
true

colors.inArray('yellow');
false

反转字符串的功能：

  String.prototype.reverse = function () {
            return Array.prototype.reverse.apply(this.split('')).join('');
        }

        "sunyujing".reverse();
"gnijuynus"

 为String对象添加trim()方法

 if(typeof String.prototype.trim  !== 'function'){
        String.prototype.trim = function(){
        return this.replace(/^s+|s+&/g,'');
          };
        }

        " hwllow ".trim();
"hwllow"

 如果想要通过原型为某个对象添加一个新属性，务必检查一下该属性是否已经存在

三：原型陷阱

处理原型时，特别注意以下两种行为：

1.我们对原型对象执行完全替换时，可能会触发原型链中某种异常（exception）

2.prototype.constructor属性不可靠

新建一个简答的构造器函数，并创建两个对象

 function Dog() {
            this.tail = true;
        }
        var benji = new Dog();
        var rusty = new Dog();

 添加一个Say()方法：

  Dog.prototype.say = function () {
            return 'Woof';
        };

 上面的两个对象都可以访问该新方法。

benji.say();
"Woof"

rusty.say();
"Woof"

 检查一下这些对象构造器函数，会发现一切正常。

benji.constructor === Dog;
--true
rusty.constructor === Dog;
--true

 用一个自定义的新对象完全覆盖掉原有的原型对象：

 Dog.prototype = {
            paws: 4,
            hair: true
        };

 这会使原有对象不能访问原型的新增属性，依然通过那个神秘的链接与原有的原型对象保持联系。

 typeof benji.paws;
--"undefined"

benji.say();
--"Woof"

 typeof benji.__proto__.say;    
--"function"

   typeof benji.__proto__paws;
--"undefined"

 之后创建的所有对象使用的都是被更新后的prototype对象

 var lucy = new Dog();
        lucy.say();
Uncaught TypeError: lucy.say is not a function

 lucy.paws;
--4

 其神秘的链接__proto__也指向了新的prototype对象

       typeof lucy.__proto__.paws;
       ---"number"
       typeof lucy.__proto__.say;
       ---"undefined"

 新对象的constructor属性就不能再保持正确了，原本是Dog()的引用却指向了Object()

lucy.constructor;
--ƒ Object() { [native code] }

benji.constructor;
--ƒ Dog() {
            this.tail = true;
        }

 也可以通过重新设置constructor属性来解决上述所有的异常行为：

function Dog() { }
        Dog.prototype = {};
        new dog().constructor === Dog;
--false

  Dog.prototype.constructor = Dog;
        new Dog().constructor === Dog;
true

 当我们重写某个对象的prototype时，需要重新设置相应的constructor属性。