javascript面向对象编程（基础知识点）

最新推荐文章于 2024-10-16 17:24:41 发布

BeArchitect

最新推荐文章于 2024-10-16 17:24:41 发布

阅读量1.1k

点赞数

分类专栏： js开发

本文链接：https://blog.csdn.net/s8460049/article/details/52816786

版权

js开发专栏收录该内容

28 篇文章 1 订阅

订阅专栏

1.为何要面向对象

毫无疑问，web程序在我们日常生活中越来越复杂，越来越多，我们越来越希望能够像在桌面上使用桌面应用一样的使用浏览器中的应用程序，那么事情肯定会变得很有趣。如今我们已经可以在浏览器中使用电子邮件，购物，游戏，等等强大的功能，这些都要感谢一门语言，就是javascript，所以为了能够更好的使用这门语言，我们应该了解他的特性，利用他的面向对象特性，实现代码的重用，构建可伸缩的代码架构。

2.什么是对象

既然这种程序设计风格叫面向对象，那到底什么是对象，总的来说，万物皆对象，在js中，对象就是键值对的集合，对象的行为就是方法，对这个对象的一些形容就是对象的属性，而我们面向对象编程就是要把遇到的问题，抽象成用对象来描述，以此来解决问题，所以面向对象是一种解决问题的方式，一种编程思想，这是一个需要长久积累才能形成的思维，需要大量练习。

在我们生活中，事物也就是对象往往都有一些共同的组成特征，拥有相同特征的对象，我们往往会把他们归于一种种类，这个就叫做类，在编程中的应用就是，我们都是基于一个类来创建对象，类可以看作是一种模板，而对象是基于这些模板上被创建出来的实体。

但是我们要明白，js与java，c++这些传统面向对象语言不一样，因为他实际上没有类class的概念，该语音一切都是基于对象的，依靠的是一套原型系统。而原型本身也是对象，下面我们会说这个问题。

2.1构造函数

强类型语言中，类具有构造方法，也就是构造函数，在js中，对象具有构造函数，构造函数就是用来初始化对象的方法，可以为对象新增属性，初始化属性等等

3.面对对象编程举例

例子中代码，转载引用来自传智播客前端培训班。

需求，设置页面中div和p元素的边框class

// 传统方式，任务需求:
// 1> 获取div标签
var divs = document.getElementsByTagName( 'div' );
// 2> 遍历获取到的div标签
for(var i = 0; i < divs.length; i++) {
    //3> 获取到每一个div元素,设置div的样式
    divs[i].style.border = "1px dotted black";
}

// 4> 获取p标签
var ps = document.getElementsByTagName("p");
// 5> 遍历获取到的p标签
for(var j = 0; j < ps.length; j++) { 
    // 获取到每一个div元素 设置p标签的样式
    ps[j].style.border = "1px dotted black"; 
}

// 使用函数优化，通过标签名字来获取页面中的元素 
function tag(tagName) { 
    // var dvs = document.getElementsByTagName(tagName); 
    // return dvs; 
    return document.getElementsByTagName(tagName); 
}

// 封装一个设置样式的函数 
function setStyle(arr) { 
    for(var i = 0; i < arr.length; i++) { 
        // 获取到每一个div元素 
        arr[i].style.border = "1px solid #abc"; 
    } 
}
var dvs = tag("div");
var ps = tag("p");
setStyle(dvs); 
setStyle(ps);

// 面向对象，更好的做法：是将功能相近的代码放到一起 
var itcast = { 
    getEle: { 
        tag: function (tagName) { 
            return document.getElementsByTagName(tagName); 
        }, 
        id: function (idName) { 
            return document.getElementById(idName); 
        } 
    },    
    setCss: { 
        setStyle: function (arr) { 
            for(var i = 0; i < arr.length; i++) { 
                arr[i].style.border = "1px solid #abc"; 
            } 
        }, 
        css: function() {}, 
        addClass: function() {}, 
        removeClass: function() {} 
        // ... 
    } 
    // 属性操作模块 
    // 动画模块 
    // 事件模块 
    // ... 
};

var divs = itcast.getEle.tag();
itcast.setCss.setStyle(divs);

上诉例子中可能看起来，最后一种方式的代码量也很多，而且更多，但是我们可以很明显的对比看到，当我们以后需要进行扩展的时候，我们不仅仅是要改样式，我们要修改属性，加入动画，绑定事件的时候，只需要给这个对象增加行为方式就可以了，不会修改到原来代码的逻辑，而传统的方式需要修改原来的代码，还有很多重复的代码要编写。