浅谈JS中的面向对象编程

最新推荐文章于 2024-09-21 09:29:16 发布

置顶暖心少年刘先森

最新推荐文章于 2024-09-21 09:29:16 发布

阅读量195

点赞数 1

分类专栏： JS 文章标签： js javascript es6 设计模式

本文链接：https://blog.csdn.net/Beyond_Liu1226/article/details/104469097

版权

JS 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

1.何为面向对象??

面向对象编程----Object Oriented Programming 简称 OOP, 是一种以模块化为中心的编程思想; 核心是----关注模块, 组成整体; 它是将一个项目整体分解为一个一个模块(对象)去完成, 然后由这些模块(对象)组合成一个项目整体.
每一个对象都是功能中心，具有明确分工，可以完成接受信息、处理数据、发出信息等任务; 因此, 面向对象编程更适合多人合作的大型开发项目.
面向对象的特点：
封装
继承
多态

2. 何为面向过程??

说到面向对象不得不说一下面向过程了, 那么又何为面向过程?? 面向过程编程----procedure oriented programming 简称POP, 是一种以过程为中心的编程思想; 核心是----关注整体, 按步完成. 它是将解决问题所需要的步骤分析出来, 然后用函数把这些步骤一步一步实现，使用的时候一个一个依次调用就可以了.

3. 两者的区别??

我们来看最经典的“把大象放冰箱”这个问题, 来深刻理解一下两者的区别:
面向过程的解决方法----重在步骤, 按步一步一步实现
开门 (冰箱）—>装进（冰箱，大象）—>关门 (冰箱)
面向对象的解决方法----重在模块, 一块一块完成组成一个整体
冰箱.开门( ) —>冰箱.装进（大象）—>冰箱.关门( )

4. 面向对象编程推导过程

那么JavaScript中面向对象编程又是怎么编写代码呢?我将从以下5个步骤一步步推导出来 :
字面量创建 --> 工厂模式(函数封装) --> 构造函数 --> 原型对象 --> 构造函数+原型对象

4.1字面量创建函数

var person={
	name:"Anthony";
	age:"18";
	greeting:function(){
	console.log("我的名字是"+name, ", 我的年龄是"+age)} //我的名字是Anthony, 我的年龄是18
	}

优点：代码简单, 易于编写
缺点：创建多个对象产生重代码冗余, 编写麻烦, 并且没有实例与原型的概念
解决办法：工厂模式(函数封装)

4.2工厂模式(函数封装)

  function createPerson(name, age) {
            //原材料
            var person = new Object();
            //加工
            person.name = name;
            person.age = age;
            person.greeting = function() {
                    return '我的姓名是：' + person.name + ', 我的年龄：' + person.age}
            //出厂
            return person;
			}
  var p1=creatPerson("Anthony","18");
  var p2=creatPerson("zhangsan","19");
  console.log(p1); //我的姓名是:Anthony,我的年龄是:18
  console.log(p2); //我的姓名是:zhangsan,我的年龄是:19

优点：工厂模式解决了对象字面量创建对象代码重复问题，创建相似对象可以通过重复调用函数即可
缺点：因为是调用函数创建对象，无法识别对象的类型, 都是来自Object
解决办法：构造函数

4.3 new关键字创建自定义构造函数

 function createPerson(name, age) {//构造函数写法
     this.name = name;
     this.age = age;
     this.greeting = function() {
 return '我的姓名是：' + this.name + '; 我的年龄：' + this.age }
 }
 var p1=new creatPerson("Anthony","18");
 var p2=new creatPerson("zhangsan","19");
 console.log(p1); //我的姓名是:Anthony,我的年龄是:18
 console.log(p2);//我的姓名是:zhangsan,我的年龄是:19
	但是仍然存在问题：
	console.log (p1.greeting === p2.greeting)  //false
	同一个构造函数中定义了同一个greeting()方法, 而不同实例上的同名函数方法却是不相等的, 意味构造函数中的方法要在每个实例上重新创建一次, 这样会占用多余内存空间, 影响性能, 显然是不行的 !
正确的写法应该是: 实例对象的属性放在构造函数里面, 将方法转为公用都可以使用

优点：解决了自定义对象创建问题, 而且可以检测对象类型
缺点：构造函数方法要在每个实例对象上新建一次, 不可以公用
解决办法：原型模式

4.4原型对象

function creatPerson() {
};
//原型对象写法
creatPerson.prototype.name = "Anthony";
creatPerson.prototype.age = "18";
creatPerson.prototype.greeting = function() {
 return '我的姓名是：' + this.name + '; 我的年龄：' + this.age
};
var p1=new creatPerson();
var p2=new creatPerson();
console.log(p1); //我的姓名是:Anthony,我的年龄是:18
console.log(p2); //我的姓名是:Anthony,我的年龄是:18
console.log(p1.greeting == p2.greeting); //true

优点：与单独使用构造函数不一样，原型对象中的方法不会在实例中重新创建一次，节约内存, 可以公用
缺点：使用空构造函数，实例 p1 和 p2 的 name, age都一样了，我们显然不希望所有实例对象的属性, 方法都一样，它们还是要有自己独有的属性, 方法。并且如果原型对象中有引用类型值，实例中获得的都是该值的引用地址，意味着一个实例修改了这个值，其他实例中的值都会相应改变。
解决办法：构造函数+原型对象组合使用

4.5构造函数+原型对象

 function createPerson(name, age) {//构造函数内:实例对象属性
     this.name = name;
     this.age = age;
creatPerson.prototype.greeting = function() {//原型对象内:实例对象方法
 return '我的姓名是：' + this.name + '; 我的年龄：' + this.age
};
 var p1=new creatPerson("Anthony","18");
 var p2=new creatPerson("zhangsan","19");
 console.log(p1); //我的姓名是:Anthony,我的年龄是:18
 console.log(p2);//我的姓名是:zhangsan,我的年龄是:19
 console.log(p1.greeting == p2.greeting); //true