白嫖一时爽,一直白嫖一直爽,如果各位看官大老爷觉得我写的内容对你有所帮助,希望可以给个赞鼓励一下,谢谢啦!!
简介
在编程的过程中,我们主要运用的有函数编程和面向对象编程,而在一些大型的项目中,大部分使用的都是面向对象编程,而这里也就有了类的继承和声明这些个问题出现。
类的声明
ES5中类的声明
在ES5中类的声明主要是通过构造函数来实现的,在声明过程中,主要是通过使用 this,将
let family = function(name){
this.name = name;
this.parent = function(){
console.log('my parent');
}
}
let son = new family('son')
let mother = new family('mother')
console.log(son); //family{name:"son",parent:f}
console.log(mother); //family{name:"mother",parent:f}
当然在在这个类里,也不是所有的属性跟方法都是挂载在实例化对象里面的,还有一些对于实例对象来说公有的方法或者属性,它是挂载在原型对象上的。
let family = function(name){
this.name = name;
this.parent = function(){
console.log('my parent');
}
}
// 实例对象通过原型链拿到 work 这个方法
family.prototype.work = function(){
console.log('my work');
}
这里可以看出ES5里面想要声明一个类是比较麻烦的,那么在ES6里面,又是怎么做声明的呢
ES6中类的声明
在ES6里面,新增了一个叫做 class 的类的声明的语法糖,它的使用方法是这样的。
class family{
constructor(name){
this.name = name
}
work(){
console.log('my work')
}
let son = new family('son')
console.log(son)
这里,重点说明一个点就是,在使用 class 之后,对于想要将方法挂载在原型对象上的时候,已经不需要跟ES5一样那么麻烦了,只需要将方法直接写在constructor的外面就可以了。
说完了ES6中类的声明,我们再来聊聊ES6中新增的另一个东西,它可以让类的属性变为只可以读取。
ES6中的get和set
当你在声明一个类的时候,有些属性,是不希望别人可以随意的对它进行更改的,也就是把它定义为 私有属性,在ES5的时候基本不可能做到,但是在ES6的时候是可以办到的,而这个就是通过 get 来实现。
let _age = 18
class family {
constructor(name){
this.name = name
}
work(){
console.log('my work')
}
get age() {
return _age
}
}
let son = new family('son')
console.log(son.age); //18
在这里定义一个私有属性的时候,用户访问这个属性的入口,跟这个属性的值存储的位置,是不一样的。
而且这时候的age是不会被修改的,例如
son.age = 20
console.log(son.age); //18
但是,这里的age是不是完全没办法改变呢,其实也不是,如果想要改变它的值,就可以通过ES6中的另一个新东西—— set
它的使用方法跟 get 差不多。
let _age = 18
class family {
constructor(name){
this.name = name
}
work(){
console.log('my work')
}
get age() {
return _age
}
set age(value){
_age = value
}
}
let son = new family('son')
son.age = 20
console.log(son.age); //20
其实本质上来说,它并不是直接改变age的值,而是通过改变_age的值,而间接的改变原age的值,有了这个方法之后,就可以有了新的玩法了,例如
set age(value){
if(value>18 && value<26){
_age = value
}
}
类的静态方法的挂载
一般来说,在构造函数里面的方法,是用来操作实例对象的属性的,或者说它与实例对象的属性有关系,如果在类中一个方法跟实例对象的属性完全无关的时候,就可以将它变为静态方法。
这里有一个需要注意的地方:在实例对象上,是没办法找到类的静态方法的
ES5挂载静态方法
ES5中声明和使用类的静态方法是这样的
let family = function(name){
this.name = name;
this.parent = function(){
console.log('my parent');
family.love()
}
}
family.love = function(){
console.log('I love you ');
}
let son = new family('son')
son.parent();
//my parent I love you
ES6挂载静态方法(static)
在ES6中引入了一个新的东西,就是 static ,它就是用来在ES6中给类挂载静态方法的。
class family {
constructor(name){
this.name = name
}
parent(){
console.log('my parent')
family.love()
}
static love(){
console.log('I love you');
}
}
let son = new family('son')
son.parent();
//my parent I love you
使用static的时候,同样的只需要把方法写在class里面,然后在方法的前面加一个 static 就可以了,在代码的阅读性上有了很大的提高。
类的继承
在面向对象编程的过程中,最强大一个东西,就是类的继承,但是它又不太好理解,因为这里涉及到了原型链的问题,但是在ES6里,类的继承,同样也变的不再复杂。
ES5中类的继承
ES5中类的继承,方法有特别多,为了实现完整的继承,本质上就是使用原型链和构造函数结合起来的方式来继承。
let father = function(value){
this.name = value;
this.parent = function(){
console.log('my parent');
}
}
let children = function(value){
father.call(this,value) //构造函数继承
}
children.prototype = father.prototype //原型链继承
let son = new children('son')
console.log(son); //children {name:"son",parent:f}
这里可以看出来ES5的继承是比较复杂的,需要涉及的面比较多,而且这种继承也不是最完美的写法。
ES6中类的继承
在ES6中,有引入了两个新的东西,用来完善类的继承这个事情,它们就是 extends 和 super。
class father{
constructor(value){
this.name = value
}
parent(){
console.log('my parent');
}
}
class children extends father{
constructor(value){
super(value) //构造函数继承
this.age = 18
}
}
这里也有一个需要注意的地方,就是super()必须写constructor里面的最上面,这里涉及到的一个问题是隐式原型和显式原型的问题,在这篇博文就不做过多的解释了。
最后
博主不是科班出身,刚学前端没多长时间如果有哪里写错的,欢迎评论区里面指正,如果觉得这篇文章对你有所帮助,点个赞吧o(╥﹏╥)o