二:类和对象
在 Java Script 中,万物皆为对象,对象是一组相关属性和方法的集合,一个字符串,一个数组…万物皆为对象
对象有如下特点:
- 对象由一系列属性和方法构成
- 对象的属性即对象拥有的特征,专用名词为属性
- 对象的方法即对象拥有的行为,专用名词为方法
类有如下特点:
类是ES6中新增的概念,可以使用class声明类,再用该类实例化对象
- 类抽象了对象的公共部分,例如手机都有打电话发短信功能,那我们就可以创建一个类,里面的方法为打电话发短信,我们生产手机时生产哪个牌子的就用该类实例化一个对象即可
- 对象是特指的某一个对象,而类是泛指的
三:创建类与生成实例
此版块我们学习创建类与对象的实例化
基本书写格式:(此处举例类名为 Animal)
//创建类
class Animal {
…
}
//实例化对象dog
var dog=new Animal()
<script> //创建类 class Animal{ //填充内容 } //实例化对象 var dog=new Animal(); </script>
注意点:
- 类名最好首字母大写!!
- 类名后直接跟花括号,不需要加小括号
- 实例化对象必须使用关键字new
- 实例化对象要加小括号
- 要先有了类,才能对象实例化,因为在es6中没有变量提升
四:constructor 构造函数
constructor 是类的默认构造函数,用于传参并返回给实例对象,在使用new生成实例对象时自动调用该方法,如果没有在类中明确写出该方法,则系统也会默认创建一个该方法
基本书写格式:(以参数为uname为例)
constructor (uname**){**
this.uname=uname;
}
<script> class Animal{ constructor(uname){ this.uname=uname; } } var dog=new Animal('旺财'); console.log(dog.uname); </script>
传参过程:
- **第一步:**在 new 实例化对象时就会调用 constructor 构造函数,并把参数 ‘旺财’ 传递给构造函数的参数 uname
- **第二步:**于是 uname 就把旺财传递给了 this.uname
- **第三步:**this 指向的就是创建好的实例化对象,于是对象 dog 就有了 uname=旺财
注意点:
- 类内的方法不需要加 function
- 类内的共有属性和方法的使用一定要在前面加 this**(非常非常非常重要)**
五:类中添加共有方法
类中不止只会有constructor构造函数,还会有普通的共有方法
基本书写格式:
eat(****){
…
}
<script> class Animal{ constructor(uname){ this.uname=uname; } eat(food){ console.log(this.uname + '在吃' + food); } } var dog=new Animal('旺财'); var cat=new Animal('咪咪'); dog.eat('骨头'); cat.eat('鲤鱼'); </script>
注意点:
- 可以有参可以无参
- 类中的多个方法之间不需要逗号分隔
- 类中的方法不需要加 function
六:类继承 extends
面向对象三大特点:封装,继承,多态,这里我们讲解继承,继承顾名思义,就是一个子类可以调用父类中的内容
继承书写格式:(此处举例子类继承父类)
class Son extends Father{
…
}
<script> class Father{ constructor(){ } say(){ console.log('hello'); } } class Son extends Father{ } var son1=new Son(); son1.say(); </script>
对于有传参情况的,可能需要用到super关键字,下一个内容将讲到
七:super关键字
super() 作为函数调用时就代表父类的构造函数,ES6要求子类构造函数必须执行super()
7.1 构造函数内的 super 使用
在开始讲解super前我们先看一个报错案例:
例如我们要调用父类的加法函数,但是在子类实例化传参
<script> class Father{ constructor(x,y){ this.x=x; this.y=y; } sum(){ console.log(this.x+this.y); } } class Son extends Father{ constructor(x,y){ this.x=x; this.y=y; } } var son1=new Son(1,5); son1.sum(); </script>
报错原因分析:
- **第一步:**我们实例化了对象son1,new的同时会调用son类的构造函数,并把参数1和5传递给子类的构造函数中,子类构造函数中的this指向对象son1
- **第二步:**而对象son1调用父类sum函数时,sum中的this.x与this.x指向的是父类的构造函数中的值,所以会报错
2. 使用 super关键字 更正错误
只需要将子类构造函数内加入super()关键字并传参进去即可,实际内部产生了以下步骤:
- **第一步:**实例化传参给子类构造函数,构造函数内的函数会自动调用,于是调用了super方法
- **第二步:**子类构造函数内的值传递给了super(),super实际上为调用父类构造函数,于是参数传递给了父类构造函数
- **第三步:**父类sum方法的this指向的是父类构造函数内的值,而此时已经通过super传入了值,故不会再报错
<script> class Father{ constructor(x,y){ this.x=x; this.y=y; } sum(){ console.log(this.x+this.y); } } class Son extends Father{ constructor(x,y){ super(x,y) } } var son1=new Son(1,5); son1.sum(); </script>
构造****函数内使用super注意点:
- super 必须放在子类的 this 之前
7.2 super 调用父类的普通方法
在继承中调用普通方法,我们要记住一个 就近原则 ,那就是在继承中调用一个方法时,要先看子类自身有没有该方法,如果子类自身有而父类没有,就调用子类自身的,如果子类自身没有而父类有,就调用父类,如果都有,就会默认调用子类的,父类的则可以使用super调用
网上学习资料一大堆,但如果学到的知识不成体系,遇到问题时只是浅尝辄止,不再深入研究,那么很难做到真正的技术提升。
一个人可以走的很快,但一群人才能走的更远!不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人,都欢迎加入我们的的圈子(技术交流、学习资源、职场吐槽、大厂内推、面试辅导),让我们一起学习成长!
类自身有没有该方法,如果子类自身有而父类没有,就调用子类自身的,如果子类自身没有而父类有,就调用父类,如果都有,就会默认调用子类的,父类的则可以使用super调用
[外链图片转存中…(img-ghyXjq47-1714771603412)]
[外链图片转存中…(img-zfHyPbp7-1714771603413)]
网上学习资料一大堆,但如果学到的知识不成体系,遇到问题时只是浅尝辄止,不再深入研究,那么很难做到真正的技术提升。
一个人可以走的很快,但一群人才能走的更远!不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人,都欢迎加入我们的的圈子(技术交流、学习资源、职场吐槽、大厂内推、面试辅导),让我们一起学习成长!