面向对象 OOP

在这里插入图片描述

面向对象编程 (Object Oriented Programming)

面向对象基本特征

  1. 封装:也就是把客观事物封装成抽象的类,并且类可以把自己的数据和方法只让可信的类或者对象操作,对不可信的进行信息隐藏。

  2. 继承:通过继承创建的新类称为“子类”或“派生类”。继承的过程,就是从一般到特殊的过程。

  3. 多态:对象的多功能,多方法,一个方法多种表现形式。

Javascript是一种基于对象(object-based)的语言。但是,它又不是一种真正的面向对象编程(OOP)语言,因为它的语法中没有class(类)—–es6以前是这样的。所以es5只有使用函数模拟的面向对象。

单例设计模式


单例设计模式
1、表现形式 (对象)

var obj = {
	xxx:xxx
};

2、作用

把描述同一件事务的属性和特性进行 分组,归类(存储在一个堆内存空间中)。因此避免了全局变量之间的冲突和污染
var pattern1 = { name:"xxx"};
var pattern2 = { name:"xxx"};

工厂模式

function createCar(color,wheel){//createCar工厂
    var obj = new Object;//或obj = {} 原材料阶段
    obj.color = color;//加工
    obj.wheel = wheel;//加工
    return obj;//输出产品
}
//实例化
var cat1 = createCar("红色","4");
var cat2 = createCar("蓝色","4");

alert(cat1.color);//红色

构造函数模式

为了解决从原型对象生成实例的问题,Javascript提供了一个构造函数(Constructor)模式。 所谓”构造函数”,其实就是一个普通函数,但是内部使用了this变量。对构造函数使用new运算符,就能生成实例,并且this变量会绑定在实例对象上。
加new执行的函数构造内部变化:自动生成一个对象,this指向这个新创建的对象,函数自动返回这个新创建的对象。

function CreateCar(color,wheel){//构造函数首字母大写
    //不需要自己创建对象了
    this.color = color;//添加属性,this指向构造函数的实例对象
    this.wheel = wheel;//添加属性

    //不需要自己return了
}

//实例化
var cat1 = new CreateCar("红色","4");
var cat2 = new CreateCar("蓝色","4");
alert(cat1.color);//红色

es6 类

概述

在ES6中,class (类)作为对象的模板被引入,可以通过 class 关键字定义类。

class 的本质是 function。

它可以看作一个语法糖,让对象原型的写法更加清晰、更像面向对象编程的语法。

类的使用

<script>
//1、创建类 class  创建一个 明星的类
class Star {
	//类的共有属性写在constructor 
	constructor(uname,age){
		this.uname = uname;
		this.age = age;
	}
	// 在类中添加共有的方法(函数)
	sing(song){
		console.log(this.uname + song)
	}
	//类里面所有的函数不需要写function 
	// 多个函数方法之间不需要添加逗号分隔
}

//2、利用类创建对象 new
var llj = new Star('李连杰'18);
var wj = new Star('吴京'16);
console.log(llj);
console.log(wj);

llj.sing("霍元甲");
wj.sing("战狼")
</script>

总结:

  1. 通过class 关键字创建类,类名最好是首字母大写。
  2. 类里面有个constructor 函数,可以接收传递来的参数,同时返回给实例对象。(this 指向的是 new 的实例)
  3. constructor 函数只要被new 生成实例时,就会自动调用类里面这个函数,如果我们不写这个函数,类也会自动生成这个函数。
  4. 生成实例 new 不能省略。
  5. 最后注意语法规范,创建类,类名后面不要加小括号,生成实例类名后面加小括号,构造函数不需要加function

类的继承

现实生活中继承:子承父业,子继承父亲的姓。
程序中的继承:子类可以继承父类的属性和方法。

extends 关键字

语法:

<script>
// 父类 Father
class Father{
	// 父类
}
// extends 关键字
// 子类 Son
class Son extends Father{
	//子类继承父类
}

</script>

例子:


// 父亲类 Father 
class Father {
	constructor(){
	}
	money(){
		console.log(100)
	}
}

//子类 Son 
class Son extends Father{}

var son = new Son();
son.money(); // 100

super 关键字

super 关键字用于访问和调用对象父类上的函数。 可以调用父类的构造函数,也可以调用父类的普通函数。

语法:

class Father{
	say(){
		return '我是爸爸';
	}
}
class Son extends Father{ // 子类继承了父类的属性和方法
	say(){
		//super.say() // super 调用父类的普通方法
		return super.say() + '的儿子'}
}

var damao = new Son();
console.log(damao.say());

例子_ 计算:

class Father{
	constructor(x,y){
		//这里的this 指向是自己的constructor 
		this.x = x;
		this.y = y;
	}
	sum(){
		console.log(this.x + this.y);
	}
}

class Son extends Father{
	constructor(x,y){
		//这里的this 指向是自己的constructor,不能被父类接收
		//this.x = x;
		// 所以需要用到super关键字,调用父类里面的构造函数constructor
		//super关键字必须放到this 前面
		super(x,y);
		this.x = x;
		this.y = y;
	}
	sub(){
		console.log(this.x - this.y);
	}
}

var son = new Son(2,1);
 son.sum(); // 3
 son.sub(); //1

总结:

  1. 继承中的属性或者方法查找原则:就近原则
  2. 继承中如果实例化子类输出一个方法,先看子类有没有这个方法,如若有先执行子类的。
  3. 继承中,如果子类里没有就去查找父类有无这个方法,如若有就执行父类里面的。
  4. 子类在构造函数中使用super,必须放到this前面(必须先调用父类的构造函数,再使用子类的构造方法)

本就是匆匆过客,又何必耿耿于怀 —— 非凡主力

发布了121 篇原创文章 · 获赞 151 · 访问量 20万+

猜你喜欢

转载自blog.csdn.net/feifanzhuli/article/details/104203679