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

一时失言乱红尘 2023-06-01 12:52 57阅读 0赞

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

## 面向对象理解： ##

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

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

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

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

**类的概念**

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

**类的方法**

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

**私有与公共**

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

**继承**

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

一张详解图：

![893115-20160825231426460-1130561197.png][]

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

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

![复制代码][copycode.gif]

//创建自定义数据格式
            
            function DianZan(){
                //构造函数
            }
            DianZan.prototype = {
                //给类添加方法
                    dianzan:function(){
                        alert("给博主点一个赞");
                    },
                    budianzan:function(){
                        alert("狠心拒绝");
                    }
                }
            
            var dianzan = new DianZan();   //创建了一个实例（类）
            
            dianzan.dianzan(); //调用方法点赞

![复制代码][copycode.gif]

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

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

## 1.原型： ##

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

![复制代码][copycode.gif]

/*克隆对象*/
    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);

![复制代码][copycode.gif]

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

![893115-20160923171158356-23733773.png][]

html5规范中新增的Object.create（）方法，它将A对象的引用指向了B对象的__proto__属性，__proto__即原型对象在javascript中的表现形式，在firefox控制台中打印可以看到，我们创建的每一个函数都有一个prototype原型属性，而这个对象的用途是包含可以由特定的类型的所有
    实例共享的属性和方法
    
    上面这段要理解起来着实不容易，简单的说，javascript中所有的对象都有一个prototype的原型属性，它是用来保存多个对象共享的属性方法的。
    来个小例子：我们用来充电的插线板，你把手机通过充电器连接过去，开始充电，那么这个时候，我们如果把手机看成一个对象，这时候可以说插板是手机的充电原型。手机获得了插板的属性----电流；充电器就是他们中间的指针，连接的指针。这时候手机还是可以做其他操作的。
    实际上，每个对象默认的原型属性是从Obejct对象克隆继承来的，所以你可以说，对象B的原型是Object；

![复制代码][copycode.gif]

var A = {
        "name":"zhangtaifeng",
        "age":"21"
    }
    
    console.log(A.__proto__===Object.prototype);　　//true

![复制代码][copycode.gif]

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

## 2.构造函数： ##

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

![复制代码][copycode.gif]

var Parse = function(){　　　　　　　　
        this.name = "zhangtaifeng";    
    }
    
    var Parse01 = new Parse();　　　　//到这一步 通过new操作符调用了Parse（） 那么此时的Parse就是一个构造函数 
    alert(Parse01.name)　　　　　　//zhangtaifeng

![复制代码][copycode.gif]

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

![Image 1][]

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

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

![复制代码][copycode.gif]

var Parse = function(){
        this.name = "zhangtaifeng";    
    }
        Parse.prototype = {
            "age":"21"
        }
    var Parse01 = new Parse();
    alert(Parse01.age)

![复制代码][copycode.gif]

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

![Image 1][]

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

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

转载于:https://www.cnblogs.com/angel648/p/11426582.html

[893115-20160825231426460-1130561197.png]: /images/20230601/09e0e233dc7545ee8d4b4778c5cb8dc2.png
[copycode.gif]: /images/20230601/7d822016a02242b48aff982d80d44e08.png
[893115-20160923171158356-23733773.png]: /images/20230601/52a07caf180b4dd59a66b815d87e3b18.png
[Image 1]: