当你定义在JavaScript中的函数，它带有几个自带的属性，其中之一就是原型。在这篇文章中，会详细讲解为什么你应在您的项目使用它。

　　

　　什么是原型？

　　最初的原型属性是一个空的对象，其他对象可以通过它实现属性继承。

　　var myObject = function(name){ 　　this.name = name; 　　return this; 　　}; 　　console.log(typeof myObject.prototype); // object 　　myObject.prototype.getName = function(){ 　　return this.name; 　　};

　　在上面的片段中，我们已经创造了一个功能，但如果我们调用myObject的（） ，它只会返回窗口对象，因为它是全局范围内定义，因此，这将返回全局对象，因为它尚未实例。 　

　　 console.log(typeof myObject); // function

　

    　保密链接 　

　　在JavaScript中的每个对象都有一个“秘密”的属性。

　　

　　每个JavaScript对象的一个“秘密”属性添加到它时，它被定义或实例，命名为__proto__，这是如何被访问的原型链。但是，它是在您的应用程序访问__proto__不是一个好主意，因为它不是在所有的浏览器。 　

 

　　__proto__属性不应该被混淆了一个对象的原型，因为它们是两个不同的属性;说，他们手牵手。这一点很重要，以使这种区别，因为它可以是相当混乱，在第一！这是什么意思是什么呢？让我解释一下。当我们创建了myObject的功能，我们定义一个类型的对象功能。

 

