浅谈JavaScript的面向对象和它的封装、继承、多态

写在前面

创新互联建站"三网合一"的企业建站思路。企业可建设拥有电脑版、微信版、手机版的企业网站。实现跨屏营销，产品发布一步更新，电脑网络+移动网络一网打尽，满足企业的营销需求！创新互联建站具备承接各种类型的成都网站设计、做网站、成都外贸网站建设公司项目的能力。经过十载的努力的开拓，为不同行业的企事业单位提供了优质的服务，并获得了客户的一致好评。

既然是浅谈，就不会从原理上深度分析，只是帮助我们更好地理解...

面向对象与面向过程

面向对象和面向过程是两种不同的编程思想，刚开始接触编程的时候，我们大都是从面向过程起步的，毕竟像我一样，大家接触的***门计算机语言大概率都是C语言，C语言就是一门典型的面向过程的计算机语言。

面向过程主要是以动词为主，解决问题的方式是按照顺序一步一步调用不同的函数。

面向对象是以名词为主，将问题抽象出具体的对象，而这个对象有自己的属性和方法，在解决问题的时候，是将不同的对象组合在一起使用。

 
 
 
    
  
  
  
  1. //面向过程装大象  
    2.   
  
  
  2. 1.开（冰箱）  
    3.   
  
  
  3. 2.（大象）装进（冰箱）  
    4.   
  
  
  4. 3.关（冰箱）  
    5.  
 
 
 
 
 
    
  
  
  
  1. //面向对象装大象  
    2.   
  
  
  2. 1. 冰箱.开门（）  
    3.   
  
  
  3. 2. 冰箱.装进（大象）  
    4.   
  
  
  4. 3. 冰箱.关门（） 
    5.

从这个例子可以看出，面向对象是以主谓为主，将主谓堪称一个一个的对象，然后对象有自己的属性和方法。

面向对象是以功能来划分问题的，而不是步骤。功能上的统一保证了面向对象设计的可扩展性，解决了代码重用性的问题。

这也是在漫长的程序设计的发展过程中得到的验证结果，面向对象的编程思想较之于面向过程较好一点

封装

面向对象有封装、继承和多态三大特性。

封装：就是把事物封装成类，隐藏事物的属性和方法的实现细节，仅对外公开接口。

在ES5中，并没有class的概念，但是由于js的函数级作用域（函数内部的变量函数外访问不到）。所以我们可以模拟class。在es5中，类其实就是保存了一个函数的变量，这个函数有自己的属性和方法。将属性和方法组成一个类的过程就是封装。

1.通过构造函数添加

JavaScript提供了一个构造函数（Constructor）模式，用来在创建对象时初始化对象。构造函数其实就是普通的函数，只不过有以下的特点

 
 
 
    
  
  
  
  1. ①首字母大写（建议构造函数首字母大写，即使用大驼峰命名，非构造函数首字母小写）  
    2.   
  
  
  2. ②内部使用this  
    3.   
  
  
  3. ③使用new生成实例 
    4.

通过构造函数添加属性和方法实际上也就是通过this添加的属性和方法。因为this总是指向当前对象的，所以通过this添加的属性和方法只在当前对象上添加，是该对象自身拥有的。所以我们实例化一个新对象的时候，this指向的属性和方法都会得到相应的创建，也就是会在内存中复制一份，这样就造成了内存的浪费。

 
 
 
    
  
  
  
  1. function Cat(name,color){  
    2.   
  
  
  2.     this.name = name;  
    3.   
  
  
  3.     this.color = color;  
    4.   
  
  
  4.     this.eat = (() => {  
    5.   
  
  
  5.         console.log("fish!")  
    6.   
  
  
  6.     })  
    7.   
  
  
  7. }  
    8.   
  
  
  8. //生成实例  
    9.   
  
  
  9. var cat1 = new Cat("tom", "gray") 
    10.

通过this定义的属性和方法，我们实例化对象的时候斗湖重新复制一份

2.通过原型prototype封装

