前端开发：javascript中的面向对象

前端开发：面向对象与javascript中的面向对象实现（一）

面向对象理解：

　　面向对象是一种对现实世界理解和抽象的方法，是一种先进的程序设计理念，是一种比较抽象的，多形态的设计模式。我们可以这么理解：“万物皆对象”，我面向了它，即“面向对象”。例如，面前有一台电视机，深入剖析，这个电视机具有哪些特性？

① 它是开着的或者是关着的；

② 它有几个按钮，包括（开关键、音量键、上一个节目、下一个节目）；

③ 有一个机顶盒用来接收数据

　　类的概念

　　现在，我们把电视看成一个对象，它的抽象化就是类，对象的抽象是类，类的具体化就是对象，也可以说类的实例是对象，也就是说，类==对象==实例

　　类的方法

　类有很多个方法，现在我们可以把电视机看成一个类，它现在有哪些方法呢？开关、音量、节目；这是它的方法，就是类的方法；我们不需要去关心按下开关电视经历了什么样的开机过程，我们只需要知道，我按下了开关，它就会开启。

　　私有与公共

　　可以被用户访问到的方法叫做公共方法，而那些只可以被类访问的方法叫做私有方法，没错，就是数据，电视机在接收电视台的信息的时候，我们是不能控制的，它在内部调用了一个方法。哦~我们按下了开关这个方法，然后开关这个方法调用了一个私有的接收信息方法，然后电视就被另一个私有方法（显示在屏幕上）显示出来了。

　　继承

　　现在，我觉得我的电视机屏幕显示效果太烂，行，换个新的。在换上的时候，我们可以说，哦~现在电视机又多了一个显示器，拥有了这个显示器的所有控制按钮与控制接口（开关，音量等等），那我们就可以认为，电视机继承了这一个新的显示器，它继承了这个显示器的方法，它现在就可以调用这个显示器的显示方法，把电视显示在新的显示器上面。

　　一张详解图：

javascript中面向对象实现（1）：

　　在javascript中实现面向对象没有其他oo语言那样简便，因为它并没有直接规定class标识等等，要实现它有很多种方法，博主暂且举一个最常见的栗子，其它的篇幅过长，我们在下一章一一详解：

//创建自定义数据格式

        function DianZan(){

            //构造函数

        }

        DianZan.prototype = {

            //给类添加方法

                dianzan:function(){

                    alert("给博主点一个赞");

                },

                budianzan:function(){

                    alert("狠心拒绝");

                }

            }

        var dianzan = new DianZan();   //创建了一个实例（类）

        dianzan.dianzan(); //调用方法点赞

首先，我们创建了一个构造函数，然后给构造函数的原型添加了两个方法，最后，创建一个dianzan示例（类），然后调用点赞方法

前端开发：面向对象与javascript中的面向对象实现（二）构造函数与原型

1.原型：

　　javascript中没有提供传统的面向对象语言中的类（class）式继承，而是通过原型委托的方式来实现的对象与对象之间的继承，javascript也没有抽象类和接口，它在实现类或者设计模式的时候，原型模式提供了类似的方法。原型是用于创建对象的一种模式，可以理解为：“一个对象继承了另一个对象的属性和方法，那么就可以说被继承的对象是这个对象的原型”，更具体的说，就是，对象a通过某种方法引用对象b的属性，那么可以就可以说b是a的原型；栗子：

/*克隆对象*/

function concat(obj){　　　　

    if(obj instanceof Object){

        if(Object.create!=undefined){　　　

            return Object.create(obj);　　//html5规范中新增Object.create（）方法

        }else{

            var F = function(){

            }

            F.prototype = obj;

            return new F();

        }

    }else{

        return -1;

    }

}

var A = {　　　　　　　　　　　　　　

    "name":"zhangtaifeng",

    "age":"21"

}

var B = concat(A);

/*************对象B的原型是A*************/

B.job = "qianduankaifa";

alert(B.name);

上面的代码中，对象B通过concat方法克隆了一个对象A（）此时对象A是对象B的原型对象，而最后 B.job = "qianduankaifa"; 则是B对象的默认方法；我们分析控制台打印的结果：

html5规范中新增的Object.create（）方法，它将A对象的引用指向了B对象的__proto__属性，__proto__即原型对象在javascript中的表现形式，在firefox控制台中打印可以看到，我们创建的每一个函数都有一个prototype原型属性，而这个对象的用途是包含可以由特定的类型的所有
实例共享的属性和方法

上面这段要理解起来着实不容易，简单的说，javascript中所有的对象都有一个prototype的原型属性，它是用来保存多个对象共享的属性方法的。
来个小例子：我们用来充电的插线板，你把手机通过充电器连接过去，开始充电，那么这个时候，我们如果把手机看成一个对象，这时候可以说插板是手机的充电原型。手机获得了插板的属性----电流；充电器就是他们中间的指针，连接的指针。这时候手机还是可以做其他操作的。
实际上，每个对象默认的原型属性是从Obejct对象克隆继承来的，所以你可以说，对象B的原型是Object；