　　console.log(typeof myObject); // function 　　对于那些不知道的，功能是在JavaScript中的预定义对象，并作为一个结果，有其自己的属性（如长度和参数）和方法（例如通话和应用）。是的，它也有它自己的原型对象，以及__proto__的秘密联系。这意味着，JavaScript引擎在某处，有一个位，这可能是类似于以下代码： 　

    　Function.prototype = { 　　arguments: null, 　　length: 0, 　　call: function(){ 　　// secret code 　　}, 　　apply: function(){ 　　// secret code 　　} 　　... 　　}

　　事实上，它可能不会是那么简单，这仅仅是为了说明原型链是如何工作的。

　　因此，我们定义myObject的函数，并给它一个参数，名称，但我们从来没有设置任何属性，如长度或方法，如呼叫。那么，为什么做了以下工作？

　　console.log(myObject.length); / / （可用的参数的数量）　

    　这是因为，当我们定义myObject的，它创造了一个__proto__属性并将其值设置Function.prototype（在上面的代码所示）。所以，当我们访问myObject.length，它看起来myObject的一个属性叫做长度，并没有找到一个，然后链，通过__proto__链接，发现该物业，并返回它。 　

　　console.log(myObject instanceof Function); // true 　　console.log(myObject === Function); // false

　　当一个对象的实例被创建，更新的__proto__属性指向构造函数的原型，在这种情况下，是功能。 　

        console.log(myObject.__proto__ === Function.prototype) // true

　　此外，当您创建一个新的函数对象，函数的构造函数内的本地代码将计算参数的数量，并相应地更新this.length，其中。 　　然而，如果我们创建一个新实例myObject的使用新的关键字，__proto__将指向为myObject的myObject.prototype是我们的新实例的构造。

　　var myInstance = new myObject(“foo”); 　　console.log(myInstance.__proto__ === myObject.prototype); // true

　　除了 有在本地方法函数原型如，通话和应用的访问，我们现在有访问的getName myObject的的方法。

　　console.log(myInstance.getName()); // foo 　　var mySecondInstance = new myObject(“bar”); 　　console.log(mySecondInstance.getName()); // bar 　　console.log(myInstance.getName()); // foo

　　你可以想像，这是很方便，因为它可以用一个对象的蓝图，并创造许多情况下，根据需要到下一个话题！

 

　　使用原型更好吗？

　　例如，我们正在开发一个画布游戏，需要在屏幕上的几个对象（可能是数以百计的）。每个对象都需要它自己的属性，如，x和Y坐标，宽度，的高度，以及其他许多。 　　我们可以做如下：

　　var GameObject1 = { 　　x: Math.floor((Math.random() * myCanvasWidth) + 1), 　　y: Math.floor((Math.random() * myCanvasHeight) + 1), 　　width: 10, 　　height: 10, 　　draw: function(){ 　　myCanvasContext.fillRect(this.x, this.y, this.width, this.height); 　　} 　　...

　　　var GameObject2 = { 　　x: Math.floor((Math.random() * myCanvasWidth) + 1), 　　y: Math.floor((Math.random() * myCanvasHeight) + 1), 　　width: 10, 　　height: 10, 　　draw: function(){ 　　myCanvasContext.fillRect(this.x, this.y, this.width, this.height); 　　} 　　};

　　这将是建立在内存中的所有这些对象-所有单独的方法，如定义抽奖及可要求任何其他方法。这肯定是不理想，游戏将膨胀分配内存的JavaScript的浏览器，使运行速度很慢，甚至停止响应。

　　虽然这可能不会发生，只有100个对象，但它仍然可以成为是一个相当的性能损失，因为这将需要看一百个不同的对象，而不仅仅是单一，原型对象。

 

        如何使用Prototype

        为了使应用程序运行得更快（并遵循最佳做法），我们可以（重新）定义的原型属性的游戏物体，每一个游戏物体的实例，然后将引用在方法GameObject.prototype，如果他们自己的方法。    

       / /定义游戏对象的构造函数 VAR 游戏物体= （宽度，高度）{ X = Math.floor（（Math.random（）* myCanvasWidth）+ 1）; 这个Y = Math.floor（（Math.random（）* myCanvasHeight）+ 1）; 此宽度=宽度; 这个高度=高度; 返回 本; }; / /（重新）定义的游戏对象的原型对象 GameObject.prototype = { X：0 Y：0 宽度：5 宽度：5 抽奖：函数（）{ myCanvasContext.fillRect（这个X，这Ÿ，这个宽度，这个高度。）; } };

        然后我们就可以实例化游戏物体的100倍。

        var x = 100, arrayOfGameObjects = []; do { arrayOfGameObjects.push(new GameObject(10, 10)); } while(x--);

        现在我们有100个游戏物体的阵列，都有着相同的原型和定义的draw方法，大大节省了在应用程序的内存。         当我们调用Draw方法，将引用相同的功能。

        var GameLoop = function() { for(gameObject in arrayOfGameObjects) { gameObject.draw(); }

　　原型是一个活的对象 　

    　一个对象的原型是一个活的对象，可以这么说。这只是意味着，如果我们创建了我们所有的游戏对象实例后，我们决定，而不是绘制一个矩形，我们要画一个圆，我们可以更新我们的GameObject.prototype.draw方法。

　　GameObject.prototype.draw = function() { 　　myCanvasContext.arc(this.x, this.y, this.width, 0, Math.PI*2, true); 　　}

　   而现在，所有的前一个实例的游戏物体和今后任何情况下将绘制一个圆。

 

       更新母语的对象原型 　

　  是的，这是可能的。您可能熟悉的原型，JavaScript库，如采取这种方法的优点。 　　

      让我们用一个简单的例子：

　　String.prototype.trim = function() { 　　return this.replace(/^\s+|\s+$/g, ‘’); 　　};

　　现在，我们可以访问任何字符串的方法：

　   　“ foo bar “.trim(); // “foo bar” 　

    　但是有轻微的缺点。例如，你可能会在您的应用程序使用，但一年或两年下来的道路，浏览器可以执行JavaScript的更新版本，其中包括本地修剪方法在字符串的原型。这意味着你的定义镶边将覆盖本地版本！yikes！为了克服这个问题，我们可以添加一个简单的检查之前定义的函数。

　　if(!String.prototype.trim) { 　　String.prototype.trim = function() { 　　return this.replace(/^\s+|\s+$/g, ‘’); 　　}; 　　}

　　现在，如果它存在，它会使用原生版本的修剪方法。

　　

　　

　　本站技术原创栏目文章均为中睿原创或编译，转载请注明：文章来自中睿，本站保留追究责任的权利。