在类上通过this的方式添加属性和方法会导致内存浪费的现象，有什么办法可以让实例化的类所使用的属性和方法 直接使用指针 指向同一个属性和方法。

这就是原型的方法

 
 
 
    
  
  
  
  1. JavaScript规定，每一个构造函数都有一个prototype属性，指向另一个对象。这个对象的所有属性和方法，都会被构造函数的实例继承。  
    2.   
  
  
  2. 也就是说，对于那些不变的属性和方法，我们可以直接将其添加在类的prototype对象上。  
    3.  
 
 
 
 
 
    
  
  
  
  1. function Cat(name,color){  
    2.   
  
  
  2.             this.name = name;  
    3.   
  
  
  3.             this.color = color;  
    4.   
  
  
  4.         }  
    5.   
  
  
  5.         Cat.prototype.type = "英短";  
    6.   
  
  
  6.         Cat.prototype.eat = ( () => {  
    7.   
  
  
  7.             alert("fish!")  
    8.   
  
  
  8.         } )       
    9.   
  
  
  9.  
    10.   
  
  
  10.         //生成实例  
    11.   
  
  
  11.         var cat1 = new Cat('Tom', 'gray');  
    12.   
  
  
  12.         var cat2 = new Cat('Kobe', 'purple');  
    13.   
  
  
  13.         console.log(cat1.type); //英短  
    14.   
  
  
  14.         cat2.eat(); //fish! 
    15.

这时所有实例的type属性和eat()方法，其实都是同一个内存地址，指向prototype对象，因此就提高了运行效率。

但是这样做也有弊端，因为实例化的对象的原型都是指向同一内存地址，改动其中一个对象的属性可能会影响到其他的对象

es6中的类和封装

es6声明一个类

①构造器：构造器内创建自有属性

②方法：声明类实例具有的方法

 
 
 
    
  
  
  
  1. class Cat {  
    2.   
  
  
  2.     //等价于Cat构造器  
    3.   
  
  
  3.     constructor(name) {  
    4.   
  
  
  4.         this.name = name;  
    5.   
  
  
  5.     }  
    6.   
  
  
  6.     //更加简单的声明类的内部函数  
    7.   
  
  
  7.     //等价于 Cat.prototype.eat  
    8.   
  
  
  8.     eat() {  
    9.   
  
  
  9.         console.log("fish!");  
    10.   
  
  
  10.     }  
    11.   
  
  
  11. }  
    12.   
  
  
  12. //生成实例  
    13.   
  
  
  13. var cat1 = new Cat("tom");  
    14.   
  
  
  14. cat1.eat(); //fish!  
    15.   
  
  
  15. console.log(cat1 instanceof Cat); //true  
    16.   
  
  
  16. console.log(cat1 instanceof Object); //true  
    17.   
  
  
  17. console.log(typeof Cat); //function  
    18.   
  
  
  18. console.log(typeof Cat.prototype.eat); //function 
    19.

从上面class声明的Cat为例：Cat类是一个具有构造函数行为的函数，其中内部方法eat实际上就是Cat.prototype.eat()

所以说es6的class封装类，本质上是es5实现方式的语法糖

最主要的区别在于，class类的属性是不可重新赋值和不可枚举的，Cat.prototype就是一个只读属性

class和自定义类型的区别

（1）class的声明不会提升，与let类似

（2）class的声明自动运行于严格模式之下

（3）class声明的方法不可枚举

（4）class的内部方法没有 constructor 属性，无法new

（5）调用class的构造函数必须new

（6）class内部方法不能同名

class类的使用

