前端开发: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查看它的结果:

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

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

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

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

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

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

posted @ 2019-08-27 19:19  ℳℓ马温柔  阅读(829)  评论(0编辑  收藏  举报