JavaScript 面向对象 class

标题微谈 面向过程编程

	1. 面向过程pop
		优点:
		1.性能比面向对象高,适合跟硬件联系很紧密的东西,例如单片机就是
			采用面向过程编程
		2.缺点:
		没有面向对象易维护,易复用,易扩展
	. 2.面向对象oop
		优点:
		1.以维护、易复用、易扩展、面向对象有封装、继承、多态性的特性,
		可以设计出低耦合的系统使系统更加灵活、易余维护
		2. 缺点:性能比面型过程低
1.创建一个类
	class Star {
		/*
		* @desc constructor 构造函数
		* 当实例类被实例化的时候会自动调用
		* 我们可以把 constructor 看做是这个类的第一个生命周期
		* this 指向你创建的实例 Star 
		*/
		constructor(userName,age){
				this.userName = userName
		}
	}
	// 实例化这个类
	let xiaotutu = new Star( '小兔兔', 20 )
	xiaotutu.userName = 小兔兔
	xiaotutu.age = 20
2.添加公用方法
	class Star {
		/*
		* @desc constructor 构造函数
		* 当实例类被实例化的时候会自动调用
		* 我们可以把 constructor 看做是这个类的第一个生命周期
		* this 指向你创建的实例 Star 
		*/
		constructor(userName,age){
				this.userName = userName
		}
		/*
		* @desc 小兔子会跳
		*/
		jump(desc){
			// console.log('我会跳');
			console.log(this.name + desc)
		}
	}
	// 实例化这个类
	let xiaotutu = new Star( '小兔兔', 20 )
	xiaotutu.userName = 小兔兔
	xiaotutu.age = 20
	//调用方法
	 xiaotutu.jump() = '我会跳'
	//方法传参 问他跳的高不高
	 xiaotutu.jump('你跳的高不高')
	xiaotutu.jump() = '小兔兔你跳的高不高'
3.类的继承
	/**
	* @desc 继承  extends supr()
	*  extends 继承父类中的方法 或者 变量
	*  supr() 调用父类中的 构造函数 或者方法 supr() 必须写在子类	 constructor 中 this 的前面 这是class 规定的 不然报错
	*  当调用 父类中的方法和子类中间的方法名字一致时
	* 优先调用子类中的该方法 如果想调用父类中的方法时候
	* 就近原则
	* 我们需要用到在子类的方法中supr.'父类中的方法名'(参数一,参数二)
	*/
	class A {
		constructor(x,y){
			this.x = x;
			this.y = y;
		}
		money(){
			consloe.log('100块钱')
		},
		num(){
		// 计算求和方法
			consloe.log(this.y + this.x)
		},
		
	}
	class B extends A{
		constructor(x,y){
			this.x = x;
			this.y = y;
		}
	}
	let b = new B()
	b.money()  = '100块钱'

	b.num(1,5) // this指向报错
	解答:
	   因为num方法是A的方法
	   num方法中的this 指向的是A
	   这个时候我们就用到了call方法,去改变this指向
	   但是我没有尝试,有时间我回去尝试一下
	   同样的 class 中的 `supr()`方法可以调用父类中的构造函数
	   class B extends A{
			constructor(x,y){
				supr(x,y)
			}
		}
	就好了!!!!
4. 类的静态方法
	/*
	* @desc static 静态方法声明 
	*  静态属性是通过软拷贝实现继承的。
	* 俗称: 软拷贝 就是拷贝 表面一层 
	*/
	
	// static的使用
	class  A {
		static getPage(){
			console.log('获取到了')
		}
	}
	class B extends A {}
	const b = new B()
	b.getPage()  = '获取到了'

	// static的使用变量
	class  A {
		static num = 100
	}
	class B extends A {
		constuctor(){
			super()
			B.num -- 
		}
	}
	const b = new B()
	ocnst a = new A()
	conselo.log(a.num) = 100
	conselo.log(b.num) = 99
	/* es6  官网介绍说的是 B 继承了 A 的静态方法,
	* 然而B 也继承了A 的 属性 num 
	* 所以 A 和 B 是隔离的 
	* 个人理解 就是 A 的作用域中 有 num 
	* B 把 A 拷贝了 一份 包括 静态方法 
	* 然:B 生成了 一个新的 作用域,作用域中同有 num 
	/
5. 类的声明私有属性
	/*
	* @desc 私有属性就是 指当前类 中 自己的 不给别人的 
	*/

class A  {
    #num = 0
    nums = 0
}
class B extends A {}
const b = new B(
// 以下报错说 #nums 不在 这个 class 类中 
console.log = '#nums' must be declared in an enclosing class 
console.log(b.nums); = 0
// 1.19 电脑没电 后续补上
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值