JS---OOP

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

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

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

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

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();

 

 

原文地址:https://www.cnblogs.com/beast-king/p/9152766.html