十二、prototype

2017-02-14  本文已影响3人  幸福幸福幸福

每个函数的prototype属性都包含一个对象。
它只有在该函数是构造器函数时才会发挥作用。
该函数创建的所有对象都会持有一个该函数的prototype属性的引用，并可以将其当作自身的属性来使用。
prototype属性的简单使用：


下面我们将解决以下问题

  1. 原型属性
    首先我们已经知道，在JavaScript中函数本身也是一个包含了属性（length和constructor）和方法（apply()和call()）的对象。接下来我们来看函数的另外一个属性：prototype。
    prototype属性在函数被创建时就和length以及constructor这些属性一起被创建了，它的初始值是一个空对象。
    下面是一个实例过程
    //Gadget是一个构造器，我们在创建它时已经添加了name、color属性和whatAreYou方法.它自身也有length、constructor、prototype属性和call()、apply()方法
    var Gadget = function(name,color){
    this.name = name;
    this.color = color;
    this.whatAreYou = function(){
    return 'I am a '+this.color+' '+this.name;
    }
    }
    //此时Gadget()函数的prototype属性是一个空对象
    console.log(Gadget.prototype); //Object {}
    //Gadget函数实质也是一个对象所以他也有constructor属性
    console.log(Gadget.constructor); //function Function() { [native code] }
    //我们也可以自己添加prototype属性
    Gadget.prototype = {}

     //利用原型链添加属性和方法，通过构造器函数的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 : 3,
     getInfo : function(){
         return "Rating: "+this.rating+',price: '+this.price;
     }
 }
 
 var newtoy = new Gadget('webcam','black');
 console.log(newtoy.name);                   //webcam
 console.log(newtoy.color);                  //black
 console.log(newtoy.whatAreYou());           //I am a black webcam
 console.log(newtoy.rating);                 //3
 console.log(newtoy.price);                  //100
 console.log(newtoy.getInfo());              //Rating: 3,price: 100
 //如果我们此时修改原型,可以看到我们依然可以通过已经创建好的newtoy中访问Gadget新添加的原型方法
 Gadget.prototype.get = function(what){return this[what];}
 
 console.log(newtoy.get('price'));
 console.log(newtoy.get('name'));
上一篇 下一篇

猜你喜欢

热点阅读