前端面向对象的编程

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/Donspeng/article/details/81155367

问：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(){
        //设置这个组件的状态
    }
}

---

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

---