JS高级——面向对象编程初步了解

带你了解面向对象和面向过程的区别

讲面向对象,就离不开讲一讲面向过程。
面向对象和面向过程是现在编程的主要。
一、面向过程简述
面向过程:顾名思义,当你处理一个事情的时候,它会按照过程逐步进行,着重于步骤。
比如求一个循环数的和:

var num = 0;
for(var i = 0;i < 5;i++){
    sum += i;
}

这样解决问题的代码简洁明了,关注的是解决问题的步骤即可,但是如果仅限于求和要求面向过程就足够了,因为逻辑简单,不需要太过复杂的逻辑架构去帮你理清解题思路。
这是一个简单的面向过程的例子,如果要再执行一个循环六次的求和。就会如下代码:

var num = 0;
for(var i = 0;i < 5;i++){
    sum += i;
}
for(var  i =0;i < 6;i++){
    sum += i;
}

那如果还要继续执行呢?碰到了结构复杂的程序,这个时候就发现重复的代码过多,造成代码冗余,而且如果写多了,不利于思路条例。
二、面向对象简述
1.面向对象:面向对象的着重点在于对象,先创建一个对象然后借助对象的值属性和方法来存储数据以及解决问题。
如同样求一个循环数的和的代码:

function  CreateAddtion (num){
    this.sum = 0; //求和最终结果
    this.count = num; //循环次数
    this.addtion = function (){
        for(var i = 0;i < this.count;i++){
              this.sum += i;
        }
        return this.sum;
    }
}
var add1 =new CreateAddtion(5);//5次和
var add2 = new  CreateAddtion(6);//6次和
console.log(add1.addtion());
console.log(add2.addtion());

面向对象的特征就在于,值和解决方案都交给对象存储和处理,要想调用对象里的方法,必须先声明对象。当然在这个例子里,并不能突出面向对象的好处。
下面举个例子,最经常被拿来当教案的鸭子的故事为背景。

要求:模拟一个游戏,会出现多只鸭子,并且鸭子会游泳会叫。鸭子分红头和绿头鸭子。

面向过程:

//一下都是伪代码,
//假设要2只鸭子
var yazi = function(){
      CreateYaZi();//创建鸭子
      Swin();  //游泳
      guagua() //呱呱叫
      red();  //在此处写red();或者green()来修改红头鸭子和绿头鸭子
      
}
//因为是两只,以上代码执行for循环或者写两遍。

面向对象:

//以下是伪代码
function CreateYaZi (color){
       this.color  = color; //红头鸭子绿头鸭子
       this.Swin = function (){
              //游泳
        }
        this.Guagua = function (){
              //叫
        }
}
var yazi1 = new CreateYaZi(red);
var yazi2 = new CreateYaZi(green);

在这个例子里,区别最大的在于红绿头鸭子,如果用面向过程,每创建一个鸭子都需要程序员手动修改,但是如果用对象,直接根据传递的形参来给鸭子头颜色赋值,减少了代码量,并且清晰了逻辑,如果还觉得这样区别不大,可以增加要求,比如鸭子分为橡皮鸭,红绿头鸭子,这两种鸭子叫声不一样,橡皮鸭吱吱吱叫,红绿头鸭子嘎嘎嘎叫,
这个时候程序员如果用面向过程的思想,就会去创建叫法不同的方法,分别给创建的鸭子赋值,而面向对象,只需要更改对象的属性,根据属性执行相应的函数即可。
由此可见的,在大量的逻辑思维和需要后期维护大量需求的背景下,使用面向对象是大大方便了程序员理清思路,并且减轻代码量的。
当然我个人觉得我举这个例子也不大好,如果没怎么理解,可以参考其他博客。
四、JS是基于对象的语言
1.什么样的编程是面向对象的编程?
(1)面向对象编程基于使用面向对象语言编程。
(2)具备的概念:类、对象。
(3)具备的特征:封装、多态、继承
(4)在创建对象时必须通过类创建。
批注:类是具有相同属性和方法的集合,对象是类的实例化。

批注:封装是把具体实现功能的代码封装成一个块(方法),需要使用时调用方法即可。

批注:继承是类和类之间一旦声明了继承关系,比如A继承B也就是说A是B创建的子类。A子B父。子类必须继承父类的所有方法,并且可以选择重写父类的方法。

批注:多态是多个对象根据同一个类创建,同一个属性值可能不同,同一个方法执行的结果也可能不同。

