面向对象讲解（1）

面向对象

     面向对象对每一个初学者来说，都是一个难点，但是他也是一个重点，他是我们学习JavaScript的核心内容，如果你想拿到更高的工资，拿到更好的offer，那么面向对象就必须掌握，他对我们学习其他的语言也有很大的帮助，所以面向对象是前端工程师必备的技能。

     在此我们想一下为什么要进行面向对象编程，面向对象编程有什么好处，他能给我们开发者带来什么好处，下面我们就说一下这些问题。

为什么要进行面向对象编程？

       如果我们给页面上的所有div标签添加红色的边框，我们应该怎么处理？

   最常见的方法是利用DOM 获取所有div标签 如下：

   <div class="o1"></div>

   <div class="o2"></div>

   <div class="o3"></div>

   <div class="o4"></div>

 

   // 获取所有的div

   document.getElementsClassName("o1");

   document.getElementsClassName("o2");

   document.getElementsClassName("o3");

   document.getElementsClassName("o4");

这样的方法我们是不是能写到吐，这就需要我们简化代码书写，这就要用到函数修改如下：

   function tag(id) {

return document.getElementsClassName(id);

   }

   tag (“o1”);

       tag (“o2”);

       tag (“o3”);

       tag (“o4”);

这样写是不是就简化了许多，看着也清爽了许多，到这里，我们又延伸出一个问题，如果是多个复杂结构的函数呢？那需要我们怎么样的处理，这样的话，就要用到我们的对象了如下面的一段代码：

       var itcast = {

tag: function ( tagName ) {

return document.getElementsByTagName( tagName );

},

id: function ( idName ) {

return document.getElementById( idName );

}

};

这样的管理代码使代码的复用性更强，更加易于管理。

 

面向对象具有三个基本的特征：封装性，继承性，多态性

封装性：就是将复杂的包裹，隐藏起来，让简单的留在外面

继承性：就是拿来主义，自己没有，把别人的拿过来，让其成为自己的

 

学习面向对象我们就应该了解继承的概念，在JS中有两种继承类型1、原型继承2、组合继承

 

1、原型继承

   如果需要让一个对象有某一个行为（属性和方法），那么可以考虑将这个行为加到原型对象中，那么这个对象就继承自原型对象，获得了该行为 如下代码

var obj = {};

   Obj.name = “小红”；

   Obj.age = 18;

2、组合式继承

   组合式继承将其他的对象中的成员加到自己身上 如下代码：

var o1 = {name : “小红” , age = 18 , gender = “女”}

var o2 = {sayHello : function () { alert(“你好”)};

// 让o2 继承 o1

// 将o1 的成员添加到 o2 上

for (var k in o1) {

   o2[k] = o1[k];

};

// 由于 for in 循环中的对象可以随意的替代, 因此 o2 可以继承自任意的对象

// 因此, 这个继承方法称为组合式继承

 

下面介绍一种经典的继承方法:Object.create

var o1 = {name : “小明”};

 

var o2 = Object.create(o1);

实现的效果和上边是一样的，是不是简便了许多，这是ES5提供的方法，有些浏览器不支持，

在实际的开发过程中我们为了兼容所有的浏览器，提供了两种方法：

1、在原生对象中提供方法

   if ( !Object.create ) {

Object.create = function ( obj ) {

function F() {}

// 要有继承

F.prototype = obj;

return new F();

}

};

   var o2 = Object.create( o1 );

2、现在统一用的新方法：

   var create = function( obj ) {

if ( Object.create ) {

return Object.create( obj );

} else {

 

function F() {}

F.prototype = obj;

return new F();

}

};

   var o2 = create ( o1);

// 封装原理：

// 无论浏览器是否支持该方法, 都应该使用自己定义的方法来完成, 但是

// 在方法内部, 判断浏览器是否具有该功能, 如果有该功能

// 则使用浏览器提供 的功能

// 如果浏览器不支持该功能, 则自己实现

 

今天就写到这吧，希望会给你们带来帮助，未完待续，后边会有原型链的讲解，欢迎关注！