var A = {

    "name":"zhangtaifeng",

    "age":"21"

}

console.log(A.__proto__===Object.prototype);　　//true

这段代码最后返回了true；说明，javascript所有的对象都默认继承了Object.prototype 所以对象可以调用Object提供的操作方法；

2.构造函数：

　　　构造函数是一个创建对象的方法，通过new fn（）的形式创建，它可以被看作类，但是它并不是类，而是函数构造器，javascript的函数既可以作为普通函数被调用，也可以作构造器被调用。当时用new操作符来调用函数时，这个函数就是一个构造函数，它会默认返回一个新的对象，用new运算符来创建对象的过程，实际上也是克隆Object.prototype对象，再进行一些其他操作的过程。

var Parse = function(){　　　　　　　　

    this.name = "zhangtaifeng";

}

var Parse01 = new Parse();　　　　//到这一步 通过new操作符调用了Parse（） 那么此时的Parse就是一个构造函数

alert(Parse01.name)　　　　　　//zhangtaifeng

构造函数命名首字母需大写，我们打印Parse01查看它的结果：

aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAAK4AAABiCAIAAABGRH92AAAJ3klEQVR4nO2dX0/bShbA87UsIfEF+AqVaB/bh0g85AGpKgVU0miRbquLQKXGLHQrWqK9q4iGGBKk64JaRayVWve2aYtTKLRhU6ggJsRFls4+eDwe/wskJBDC+ckPjhmPTc7P54ydIYTAQt3aMQzDMAy6Yq5DAOl0OiWKuq6bL3VdT4liOp0Oal8DYzs1Ju0CAMDRl8T4bPZ7BWBXGh2IxtwM3+1/+akKsJ8dm8tXaQ/VTy8nsvtsnwc5fnZlZeJlXl2efT47fHeY7E37jH8oN3CqHUyIrp1ThePj41NU+FVIxqID/Q+lXQB9a+lVvmL9ZGd5dJkep/Jdejr+uljKTrz8VAUAo5AYJZ78+paZTBQqAFBWpqeVcjU/Nzz5RzKZTAgP74/Hk8lk8sXv9+byVTB2ln9L/S3zc/mqXkhOrmxXAAD2rT4RHxpXQZbllCiur8u6rh8fH6+vyylRlGW51tHsy79aSIwmCmZYdqXRRMFwttzPjs3ld/5KJpMzoyTKrz98+DPz8QjAMgF+vBeTySTbJj5+f1opw9HHF7O5otnI1SeaEETjKmiatrKykhJFdllbWzs5OQk8Gnv5l94KS19/gduE0tvJzA4c5HgStZ3l+4kCAICx99a6pg9yPJ878O+WUs3P8bkDgB/rU2ZFiA70m2UiFostbKASbhpXAQA0TZNlOZ1Op9NpWZYl6XVtG/wuf2NXemRn7eqnl4/WSmwmPygkJ2OxWCz2+B/DEVOK0tojR57flcZS265uoZqfG3OMHsruJIE4OZcKLnRdr2WDsSs9YkzYz45FIpFIf/S5smfQFhOJQrWi/ntC2no/N54tZCeeJsRnvLT+52RmKRFJFAAq+bmJ7P6uNPrbv6zq0G+tJoSHD80CZBQSj9ZKzNE9aiAumqkCMDZsbm6y209+fn41Pv776Gjqy2Fg/ThQpqdzP/eyT59mN9Z5Ibv3M8c/e18BONlO/ZbaVlPDma8VNTGb3TP2sxOWVeYI4EdWWN42aKVg7klMPGogbpqsAgDouv7lyxfXxq+vU6pmGNrmymRs+G4kErFv6qID/ZFI/8R/94uvJ1c2tzL/XN62bi32/37xOBaLxR6/yH6vAADsrT97VahY4S/9lbTJZLd+bq48zzEX/tHHPzw3ozhSCKT5KlwKJ5VyuaxV3QMGpA46RAXk/KAKCIGocHRc3f7+P68KW9+Kv34FPydAOoiQurWjbu182y0dakdeFSrH1a1vRbMNLp29hAwPKqMCcn0IXbqMuLTJEvLWDBWzwrUEVUAIqAJCQBUQAqqAEFAFhHAZKuSmb3SPLHo3T93mBr2bkQuilSrkpm9093BkYWKPKrQldaiwtLT0nwCKxaKrcW7qNtd9m89ZrxdH7JcBKtRNs/pBDMOoS4V8Pu/rwdraWrVadbZdvMd6YBiGKcfN6ZyBKrQp9RUIrw1+HhjG4giJOguNnLmyOEJqh9WSLRC5qdveyuLYSHfv7sGy0hTqHiuwNvh7YASoQFOFOYaw4rc4SNZtFRZH7OhaXeWmbnOuHIBZoak0Mmw0bQj0wDhbVmC302APLhqmHN3sMrJoyPzNnnuLAR0izaDBO4hisRjogWHUN1Zgr3tLhRtTsrNDVKHltOpm8rQ7CBpsmb9J1h0FgsY4N32P/tQeVUz7ZBfkfLTyuQI7svM8V+DpGJAdKnqHjUyhoYWD1QiHjc2ijR484yOmy6V9VPAbDSAXSDuogHm+LWgHFZC2AFVACKgCQvBXAZdruPir4N2IdDyoAkJAFRACqoAQrpMKYviwl9cv/rgKX+4KW18qpGq9ocOukCZe/HmcQgepoPDlXl4bDJUF1b9BO6jQ1HPQBa4s8FoXpylN6K3TVKgI3IWroGq9Z73K9RqnVz+6wJUFSetFFVxYKgRGpWNVoNXnXLRIBTnct8BnVrm++VDffOjBqvXbb/AP5kN986G+eS6+4W3JxTcgkzYbhJ7Qr4u297I2igPdPQM13/3KYOiwy140kahQEThzix0ShS+TZtblFdQSJI22FEyx6JbQIakC9hbih1UgmFNyt7QOIWldnCZa58OIS/dtYkVw0ToVqAFyuG8+nAEAUONp3vwdlFWuLy25WiqrnB1sey/pCVkx17n4xllUoFTo6EEM22+6GLbioWqD5B3XBe5wUKrVspfGTNV6aagcWaEy6BkWMGMFJiuoTGKnPUiabYCkWTLpAke10AXu8KqpsMBbp2vFDwDAvuhJA7blBv+ARp2uy+E+KyW4s8Xp2NEFV4GQ2GvLvl7NBr4tHTcCbBt3gdCtdEIc8lXBTkVsYnCfVVlQPf1LVy4reFWQw46L/uwq2F3Vh2tw4BtgMWxnctqgYRUUvkzTCW0fqIK3xl8TFZRVztqoxhfOnBVAemJnAqvEnKFAKHzZ9Zb5BZjJvUzO988fktZ1WoGwq4mZaYJVcJQbWlZ8VYDKYKjTCoT0hI4ZV8+cFcBvsHmqCuRJjiP9BgfYORIMLiXsAFMIO8NjBt4+ribUzAoAPgPMABXYX+fKDRs7H8co5CLxryxNAFWoA/vugBneXwRimLlDCbVIQVShLrxPAi4I9z1OC0AVEAKqgBBQBYSAKiCEulUolUq1/pMkcmWpW4VEIvHmzZtrZ4MY5W7NeJ/riEM9N4R3l3A+LaARFTrZBmWG+YLBqP3gAFXwkrC4PBvO8QFVTRThDtd9R6A9i1H7ZYAK9R9j5gZrWDvRuAqXZ0OLVBAHWA8AwJTDNABV8JJwUio19C9dzakrdO6CNc1JjS+EnqzyD+ZD7MQWto1izYyy92LmOJG9Tkcc6uGGnBHxDTaNnBjlbs2Iwh1SO6x92QKh0J8ywXZsFKP219AMtZ0P51Lh8+fPDR7WMWHJ/hia+fAa2IlM4Pio2v1hJp0Xo8YXmMlztTirCjRViFGum0b9nXCLrNsqiFG7Q6srRbjDuXJAR2aFxj0AdkKb9fLBqkqygjVJKZN2xNUxB27BMzHO5DzzXE7PCgrbeEgERgVxyPUFg1ER3gm3PJ+kd54K5/IAPCG0on6ZKtQzVlCEO14VPLcSna5COp0+rwdACoSV2O0k71DhggvEqXcQ9mQZe+KMo0DQGCszA8I7YE0CUIQZETpLheagrHJ9aT6+4Jq56lTBOUhktpPZUMyMatfw81R8VQAgIQ96riBYVYAmAP9hI5M/RPcu74RbnTJsbA7uxH5VudaPmJpDh6jgM7y4urRCBc9fLnj/kKGlKrBlxW+x/yijccQBZ6XoAPBDaoSAKiAEVAEhoAoIAVVACKgCQkAVEAKqgBBQBYSAKiAEVAEhoAoIAVVACKgCQkAVEAKqgBBQBYSAKiAEVAEhoAoIAVVACKgCQkAVEAKqgBBQBYTwfxMWtUgLaINnAAAAAElFTkSuQmCC" alt="" />

与上面的对象是同样的，它其实是创建了一个对象并赋值给了Parse01。

构造函数中可以直接设置他的原型对象属性：

var Parse = function(){

    this.name = "zhangtaifeng";

}

    Parse.prototype = {

        "age":"21"

    }

var Parse01 = new Parse();

alert(Parse01.age)

此时我们再次打印查看结果：

aaarticlea/png;base64,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" alt="" />

我们可以理解为，每个对象都有一个prototype原型属性，而构造函数的作用就是创建一个对象，只是它可以显示的通过Parse.prototype设置prototype的属性此时Parse的原型是Parse.prototype这个对象。

原文链接：https://www.cnblogs.com/ztfjs/p/oob.html