前端面向对象的编程

本文探讨了JavaScript中的对象和面向对象编程概念,强调封装、继承和多态的基本特性。作者通过代码示例展示了在JavaScript中如何实现面向对象,并提到在ES6中class的使用。此外,结合React组件,阐述了在前端开发中面向对象编程的应用,特别是在组件数据获取和设置上的规约,以提高代码组织和管理效率。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

问:Javascript有对象么?
答:有。
问:你怎么理解面向对象的编程?
答:那我用code来说明下

function Foo(who) {
     this.me = who;
}
Foo.prototype.identify = function() {
     return "I am " + this.me;
};
function Bar(who) {
     Foo.call( this, who );
}
Bar.prototype = Object.create( Foo.prototype );
Bar.prototype.speak = function() {
     alert( "Hello, " + this.identify() + "." );
};
var b1 = new Bar( "b1" );
var b2 = new Bar( "b2" );
b1.speak();
b2.speak();

或者下面的方式
----------
Foo = {
init: function(who) {
     this.me = who;
},
identify: function() {
     return "I am " + this.me;
}
};
Bar = Object.create( Foo );
Bar.speak = function() {
     alert( "Hello, " + this.identify() + "." );
};
var b1 = Object.create( Bar );
b1.init( "b1" );
var b2 = Object.create( Bar );
b2.init( "b2" );
b1.speak();
b2.speak();

//如果不支持object.create,使用下面的方法
if (!Object.create) {
     Object.create = function(o) {
     function F(){}
     F.prototype = o;
     return new F();
     };
}

问:这就是面向对象了?
答:是的,js中对象就是函数,可以这么写。

反正我之前就是这么回答的,虽然可以看到和Java面向对象的风格还差一点。


面向对象的编程有三个最基本的特性:封装、继承、多态。
在上面的例子中,有封装、有继承、多态的话,可以使用duckType。
但是总是差点意思不是么?
知识复习:ES6的class方法Es6-class
下面结合React中的组件,来说明面向对象的编程。


需求:在前端组件中,我们经常需要获取/设置界面的输入参数,我们想每一个组件都可以通过 组件.getData / 组件.setData来 进行操作


class DataSource extends React.Component{
    constructor(){
     super();
     if(new.target.getData===undefined&&new.target.setData===undefined){
                throw new Error('必须定义getData或者setData方法');
        }
    }
    getData(){}
    setData(){}
}

class InputForm extends DataSource{
    getData(){
        //返回这个组件的状态
    }
    setData(){
        //设置这个组件的状态
    }
}

其实,面向对象在前端是一种强力规约,规定你的操作必须符合特定的程式。方便程序管理。


评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值