javascript面向对象的三大特性

面向过程和面向对象

区别

面向过程：关注的是过程中的每一个环节
- 吃蛋炒饭：买鸡蛋→买米→蒸米→炒蛋→炒米→混合→搅拌→蛋炒饭
面向对象：关注的是让对象做事情
- 找一个对象（老公或老婆）.做蛋炒饭

面向对象编程

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() );     //汪汪汪

多态背后的思想是将“做什么”和“谁去做以及怎样去做”分离开来，也就是将“不变的事物”与 “可能改变的事物”分离开来。在这个故事中，动物都会叫，这是不变的，但是不同类型的动物具体怎么叫是可变的。把不变的部分隔离出来，把可变的部分封装起来，这给予了我们扩展程序的能力，程序看起来是可生长的，也是符合开放-封闭原则的，相对于修改代码来说，仅仅增加代码就能完成同样的功能，这显然优雅和安全得多。

关于封装继承的使用，我写了一个关于金额转换的案例，有兴趣的可以去看一下?=>金额转换案例

javascript面向对象的三大特性相关推荐

Java学习笔记二十五:Java面向对象的三大特性之多态
Java面向对象的三大特性之多态一:什么是多态: 多态是同一个行为具有多个不同表现形式或形态的能力. 多态就是同一个接口,使用不同的实例而执行不同操作. 多态性是对象多种表现形式的体现. 现实中,比 ...
面向对象的三大特性之继承
# 面向对象的三大特性之继承# 当类之间有显著不同,并且较小的类是较大的类所需要的组件时,用组合比较好 (如机器人) # 当类之间有很多相同的功能,提取这些共同的功能做成基类,用继承比较好 (动物-- ...
到底什么是面向对象，面试中怎么回答。面向过程和面向对象的区别是什么。java跨平台特性以及java和C++的区别。面向对象的三大特性——封装、继承和多态。面向对象的高拓展性以及低耦合度怎么体现？
Java语言具有的特点:面向对象.跨平台.多线程以及网络编程 1. 和C++的区别 1.1 Java隐蔽了C++的指针,避免指针直接操作,程序更加安全. 1.2 Java类继承只能单继承,避免了C++ ...
面向对象之三大特性:继承,封装,多态
python面向对象的三大特性:继承,封装,多态. 1. 封装: 把很多数据封装到⼀个对象中. 把固定功能的代码封装到⼀个代码块, 函数, 对象, 打包成模块. 这都属于封装的思想. 具体的情况具体分 ...
Python Day 21 面向对象 (面向对象的三大特性（二）继承，多态，封装，几个装饰器函数)...
Python Day 21 面向对象 (面向对象的三大特性(二)继承,多态,封装,几个装饰器函数) https://mubu.com/doc/1AqL_M0IbW 继承之钻石继承多态封装几个装饰 ...
polymorphism java_Java基础-面向对象第三大特性之多态（polymorphism）
Java基础-面向对象第三大特性之多态(polymorphism) 作者:尹正杰版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.多态概述多态是继封装,继承之后,面向对象的第三大特性,多态的 ...
C++ 面向对象程序三大特性之继承
目录继承的概念继承的定义及使用继承方式和访问权限基类和派生类对象的赋值转换继承中的各成员的作用域派生类的默认成员函数构造函数拷贝构造赋值运算符重载函数析构函数继承与友元继承与静 ...
面向对象的三大特性：封装、继承、多态
面向对象的三大特性面向对象的三大特性:封装.继承.多态封装封装,成员变量的封装,保证了数据的安全性.封装的好处:过滤了不合理的值.屏蔽内部的赋值过程.让外界不必关注内部的细节 Set方法 1. ...
面向对象：三大特性与五大原则
面向对象:三大特性与五大原则面向对象(Object Oriented, OO)是软件开发方法.面向对象的概念和应用已超越了程序设计和软件开发,扩展到如数据库系统.交互式界面.应用结构.应用平台.分布 ...