3

可能重复：
Javascript - 这与。使用原型
与直接在构造函数中定义方法的优点？
原型或内联，有什么区别？

在 JavaScript 中创建类时，如何使用this声明对象内部的方法，然后通过访问原型来声明它？在我看来，这也是为了同样的目的。

window.onload = function() { 
    tc = new TestClass();
    tc.init(); //logs initting
    tc.reset(); //logs resetting
    tc.doSomething(); //logs doing something
};


var TestClass = function(){

    this.init = function(){
        console.log("initting");
    }

    this.reset = function(){
        console.log("resetting");
    }

    this.destroy = function(){
        console.log("destroying");
    }

}

TestClass.prototype.doSomething = function(){

    console.log("doing something");
}
4

3 回答 3

3

在大多数情况下，您将获得相同的功能结果。但在内部，它完全不同，当您将函数附加到 时this，该类型的每个实例都会获得它自己的函数副本。通过将函数附加到prototype，所有实例共享相同的函数实例。使用原型可以减少内存使用。

于 2012-08-03T20:36:35.170 回答
2

阅读之前：英语不是我的母语；）

实际上this和prototype几乎相同，但是this和prototype在javascript中具有不同的含义。

1) Javascript 基于原型继承。这意味着一个对象可以从另一个对象继承原型模型。使用原型，您可以模拟 javacript 上的继承（有限制），例如：

// create a 'class' Vehicle
var Vehicle = function() {};
Vehicle.prototype.wheels = 0;
Vehicle.prototype.maxSpeed = 0;
Vehicle.prototype.displayInfo = function() { 
     alert("hello, I have " + this.wheels + " wheels and max speed of " + this.maxSpeed);
};

var vehicleInstance = new Vehicle();
vehicleInstance.displayInfo(); // displays: Hello, I have 0 wheels and max speed of 0

// create a 'class' Car using the prototype from Vehicle 
// and change some properties.
var Car = function(maxSpeed) { 
    if(maxSpeed)
      this.maxSpeed = maxSpeed;
};
// inherit the prototype from vehicle
Car.prototype = new Vehicle();  
// change some properties
Car.prototype.maxSpeed = 200;
Car.prototype.wheels = 4;

var car = new Car();
car.displayInfo(); // displays: Hello, I have 4 wheels and max speed of 200

2) this中的属性优先于原型中的属性，例如：

var car = new Car(); // car prototype: maxSpeed = 200;
car.displayInfo() // displays: Hello, I have 4 wheels and max speed of 200

//set maxSpeed to 300 on 'this'
var car = new Car(300); // see Car definition above

// call displayInfo() in car instance. The Car 'class' doesn't have displayInfo()
// itself, but its prototype has. The javascript VM will look
// for displayInfo() in the car instance, if it not found in the
// instance it will look in car.prototype and on car.prototype.prototype etc.
// until it founds a property called displayInfo() 
// or reaches the end of the chain (Object.prototype).
car.displayInfo() // displays: Hello, I have 4 wheels and max speed of 300

例如，这也适用于原型的原型。

var Class1 = function() { };
Class1.prototype.someValue = 1;

var Class2 = function() { };
Class2.prototype = new Class1();
Class2.prototype.someValue = 2; // this overrides the Class1.prototype.someValue prototype

var class2 = new Class2();
class2.someValue = 3; // this overrides the Class2.prototype.someValue;

3）原型上定义的属性不会为同一对象的每个新实例实例化，例如：

// create a new class and inherit the prototype model from Vehicle.
var Motorcycle = function() { };
Motorcycle.prototype = new Vehicle();
// motorcycles has 2 wheels
Motorcycle.prototype.wheels = 2;

var motorcycle = new Motorcycle();
motorcycle.dysplayInfo(); // displays: Hello, I have 2 wheels and max speed of 200

//now, if I change the method dysplayInfo from Vehicle, it will change for every
//object that inherits Vehicle prototype:
Vehicle.prototype.displayInfo = function() { 
    Alert("Wheels: " + this.wheels + ", Max speed: " + this.maxSpeed);
}

//observe that I didn't create another Motorcycle instance ,
//I'm using the same instance that I've created before change
//the Vehicle.dysplayInfo() method
motorcycle.displayInfo() // displays: Wheels: 2, Max speed: 200

如您所见，任何继承其原型的对象都使用在 Vehicle 中使用的相同方法。这使您的代码更加高效，因为您对多个对象使用相同的函数。您可以从胖原型继承数千个对象，但内存占用仍然很低。

简而言之：通过使用原型，您可以创建强大的“类类”对象，具有定义明确的继承树（我们说原型链），它将更有效地运行并使用更少的内存。

我在这里所说的并没有穷尽原型继承/链的主题。以下是您可以阅读的其他资源。我推荐，因为理解 javascript 中的原型对于编写良好且可维护的代码至关重要。

我在这里所说的并没有穷尽原型的主题： https ://developer.mozilla.org/en-US/docs/JavaScript/Introduction_to_Object-Oriented_JavaScript?redirectlocale=en-US&redirectslug=Introduction_to_Object-Oriented_JavaScript

http://javascript.crockford.com/prototypal.html

http://javascriptweblog.wordpress.com/2010/06/07/understanding-javascript-prototypes/

于 2012-08-03T21:26:03.517 回答
1

在这种特殊情况下，它们具有相同的效果，但它们非常不同。一个（？）主要区别是附加使用this的方法是对象本身的属性而不是其原型的属性，因此像这样迭代对象：

for(var x in tc) {
    if(tc.hasOwnProperty(x)) {
        console.log('Has property ' + x);
    }
}

将省略使用添加的方法prototype。另一个区别是引用。将方法分配给this每次都会创建新的函数对象，但是使用原型，它们都是相同的函数。（这可能是也可能不是您想要的，并且在将额外属性附加到方法时最重要。）

于 2012-08-03T20:37:21.823 回答