仍然与js Prototype混淆
Still confused with js Prototype
我对原型的实际功能感到困惑。我现在正在学习HTML画布,对于其中一个示例,它使用原型来声明draw方法。但是,使用原型和简单地将其放入构造函数本身有什么区别呢?
这不是书中的例子吗:
function Ball (radius, color) {
if (radius === undefined) { radius = 40; }
if (color === undefined) { color = "#ff0000"; }
this.x = 0;
this.y = 0;
this.radius = radius;
this.rotation = 0;
this.scaleX = 1;
this.scaleY = 1;
this.color = utils.parseColor(color);
this.lineWidth = 1;
}
Ball.prototype.draw = function (context) {
context.save();
context.translate(this.x, this.y);
context.rotate(this.rotation);
context.scale(this.scaleX, this.scaleY);
context.lineWidth = this.lineWidth;
context.fillStyle = this.color;
context.beginPath();
//x, y, radius, start_angle, end_angle, anti-clockwise
context.arc(0, 0, this.radius, 0, (Math.PI * 2), true);
context.closePath();
context.fill();
if (this.lineWidth > 0) {
context.stroke();
}
context.restore();
};
与放入此相同?:
function Ball(radius, color){
...
this.draw = function (context) {
context.save();
context.translate(this.x, this.y);
context.rotate(this.rotation);
context.scale(this.scaleX, this.scaleY);
context.lineWidth = this.lineWidth;
context.fillStyle = this.color;
context.beginPath();
//x, y, radius, start_angle, end_angle, anti-clockwise
context.arc(0, 0, this.radius, 0, (Math.PI * 2), true);
context.closePath();
context.fill();
if (this.lineWidth > 0) {
context.stroke();
}
context.restore();
};
}
prototype
是一个由所有其他对象共享的对象,这些对象将其作为prototype
,这导致动态添加到prototype
的方法可以由所有实例共享。
function ClassA(){
this.sayHello = function(){
return "hello!";
}
}
var instanceA = new ClassA();
instanceA.sayHello();//return "hello!";
//add a method to instanceA
instanceA.sayBye = function(){ return "Bye!"; }
var instanceB = new ClassA();
instanceB.sayBye(); //error, sayBye is not a method of instanceB.
//But, this really works
ClassA.prototype.sayBye = function(){ return "Bye!"; }
而且,由于所有实例共享一个prototype
,因此所有方法都只停留在内存中的一个位置。在第二个实现中,每个实例都有自己的方法,这会导致使用大量内存。
将方法排除在类的定义之外可以使代码更加干净和可读,尽管这并不是有力的证据。
有了原型,开发人员更容易用OOP风格编写代码。
function ClassB(){
}
ClassB.prototype = new ClassA();
// The equivalent approach may be this
function ClassB(){
ClassA.apply(this);
}
这两种方法都可以做同样的工作,所以选择你喜欢的任何一种。
没有太大区别。主要区别在于,通过原型创建的方法不能访问对象的私有成员。
function Ball (radius, color) {
if (radius === undefined) { radius = 40; }
if (color === undefined) { color = "#ff0000"; }
this.x = 0;
this.y = 0;
this.radius = radius;
this.rotation = 0;
this.scaleX = 1;
this.scaleY = 1;
this.color = utils.parseColor(color);
this.lineWidth = 1;
var privateVar = 0;
function privateFunction() {
// anything
}
}
Ball.prototype.draw = function() {
privateFunction(); // doesn't work.
privateVar = 2; // doesn't work
this.lineWidth = 2; // this will work.
};
相关文章:
- 直接在函数声明上使用function.prototype.bind
- 如何迭代Array.prototype函数
- 将错误与if语句混淆
- Object.prototype using 'this'
- jquery自定义事件混淆
- JavaScript加入多个数组混淆
- 在不兼容的接收器上调用的方法Set.prototype.add未定义
- 如何告诉闭包javascript编译器不要混淆webkitAudioContext的方法名称
- 为什么可以't我用Set对象调用Array.prototype.map
- ExtJS 4 Object.prototype fail
- 如何通过Prototype或jquery移除子类的父类基类
- 复选框:使用Array.prototype.forEach调用推送选中订单,
- 将setTimeout()包装器实现为Element.prototype中的方法
- Object.prototype.hasOwnProperty.call() vs Object.prototype.h
- Javascript一行,否则速记混淆
- html报价与php混淆
- 混淆变量名称的小型化器
- 仍然与js Prototype混淆
- 与js中的__proto_和prototype混淆
- Prototype和__proto__混淆的结果