面向过程和面向对象
区别
- 面向过程：关注的是过程 中的每一个环节
- 吃蛋炒饭：买鸡蛋→买米→蒸米→炒蛋→炒米→混合→搅拌→蛋炒饭
- 面向对象：关注的是让对象 做事情
- 找一个对象（老公或老婆）.做蛋炒饭
面向对象编程
Object Oriented Programming，简称 OOP ，是一种编程开发思想 。它将真实世界各种复杂的关系 ，抽象为一个个对象 ，然后由对象之间的分工与合作，完成对真实世界的模拟。
// ① 现实需求（盖大楼）
// ② 需要哪些对象（设计师、搬运工、砌墙师、木匠、导购…）
// ③ 分工与合作
// ④ 完成项目
面向对象的好处
- 易于分工与合作，适合大型项目的开发。
- 健壮性强，易于维护。
面向对象的特征
- 封装:对象把实现过程封装在方法中，调用者只需要调用即可。而不需要了解过程。
- 继承：子承父业。 对象b可以继承对象a中的属性和方法。可以减少代码冗余
- [多态]：一种事物（动物），可以具有多种表现形式（鸭、狗、猫…）。
面向对象不是替代面向过程，而是面向过程的更高一级的封装。
类和实例和对象的比较
类：类型，对具体事物的一个抽象认识，是抽象出来的结果。
类的说明：
类就是一组相关属性和行为定义的集合。
属性：对于事物特征的描述，一般是名词或者形容词。
- 传统的编程语言：java、C# → class
- ES3.0 和 ES5.0 没有类的概念 ECMAScript → ES
- 构造函数模拟类
- ES6.0 有类概念→ class
对象：事物的具体表现。
- 创建对象：new 类名();
- ES3.0 和 ES5.0 ： new 构造函数名();
类和实例关系：类是实例的模板，实例是类的一个具体的实现。
自定义构造函数创建对象
-
自定义构造函数的语法：
function 构造函数名(形参…){
this.key = value;
this.key = value;
}
-
创建对象：new 构造函数(实参…);
new 这个关键字干了什么？
- 在内存中申请了一块空间，存放了一个对象。（看不见）
- 让构造函数内部的this指向该空间（看不见）
- 通过this向内存中空的对象中添加属性和方法（看的见）
- new关键字最后将this返回给外部变量（看不见）
构造函数和实例对象的关系
- 构造函数：构造函数是对象的模板。
- 实例对象：具体存在的，对象是类的一个实例。
构造函数和普通函数的区别
相同：都是函数
不同：命名规范：
+构造函数：帕斯卡
+普通函数：驼峰
调用方式：
+ 构造函数： new 构造函数();
+ 普通函数：普通函数();
- 构造函数：
- 内置的构造函数：Object、Date、Array
- 自己定义的：Dog、Cat、Hero
--------------------------------------------------理解了对象，类，构造函数，那么我们就聊聊，面向对象的特性----------------------------------
封装：
封装(把相关的信息（无论数据或方法）存储在对象中的能力)
我的理解是：一个页面或多个页面公用的方法或功能，用一个方法来实现，多个页面调用就可以实现想要的功能效果；
这样做的好处是：减少代码冗余，页面清晰，可读性强，好维护；
常用于封装插件，方法公用；
封装案例：
<div class="box">
<div class="hd">
<span class="current span">标签一</span>
<span class="span">标签二</span>
<span class="span">标签三</span>
<span class="span">标签四</span>
</div>
<div class="bd">
<ul>
<li class="show item">我是标签一</li>
<li class="item">我是标签二</li>
<li class="item">我是标签三</li>
<li class="item">我是标签四</li>
</ul>
</div>
</div>
<script src="jquery-1.12.4.min.js"></script>
<script src="jquery.tab.js"></script>
<script>
// 调用tab函数后表示给类名为box的元素设置选项卡切换效果
$('.box').tab();
$('.box2').tab();
</script>
</body>
</html>
$.fn === $.prototype
jquery.tab.js 文件：
(function () {
// 给$.fn设置一个tab方法：
$.fn.tab = function () {
// this内部的类名为span的元素为顶部操作按钮
// this内部的类名为item的元素为底部显示区域
var $spans = this.find('.item');
this.find('.span').on('click', function () {
$(this).addClass('current').siblings().removeClass('current');
$spans.eq($(this).index()).addClass('show').siblings().removeClass('show');
});
};
})();
还有经常用的函数封装复用
继承:
继承(由另一个类（或多个类）得来类的属性和方法的能力)
我的理解是 ： 子承父业 ,继承f父级的方法和属性为自己所用；
实现继承的方法：利用原型prototype来实现；
// 学生类：属性（姓名、年龄、性别）；方法（吃、打招呼）
// 医生类：属性 （姓名、年龄、性别）；方法（吃、打招呼）
// 【人类】-父类
// 构造函数
function Person(name, age, gender) {
this.name = name;
this.age = age;
this.gender = gender;
};
// 人类的原型
Person.prototype.eat = function () {
console.log('吃东西...');
};
Person.prototype.sayHi = function () {
console.log('大家好..');
};
// 【学生类】-子类
// 构造函数
function Student(name, age, gender) {
// this 代表当前创建的对象 stu1、stu2
// 【借用继承】
Person.call(this,name,age,gender);
};
// 原型继承
Student.prototype = new Person();
Student.constructor = Student;
// 创建了一个学生对象
var stu1 = new Student('张三', 10, '男');
// 创建了一个学生对象
var stu2 = new Student('李四', 20, '男');
经常用的是在vue原型中加一个属性方法，在vue全局中都可以使用
例如：
// 引入axios
import axios from '@/assets/js/axios'
Vue.prototype.$axios = axios
多态:
多态(一个对象在不同情况下的多种形态)；
多态的实际含义是：同一操作作用于不同的对象上面，可以产生不同的解释和不同的执行结果。换句话说，给不同的对象发送同一个消息的时候，这些对象会根据这个消息分别给出不同的反馈。
//主人家里养了两只动物，分别是一只鸭和一只鸡，当主人向它们发出“叫”的命令时，鸭会“嘎嘎嘎”地叫，而鸡会“咯咯咯”地叫。
//这两只动物都会以自己的方式来发出叫声。它们同样“都是动物，并且可以发出叫声”，但根据主人的指令，它们会各自发出不同的叫声。
一般写法：
var makeSound = function( animal ){
if ( animal instanceof Duck ){
console.log( '嘎嘎嘎' );
}else if ( animal instanceof Chicken ){
console.log( '咯咯咯' );
}
};
var Duck = function(){};
var Chicken = function(){};
makeSound( new Duck() ); //嘎嘎嘎
makeSound( new Chicken() ); //咯咯咯
下面是改写后的代码，首先我们把不变的部分隔离出来，那就是所有的动物都会发出叫声：
var makeSound = function( animal ){
animal.sound();
};
然后把可变的部分各自封装起来，我们刚才谈到的多态性实际上指的是对象的多态性：
var Duck = function(){}
Duck.prototype.sound = function(){
console.log( '嘎嘎嘎' );
};
var Chicken = function(){}
Chicken.prototype.sound = function(){
console.log( '咯咯咯' );
};
makeSound( new Duck() ); //嘎嘎嘎
makeSound( new Chicken() ); //咯咯咯
现在我们向鸭和鸡都发出“叫唤”的消息，它们接到消息后分别作出了不同的反应。如果有一天动物世界里又增加了一只狗，这时候只要简单地追加一些代码就可以了，而不用改动以前的makeSound函数，如下所示：
var Dog = function(){}
Dog.prototype.sound = function(){
console.log( '汪汪汪' );
};
makeSound( new Dog() ); //汪汪汪
多态背后的思想是将“做什么”和“谁去做以及怎样去做”分离开来，也就是将“不变的事物”与 “可能改变的事物”分离开来。在这个故事中，动物都会叫，这是不变的，但是不同类型的动物具体怎么叫是可变的。把不变的部分隔离出来，把可变的部分封装起来，这给予了我们扩展程序的能力，程序看起来是可生长的，也是符合开放-封闭原则的，相对于修改代码来说，仅仅增加代码就能完成同样的功能，这显然优雅和安全得多。
关于封装继承的使用，我写了一个关于金额转换的案例，有兴趣的可以去看一下?=>金额转换案例
扫一扫
5万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
