在 JavaScript 中,prototype 是函数的一个属性,同时也是由构造函数创建的对象的一个属性。 函数的原型为对象。 它主要在函数用作构造函数时使用。
function Vehicle(wheels, engine) { this.wheels = wheels; this.engine = engine; }
在上面的示例中,Vehicle 函数的原型是使用 Vehicle 构造函数实例化的任何对象的原型。
可以使用 prototype 属性向对象添加属性和方法,甚至于已创建的对象也是如此:
var testVehicle = new Vehicle(2, false); Vehicle.prototype.color = "red"; var testColor = testVehicle.color;
testColor 的值为“red”。
你甚至可以向预定义的对象添加属性和方法。 例如,你可以在 String 原型对象上定义一个 Trim 方法,脚本中的所有字符串都将继承该方法。
String.prototype.trim = function() { // Replace leading and trailing spaces with the empty string return this.replace(/(^\s*)|(\s*$)/g, ""); } var s = " leading and trailing spaces "; // Displays " leading and trailing spaces (35)" window.alert(s + " (" + s.length + ")"); // Remove the leading and trailing spaces s = s.trim(); // Displays "leading and trailing spaces (27)" window.alert(s + " (" + s.length + ")");
使用原型通过 Object.create 从一个对象派生另一个对象
prototype 对象可用于从一个对象派生另一个对象。 例如,你可以使用 Object.create 函数派生使用我们之前定义的 Vehicle 对象的原型(以及所需的任何新属性)的新对象Bicycle。
var Bicycle = Object.create(Object.getPrototypeOf(Vehicle), { "pedals" :{value: true} });
Bicycle 对象具有属性 wheels、engine、color 和 pedals,并且其原型为 Vehicle.prototype。 JavaScript 引擎会查找 Bicycle 的 pedals 属性,并查看原型链以便查找Vehicle 的 wheels、engine 和 color。
更改对象的原型
在 Internet Explorer 11 中,可以通过 __proto 属性用新原型替换对象或函数的内部原型。 使用此属性时,将继承新原型的属性和方法以及其原型链中的其他属性和方法。
以下示例演示如何更改对象的原型。 此示例演示当更改对象原型时,对象的继承属性将如何更改。
function Friend() { this.demeanor = "happy"; } function Foe() { this.demeanor = "suspicious"; } var friend = new Friend(); var foe = new Foe(); var player = new Object(); player.__proto__ = foe; friend.ally = "Tom"; if (console && console.log) { console.log(player.demeanor === "happy" ); // Returns false console.log(player.demeanor === "suspicious"); // Returns true console.log(player.ally === "Tom"); // Returns false // Turn the foe to a friend. player.__proto__ = friend; console.log(player.demeanor === "happy"); // Returns true console.log(player.demeanor === "suspicious"); // Returns false console.log(player.ally === "Tom"); // Returns true }
上面是摘自http://msdn.microsoft.com/zh-cn/library/hh924508(v=vs.94).aspx上的原文。
下面是我从慕客网上看到的一个问题,仔细分析之后感觉挺有意思,于是记下录来。
仔细分析 Man.prototype = new People 与 Man.prototype = People.prototype 这两种继承的区别
function People (){ this.name = ‘frog‘; this.age = 29; } People.prototype.getName = function(){ return this.name; } function Man(){ this.name = ‘rat‘; this.age = 3; } Man.prototype = new People; //某一天,新来的小伙伴修改了这个方法 Man.prototype.getName = function(){ return this.age; } var p = new People; var n = p.getName(); console.log(n); // 输出29而不是 frog //说明直接用原开链,父类会被子类影响
类似的问题还有为什么要使用中间对象
f = function(){}; f.prototype = People.prototype; Man.prototyep = new f();
为什么要引入一个f对象的实例?简单说,就是为了断开与People原型链的引用,并且只继承People原型上的方法,而不继承它的属性。