JavaScript面向对象编程的几种常见实现方式解析
作者:小括号时间:2026-10-30 12:43:29浏览:535
本文归纳了JavaScript中实现面向对象的几种常见写法,包括工厂方式、构造函数模式以及对象字面量模式。文章详细对比了各方式在属性定义、方法绑定及this指向处理上的差异,并提供了相应的代码示例与注意事项,帮助开发者根据实际需求选择合适的对象创建方案。
JavaScript面向对象实现概述
文章首先通过定义一个包含成员变量r、常量PI以及计算面积成员函数area()的Circle类作为引入,展示面向对象的基本概念。
工厂模式与构造函数写法
第一种实现方式被称为工厂方式。
var Circle = function() {
var obj = new Object();
obj.PI = 3.14159;
obj.area = function( r ) {
return this.PI * r * r;
}
return obj;
}
var c = new Circle();
alert( c.area( 1.0 ) );
第二种方式被视为较为规范的写法,通常涉及原型的正确使用。
function Circle(r) {
this.r = r;
}
Circle.PI = 3.14159;
Circle.prototype.area = function() {
return Circle.PI * this.r * this.r;
}
var c = new Circle(1.0);
alert(c.area());
对象字面量与扩展应用
第三种方式采用对象字面量的形式进行定义。
var Circle={
"PI":3.14159,
"area":function(r){
return this.PI * r * r;
}
};
alert( Circle.area(1.0) );
第四种方式在形式上有所变化,但其本质与第一种工厂方式相似。
var Circle=function(r){
this.r=r;
}
Circle.PI = 3.14159;
Circle.prototype={
area:function(){
return this.r*this.r*Circle.PI;
}
}
var obj=new Circle(1.0);
alert(obj.area())
在实现过程中,常量PI可以定义为Circle.PI = 3.14159,也可以放入属性中写成this.PI=3.14159;。
在实际开发中,第一种和第三种写法较为常用。
第三种写法还可以进行扩展,下面提供一个相关的实例。
var show={
btn:$('.div1'),
init:function(){
var that=this;
alert(this);
this.btn.click(function(){
that.change();
alert(this);
})
},
change:function(){
this.btn.css({'background':'green'});
}
}
show.init();
在扩展实例中,需要特别注意this关键字的指向问题,特别是在回调函数中。
以上关于JavaScript面向对象几种常见写法的总结内容,旨在为读者提供参考,欢迎进一步探讨与支持。
作者最新文章
JS语法错误会阻止加载吗?区分SyntaxError与资源加载失败
2026-11-05 16:08:46
JavaScript常见SyntaxError语法错误排查与修复方法
2026-11-05 13:58:44
JS中slice、substring和substr截取字符串的区别
2026-11-05 13:43:47
JS 转 TS 手动迁移最佳实践:从配置 tsconfig 到消除 any 类型
2026-11-05 11:53:32
为什么JS数组push后得到的是数字而不是数组?
2026-11-05 09:59:18