class作为js中的一级公民，可以被当作值来直接使用

 
 
 
    
  
  
  
  1. //1.类名作为参数传入函数  
    2.   
  
  
  2. function createObj (ClassName) {  
    3.   
  
  
  3.     return new ClassName()  
    4.   
  
  
  4. }  
    5.   
  
  
  5. //2.立即执行，实现单例模式  
    6.   
  
  
  6. let cat1 = new class{  
    7.   
  
  
  7.     constructor (name) {  
    8.   
  
  
  8.         this.name = name  
    9.   
  
  
  9.     }  
    10.   
  
  
  10.     eat() {  
    11.   
  
  
  11.         console.log("fish!")  
    12.   
  
  
  12.     }  
    13.   
  
  
  13. }("tom”)  
    14.   
  
  
  14. cat1.eat() //fish! 
    15.

继承

继承就是子类可以使用父类的所有功能，并且对这些功能进行扩展。继承的过程，就是从一般到特殊的过程。

1.类式继承

所谓的类式继承就是使用的原型的方式，将方法添加在父类的原型上，然后子类的原型是父类的一个实例化对象。

 
 
 
    
  
  
  
  1. //声明父类  
    2.   
  
  
  2. var SuperClass = function(){  
    3.   
  
  
  3.     let id = 1;  
    4.   
  
  
  4.     this.name = ['java'];  
    5.   
  
  
  5.     this.superValue = function() {  
    6.   
  
  
  6.         console.log('this is superValue!')  
    7.   
  
  
  7.     } 
    8.   
  
  
  8. }  
    9.   
  
  
  9. //为父类添加共有方法  
    10.   
  
  
  10. SuperClass.prototype.getSuperValue = function () {  
    11.   
  
  
  11.     return this.superValue();  
    12.   
  
  
  12. };  
    13.   
  
  
  13. //声明子类  
    14.   
  
  
  14. var SubClass = function() {  
    15.   
  
  
  15.     this.subValue = (() => {  
    16.   
  
  
  16.         console.log('this is subValue!')  
    17.   
  
  
  17.     })  
    18.   
  
  
  18. }  
    19.   
  
  
  19. //继承父类  
    20.   
  
  
  20. SubClass.prototype = new SuperClass();  
    21.   
  
  
  21. //为子类添加共有方法  
    22.   
  
  
  22. SubClass.prototype.getSubValue = function() {  
    23.   
  
  
  23.     return this.subValue()  
    24.   
  
  
  24. }  
    25.   
  
  
  25. //生成实例  
    26.   
  
  
  26. var sub1 = new SubClass();  
    27.   
  
  
  27. var sub2 = new SubClass();  
    28.   
  
  
  28. sub1.getSuperValue(); //this is superValue!  
    29.   
  
  
  29. sub1.getSubValue(); //this is subValue!  
    30.   
  
  
  30. console.log(sub1.id); //undefined  
    31.   
  
  
  31. console.log(sub1.name); //["java"]  
    32.   
  
  
  32. sub1.name.push("php");   
    33.   
  
  
  33. console.log(sub1.name); //["java", "php"]  
    34.   
  
  
  34. console.log(sub2.name); //["java", "php"] 
    35.

其中最核心的是SubClass.prototype = new SuperClass();

类的原型对象prototype对象的作用就是为类的原型添加共有的方法的，但是类不能直接访问这些方法，只有将类实例化之后，新创建的对象复制了父类构造函数的属性和方法，并将原型 proto 指向了父类的原型对象。这样子类就可以访问父类的属性和方法，同时，父类中定义的属性和方法不会被子类继承。

but使用类继承的方法，如果父类的构造函数中有引用数据类型，就会在子类中被所有实例共用，因此一个子类的实例如果更改了这个引用数据类型，就会影响到其他子类的实例。

构造函数继承

为了克服类继承的缺点，才有了构造函数继承，构造函数继承的核心思想就是SuperClass.call(this, id),直接改变this的指向，使通过this创建的属性和方法在子类中复制一份，因为是单独复制的，所以各个实例化的子类互不影响。but会造成内存浪费的问题

 
 
 
    
  
  
  
  1. //构造函数继承  
    2.   
  
  
  2. //声明父类  
    3.   
  
  
  3. var SuperClass = function(id){  
    4.   
  
  
  4.     var name = 'java'  
    5.   
  
  
  5.     this.languages = ['java', 'php', 'ruby'];  
    6.   
  
  
  6.     this.id = id   
    7.   
  
  
  7. }  
    8.   
  
  
  8. //声明子类  
    9.   
  
  
  9. var SubClass = function(id){  
    10.   
  
  
  10.     SuperClass.call(this, id)  
    11.   
  
  
  11. }  
    12.   
  
  
  12. //生成实例  
    13.   
  
  
  13. var sub1 = new SubClass(1);  
    14.   
  
  
  14. var sub2 = new SubClass(2);  
    15.   
  
  
  15. console.log(sub2.id); // 2  
    16.   
  
  
  16. console.log(sub1.name); //undefined  
    17.   
  
  
  17. sub1.languages.push("python");  
    18.   
  
  
  18. console.log(sub1.languages); // ['java', 'php', 'ruby', 'python']  
    19.   
  
  
  19. console.log(sub2.languages); // ['java', 'php', 'ruby'] 
    20.

组合式继承

组合式继承是汲取了两者的优点，既避免了内存浪费，又使得每个实例化的子类互不影响。

 
 
 
    
  
  
  
  1. //组合式继承  
    2.   
  
  
  2. //声明父类  
    3.   
  
  
  3. var SuperClass = function(name){  
    4.   
  
  
  4.     this.languages = ['java', 'php', 'ruby'];  
    5.   
  
  
  5.     this.name = name;  
    6.   
  
  
  6. }  
    7.   
  
  
  7.  //声明父类原型方法  
    8.   
  
  
  8. SuperClass.prototype.showLangs = function () {  
    9.   
  
  
  9.     console.log(this.languages);  
    10.   
  
  
  10. }  
    11.   
  
  
  11. //声明子类  
    12.   
  
  
  12. var SubClass = function(name){  
    13.   
  
  
  13.     SuperClass.call(this, name)  
    14.   
  
  
  14. }  
    15.   
  
  
  15. //子类继承父类(链式继承)  
    16.   
  
  
  16. SubClass.prototype = new SuperClass();  
    17.   
  
  
  17. //生成实例  
    18.   
  
  
  18. var sub1 = new SubClass('python');  
    19.   
  
  
  19. var sub2 = new SubClass('go');  
    20.   
  
  
  20. sub2.showLangs(); //['java', 'php', 'ruby']  
    21.   
  
  
  21. sub1.languages.push(sub1.name);  
    22.   
  
  
  22. console.log(sub1.languages);//["java", "php", "ruby", "python"]  
    23.   
  
  
  23. console.log(sub2.languages);//['java', 'php', 'ruby'] 
    24.

but警告：组合式继承方法固然好，但是会导致一个问题，父类的构造函数会被创建两次（call()的时候一遍，new的时候又一遍）

寄生组合继承

组合式继承的缺点的关键是 父类的构造函数在类继承和构造函数继承的组合形式被创建了两边，但是在类继承中我们并不需要创建父类的构造函数，我们只要子类继承父类的原型即可。

所以我们先给父类的原型创建一个副本，然后修改子类的 constructor 属性，***在设置子类的原型就可以了

 
 
 
    
  
  
  
  1. //原型式继承  
    2.   
  
  
  2. //原型式继承其实就是类式继承的封装，实现的功能返回一个实例，该实例的原型继承了传入的o对象  
    3.   
  
  
  3. function inheritObject(o) {  
    4.   
  
  
  4.     //声明一个过渡函数  
    5.   
  
  
  5.     function F() {}  
    6.   
  
  
  6.     //过渡对象的原型链继承父对象  
    7.   
  
  
  7.     F.prototype = o;  
    8.   
  
  
  8.     //返回一个过渡对象的实例，该实例的原型继承了父对象  
    9.   
  
  
  9.     return new F();  
    10.   
  
  
  10. }  
    11.   
  
  
  11. //寄生式继承  
    12.   
  
  
  12. //寄生式继承就是对原型继承的第二次封装，使得子类的原型等于父类的原型。并且在第二次封装的过程中对继承的对象进行了扩展  
    13.   
  
  
  13. function inheritPrototype(subClass, superClass){  
    14.   
  
  
  14.     //复制一份父类的原型保存在变量中，使得p的原型等于父类的原型  
    15.   
  
  
  15.     var p = inheritObject(superClass.prototype);  
    16.   
  
  
  16.     //修正因为重写子类原型导致子类constructor属性被修改  
    17.   
  
  
  17.     p.constructor = subClass;  
    18.   
  
  
  18.     //设置子类的原型  
    19.   
  
  
  19.     subClass.prototype = p;  
    20.   
  
  
  20. }  
    21.   
  
  
  21. //定义父类  
    22.   
  
  
  22. var SuperClass = function(name) {  
    23.   
  
  
  23.     this.name = name;  
    24.   
  
  
  24.     this.languages = ["java", "php", "python"]  
    25.   
  
  
  25. }  
    26.   
  
  
  26. //定义父类原型方法  
    27.   
  
  
  27. SuperClass.prototype.showLangs = function() {  
    28.   
  
  
  28.     console.log(this.languages);  
    29.   
  
  
  29. }  
    30.   
  
  
  30. //定义子类  
    31.   
  
  
  31. var SubClass = function(name) {  
    32.   
  
  
  32.     SuperClass.call(this,name)  
    33.   
  
  
  33. }  
    34.   
  
  
  34. inheritPrototype(SubClass, SuperClass);  
    35.   
  
  
  35. var sub1 = new SubClass('go'); 
    36.

es6中的继承

 
 
 
    
  
  
  
  1. class SuperClass {  
    2.   
  
  
  2.     constructor(name) {  
    3.   
  
  
  3.         this.name = name  
    4.   
  
  
  4.         this.languages = ['java', 'php', 'go'];   
    5.   
  
  
  5.     }  
    6.   
  
  
  6.     showLangs() {  
    7.   
  
  
  7.         console.log(this.languages);  
    8.   
  
  
  8.     }  
    9.   
  
  
  9. }  
    10.   
  
  
  10. class SubClass extends SuperClass {  
    11.   
  
  
  11.     constructor(name) {  
    12.   
  
  
  12.         super(name)  
    13.   
  
  
  13.     }  
    14.   
  
  
  14.     //重写父类中的方法  
    15.   
  
  
  15.     showLangs() {  
    16.   
  
  
  16.         this.languages.push(this.name)  
    17.   
  
  
  17.         console.log(this.languages);  
    18.   
  
  
  18.     }  
    19.   
  
  
  19. }  
    20.   
  
  
  20. //生成实例  
    21.   
  
  
  21. var sub = new SubClass('韩二虎');  
    22.   
  
  
  22. console.log(sub.name); //韩二虎  
    23.   
  
  
  23. sub.showLangs(); //["java", "php", "go", "韩二虎"] 
    24.

多态

多态实际上是不同对象作用与同一操作产生不同的效果。多态的思想实际上是把 “想做什么” 和 “谁去做” 分开。

多态的好处在于，你不必再向对象询问“你是什么类型”后根据得到的答案再去调用对象的某个行为。你尽管去调用这个行为就是了，其他的一切可以由多态来负责。规范来说，多态最根本的作用就是通过吧过程化的条件语句转化为对象的多态性，从而消除这些条件分支语句。

由于JavaScript中提到的关于多态的详细介绍并不多，这里简单的通过一个例子来介绍就好

 
 
 
    
  
  
  
  1. //非多态       
    2.   
  
  
  2. var hobby = function(animal){  
    3.   
  
  
  3.     if(animal == 'cat'){  
    4.   
  
  
  4.         cat.eat()  
    5.   
  
  
  5.     }else if(animal == 'dog'){  
    6.   
  
  
  6.         dog.eat()  
    7.   
  
  
  7.     }  
    8.   
  
  
  8. }  
    9.   
  
  
  9. var cat = {  
    10.   
  
  
  10.     eat: function() {  
    11.   
  
  
  11.         alert("fish!")  
    12.   
  
  
  12.     }  
    13.   
  
  
  13. }  
    14.   
  
  
  14. var dog = {  
    15.   
  
  
  15.     eat: function() {  
    16.   
  
  
  16.         alert("meat!")  
    17.   
  
  
  17.     }  
    18.   
  
  
  18. }  
    19.   
  
  
  19. console.log(123);  
    20.   
  
  
  20. hobby('cat'); //fish!  
    21.   
  
  
  21. hobby('dog'); //meat! 
    22.

从上面的例子能看到，虽然 hobby 函数目前保持了一定的弹性，但这种弹性很脆弱的，一旦需要替换或者增加成其他的animal，必须改动hobby函数，继续往里面堆砌条件分支语句。我们把程序中相同的部分抽象出来，那就是吃某个东西。然后再重新编程。

 
 
 
    
  
  
  
  1. //多态       
    2.   
  
  
  2. var hobby = function(animal){  
    3.   
  
  
  3.     if(animal.eat instanceof Function){  
    4.   
  
  
  4.         animal.eat();  
    5.   
  
  
  5.     }  
    6.   
  
  
  6. }  
    7.   
  
  
  7. var cat = {  
    8.   
  
  
  8.     eat: function() {  
    9.   
  
  
  9.         alert("fish!")  
    10.   
  
  
  10.     }  
    11.   
  
  
  11. }  
    12.   
  
  
  12. var dog = {  
    13.   
  
  
  13.     eat: function() {  
    14.   
  
  
  14.         alert("meat!")  
    15.   
  
  
  15.     } 
    16.   
  
  
  16. } 
    17.

现在来看这段代码中的多态性。当我们向两种 animal 发出 eat 的消息时，会分别调用他们的 eat 方法，就会产生不同的执行结果。对象的多态性提示我们，“做什么” 和 “怎么去做”是可以分开的，这样代码的弹性就增强了很多。即使以后增加了其他的animal，hobby函数仍旧不会做任何改变。

 
 
 
    
  
  
  
  1. //多态       
    2.   
  
  
  2. var hobby = function(animal){  
    3.   
  
  
  3.     if(animal.eat instanceof Function){  
    4.   
  
  
  4.         animal.eat();  
    5.   
  
  
  5.     }  
    6.   
  
  
  6. }  
    7.   
  
  
  7. var cat = {  
    8.   
  
  
  8.     eat: function() {  
    9.   
  
  
  9.         alert("fish!")  
    10.   
  
  
  10.     }  
    11.   
  
  
  11. }  
    12.   
  
  
  12. var dog = {  
    13.   
  
  
  13.     eat: function() {  
    14.   
  
  
  14.         alert("meat!")  
    15.   
  
  
  15.     }  
    16.   
  
  
  16. }  
    17.   
  
  
  17. var aoteman = {  
    18.   
  
  
  18.     eat: function(){  
    19.   
  
  
  19.         alert("lil-monster!")  
    20.   
  
  
  20.     }  
    21.   
  
  
  21. }  
    22.   
  
  
  22. hobby(cat); //fish!  
    23.   
  
  
  23. hobby(dog); //meat!  
    24.   
  
  
  24. hobby(aoteman); //lil-monster! 
    25.

新闻名称：浅谈JavaScript的面向对象和它的封装、继承、多态
文章网址：http://www.gawzjz.com/qtweb/news37/173787.html

网站建设、网络推广公司-创新互联，是专注品牌与效果的网站制作，网络营销seo公司；服务项目有等

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联

猜你还喜欢下面的内容

微信小程序知识

分类信息网站

鸿程源茂　　 　重庆花箱　　 　美美搬家　　 　手机网站制作　　 　网站seo优化　　 　自适应网页设计　　 　成都橡塑保温板　　 　整合营销　　 　简阳电信机房　　 　手机网站建设公司　　 　成都户外广告牌设计　　 　广汉锦华建材　　 　梦港之夜　　 　成都网站建设　　 　特丽尔硅藻泥　　 　简阳做网站　　 　云虚拟主机　　 　手机网站设计　　 　绵阳梓潼做网站　　 　网页设计