JS---OOP

Posted 2020-11-12 有挫败才有成长

面向过程就是亲力亲为，事无巨细，面面俱到，步步紧跟，有条不紊。

面向对象就是找一对象，指挥得结果。

面向对象将执行者变成指挥者

面向对象不是面向过程的替代，而面向过程的封装。

js是基于对象的多范式的编程语言，这里的范式指编程的方式可以是面向过程的，函数式编程或面向对象的编程。

Js中的对象就是键值对的集合

抽象性：如果需要采用对象描述一个数据，需要抽取这个对象的核心数据。不在特定条件下，不知道是什么

封装性：

我们的对象是将数据和功能组合到一起即封装。属性就是数据，方法就是功能。

方法是将过程封装起来

 

继承性：

自己没有，但是别人有，拿过来成为自己的。

继承是实现复用的一种手段。

js没有明确的继承语法，一般都是按照继承理念实现对象的成员的扩充继承

js中实现继承的方法非常多。其中一个最简单的方法叫混入（mix）

 Function mix(o1,o2){

for (var k in o2){

o1[k]=o2[k]

}

}

Var o1={name:’zs’}

Var o2={age:12}

mix(o1,o2); 就是将o2的成员一一加到o1中，使得

 

面向对象的编程就是使用对象进行编程。

1、首先找对象

2、任何操作应该交给对象来完成

 

面向对象的方式去思考：

1、抽取对象（名词提炼法）

2、分析属性和方法（动词提炼）

//        创建一个div的构造函数 
        function DivTag() {
            //属性 
            this.dom = document.createElement(‘div‘);
            //方法:当前对象添加到指定的元素node中
            this.appendTo = function(node) {
                node.appendChild(this.dom);
                return this;
            }
            
            //设置样式方法一：
            this.setMyStyle = function(name, value) {
                this.dom.style[name] = value;
                return this;
            }
            //设置样式方法二：
            this.mycss = function(option) {
                for(var k in option) {
                    this.dom.style[k] = option[k];
                }
            }

        }
        //使用方法一的设置样式
        //        var div=new DivTag();//内部应该创建 dom对象
        //        div.appendTo(document.body);
        //        div.setMyStyle(‘width‘,‘400px‘);
        //        div.setMyStyle(‘height‘,‘200px‘);
        //        div.setMyStyle(‘border‘,‘1px solid red‘);
        // 使用方法二设置样式,如果方法的返回值是当前对象的话，可以继续调用该对象的其他方法，称为链式调用。
        new DivTag().appendTo(document.body).mycss({
            ‘width‘: ‘400px‘,
            ‘height‘: ‘200px‘,
            ‘border‘: ‘1px dotted red‘
        });

function Person (name,age) {
                this.name=name;
                this.age=age;
                this.hello=function  () {
                    console.log(‘I am ‘+this.name+‘,‘+this.age+‘ years old.‘);
                }
                
            }
            var p1=new Person(‘mike‘,18);
            p1.hello();
            p1.age=p1.age+1;
            p1.hello();