2.JS可以用面向对象编程吗?
可以,但是并不完整。
(1)JS是基于对象的语言,它又具有面向过程语言的特点,又具有面向对象编程语言的特点,但是双方都不完善。
(2)JS没有类和借口的概念,无法进行真正意义上通过类创建对象。
(3)JS可以用函数块模拟面向对象过程的通过类创建对象,也就是说通过new类函数,来创建对象,类函数中有相应的属性赋值和方法执行。

教你如何用JS创建对象

JS没有类和接口的概念,只有方法,如果想用JS实现面向对象编程,可以用方法模拟创建类的过程。

方法1:直接声明创建实例

var Yazi ={
    name : '鸭子',
    color : '红头',
    swin : function(){//我会游泳},
    guaGua : function(){//我会呱呱叫},
};
console.log(Yazi.name);
console.log(Yazi.color);
Yazi.swin();
Yazi.guaGua();

方法2:调用工厂函数创建实例

function createYaZi (color){
                //创建一个对象
                var yazi = new Object();
                //或
                //var yazi = {};
                yazi.name = '鸭子';
                yazi.color = color;
                yazi.swin = function  () {
                    //我会游泳
                }
                yazi.guaGua = function  () {
                    //我会呱呱叫
                }
                return yazi;
}
var yazi1 =createYaZi('red');
console.log(yazi1);
console.log(yazi1 instanceof Object);
var yazi2 = createYaZi('green');
console.log(yazi2);
console.log(yazi1);

结果:


QQ20170823-195650@2x.png

或者

image.png

方法3:构造函数(函数名的首字母大写)

function CreateYaZi (color){            
                this.name = '鸭子';
                this.color = color;
                this.swin = function  () {
                    //我会游泳
                }
                this.guaGua = function  () {
                    //我会呱呱叫
                }
}
var yazi1 =new CreateYaZi('red');
console.log(yazi1);
console.log(yazi1 instanceof Object);
var yazi2 =new CreateYaZi('green');
console.log(yazi2);
console.log(yazi1);

结果:

image.png

方法4:通过原型创建方法(包含动态创建原型)
优点:可以把共有的数据和方法统一存到 原型中,达到节约内存的目的。

            function CreateYaZi (color){            
                CreateYaZi.prototype.name = '鸭子'; //共有的数据
                this.color = color;
                this.swin = function  () {
                    //我会游泳
                }
                                //这里是动态原型创建,如过原型中的方法和属性已经存在,就不会再对        
                                //其进行添加
                if (typeof(CreateYaZi.guaGua) != 'function') {
                    CreateYaZi.prototype.guaGua=function  () {
                        //我会呱呱叫
                    }
                }
}
var yazi1 =new CreateYaZi('red');
console.log(yazi1);
console.log(yazi1 instanceof Object);
var yazi2 =new CreateYaZi('green');
console.log(yazi2);
console.log(yazi1);

结果:

image.png

放在原型中的共有数据和方法都在实例化的对象的proto里,这个属性最好不要修改。

JS访问对象属性

访问:
(1)对象名.属性名 例如:yazi.name
(2)对象名[‘属性名’] 例如 :yazi['name'] //这个方法不要有空格,否则可能影响检索属性的精准。

删除:
delete yazi.name;

循环遍历访问对象
(1)for..in(遍历下标)

for (var item in yazi) {
    if ((typeof yazi[item]) != 'function') {
                      //判断鸭子获取到的是否是方法,不是的话执行输出属性值。
            console.log(yazi[item]);
    }
}

(2)for..of(遍历数据)

for (var item of yazi) {
    if ((typeof yazi[item]) != 'function') {
                      //判断鸭子获取到的是否是方法,不是的话执行输出属性值。
            console.log(yazi[item]);
    }
}

失败的原因是因为对象只能通过下标和属性名拿值。

删除

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 215,874评论 6 498
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 92,102评论 3 391
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 161,676评论 0 351
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 57,911评论 1 290
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 66,937评论 6 388
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 50,935评论 1 295
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,860评论 3 416
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 38,660评论 0 271
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 45,113评论 1 308
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,363评论 2 331
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,506评论 1 346
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,238评论 5 341
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,861评论 3 325
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,486评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,674评论 1 268
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 47,513评论 2 368
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,426评论 2 352

推荐阅读更多精彩内容