什么是面向对象
面向对象编程的全称为Object Oriented Programming,简称为OOP。
面向对象编程是用抽象方式创建基于现实世界模型的一种编程模式。
面向对象编程可以看作是使用一系列对象相互协作的软件设计。
面向对象程序设计的目的是在编程中促进更好的灵活性和可维护性。凭借其对模块化的重视,面向对象的代码开发更简单,更容易理解。
面向对象编程的三个主要特征是:
- 封装;
- 继承;
- 多态。
所有的程序是由一定的属性和行为对象组成的,不同的对象的访问通过函数调用来完成,对象间所有的交流都是通过方法调用,通过对封装对象数据,提高复用率。
JavaScript 是一种基于原型的面向对象语言,而不是基于类的。正是由于这一根本的区别,其如何创建对象的层级结构以及对象的属性与属性值是如何继承的并不是那么清晰。
基于原型的语言(如 JavaScript )并不存在这种区别:它只有对象。
基于原型的语言具有所谓原型对象( prototypical object )的概念。
原型对象可以作为一个模板,新对象可以从中获得原始的属性。
任何对象都可以指定其自身的属性,既可以是创建时也可以在运行时创建。而且,任何对象都可以作为另一个对象的原型( prototype ) ,从而允许后者共享前者的属性。
封装
所谓封装就是按照要求使用并得到对应的结果,而不需要知道其真实的执行原理是怎么样的。
封装主要用于阐述对象中所包含(或封装)的内容,它们通常由两部分组成:
-
相关的数据(用于存储属性)
-
基于这些数据所能做的事情
继承
继承通常是指类与类之间的关系。如果两个类都有相同的属性或方法,那么可以让一个类继承于另个类,这样就不需要在前者再次定义同样的属性或方法。
创建一个或多个类的专门版本类方式称为继承( JavaScript只支持单继承)。创建的专门版本的类通常叫做子类,另外的类通常叫做父类。
在JavaScript中,继承通过赋予子类一个父类的实例并专门化子类来实现。
多态
不同的对象可以定义具有相同名称的方法,方法是作用于所在的对象中。这种不同对象通过相同方法的调用实现各自行为的能力,被称之为多态。
例如A对象具有sayMe()方法,B对象继承于A对象,那B对象中也具有sayMe()方法。当调用sayMe()方法时,并不知道该方法是A对象还是B对象。但这并不影响代码的正常工作。
构造函数
构造函数又称为构造器或对象模板,是对象中的一个方法,在实例化时构造器被调用。
在JavaScript中函数就可以作为构造器使用,因此不需要特别地定义一个构造器方法。
function Person() {
console.log('Person instantiated');
}
var person = new Person();
-
这里的Person()并不是作为函数,而是构造函数。
-
创建person对象需要使用new关键字。
构造函数的属性
构造函数的属性实际上就是对象的变量。一个对象可以包含多个属性,定义构造函数的属性时使用this关键字。
构造函数的方法
构造函数的方法很像构造函数的属性,不同的是方法是一个函数(或者像函数一样被定义)。定义构造函数的方法时使用this关键字。
代码:
/*
创建构造函数(类的概念) - 用于创建对象(属性和方法)
function 构造函数名称(){
this.属性名 = 属性值;
this.方法名 = function(){
方法体
}
}
this关键字 -> 指代利用当前构造函数创建的对象
*/
function Hero(name){
this.name = name;
this.sayMe = function(){
cosole.log('我是' + name);
}
}
//利用构造函数创建对象
var hero = new Hero('肖德硕');
console.log(hero);
效果:
函数与构造函数
代码:
//1.函数;2.构造函数
function Hero(name){
var v = 100;//局部变量
function n(){}//内部函数
this.name = name;//属性
this.sayMe = function () {//方法
console.log('我是' + name);
}
}
//1.函数调用
Hero();
//2.构造函数使用
var hero = new Hero();
function fun(){
var v = 100;//局部变量
//方法
this.get = function () {
return v;
}
this.set = function(value){
v=value;
}
}
//构造函数
var f = new fun();
console.log(f);
console.log(f.get());
f.set(200);
console.log(f.get());
效果: