/*
-
输出
-
吃饭
-
游泳
*/
[]( )继承与多态
------------------------------------------------------------------------
1. 子类继承父类特征子类 extends 父类
2. 当需要父类参数传递时，用子类也可以，这就是多态
/*
-
继承：子类继承父类
-
多态：当需要父类参数时，传入子类的也可以
-
*/
class Animal{
name: string
constructor(name:string) {
this.name=name
}
run(distance=0){
console.log(this.name+"跑了" + distance + "米")
}
}
class Dog extends Animal{
constructor(name:string="dog") {
super(name);
}
run(distance=5){
console.log(this.name+"跑了" + distance + "米")
}
}
class Cat extends Animal{
constructor(name:string="cat") {
super(name);
}
run(distance=10){
console.log(this.name+"跑了" + distance + "米")
}
}
const animal1=new Animal("aniaml")
animal1.run()
const dog1=new Dog()
dog1.run()
const cat1=new Cat()
cat1.run()
const dog2:Animal=new Dog() // 当使用了父元素类型Animal也没报错，这就是因为多态
dog2.run()
/*
-
输出
-
aniaml跑了0米
-
dog跑了5米
-
cat跑了10米
-
dog跑了5米
*/
[]( )类的修饰符
------------------------------------------------------------------------
1. 修饰构造函数，属性，方法是否可以被外部访问
| 修饰符 | 作用范围 |
| :-: | :-: |
| public | 公共的，默认属性，都可以访问 |
| protected | 外部无法访问，子类可以访问 |
| private | 内部使用，外部无法访问，子类也无法访问 |
| readonly | 只读属性，添加后外部就不能修改了，只能在构造函数内修改 |
class Person{
readonly name: string
constructor(name: string) {
this.name=name
}
showName(){
//在类中的普通方法中也不能对只读属性的name重新赋值
// this.name="rose"
console.log(this.name)
}
}
//实例化对象
const p1: Person=new Person("jack")
p1.showName()
//输出jack
// p1.name="rose"
/*
- 这里应为实在类的外部，name为只读的，所以不能再对name赋值
*/
3. 参数属性
* 构造函数中的参数如果使用readonly修饰后，那么参数就叫参数属性
* 构造函数中的参数如果使用readonly修饰后，那么类中就有了一个参数成员
* 构造函数中的参数如果使用readonly修饰后，外部也是无法访问的
* 构造函数中的参数如果使用其他修饰后，那么类中就有了一个相应作用范围的参数成员
class Person{
//虽然类中并没name属性，但这里使用了readonly属性修饰，在类中隐式添加了一个name属性
constructor(readonly name: string='jack') {
this.name=name
}
showName(){
console.log(this.name)
}
}
//实例化对象
const p1: Person=new Person()
p1.showName()
[]( )存取器
----------------------------------------------------------------------
TypeScript 支持通过 getters/setters 来截取对对象成员的访问，它能帮助你有效的控制对对象成员的访问
class Person{
private firstName: string
private lastName: string
constructor(firstName,lastName) {
this.firstName = firstName
this.lastName = lastName
}
get fullName(){
return this.firstName+ "-" + this.lastName
}
set fullName(value){
let val = value.split("-")
this.firstName = val[0]
this.lastName = val[1]
}
}
const p1: Person=new Person("东方","不败")
console.log(p1.fullName)
p1.fullName = "西门-吹雪"
console.log(p1.fullName)
/*
-
输出
-
东方-不败
-
西门- 吹雪
Vue 面试题
1.Vue 双向绑定原理
2.描述下 vue 从初始化页面--修改数据--刷新页面 UI 的过程？
3.你是如何理解 Vue 的响应式系统的?
4.虚拟 DOM 实现原理
5.既然 Vue 通过数据劫持可以精准探测数据变化,为什么还需要虚拟 DOM 进行 diff 检测差异?
6.Vue 中 key 值的作用？
7.Vue 的生命周期
8.Vue 组件间通信有哪些方式?
9.watch、methods 和 computed 的区别?
10.vue 中怎么重置 data?
11.组件中写 name 选项有什么作用？
12.vue-router 有哪些钩子函数?
13.route 和 router 的区别是什么？
14.说一下 Vue 和 React 的认识，做一个简单的对比
15.Vue 的 nextTick 的原理是什么？
16.Vuex 有哪几种属性?
17.vue 首屏加载优化
18.Vue 3.0 有没有过了解？
19.vue-cli 替我们做了哪些工作？
的生命周期
8.Vue 组件间通信有哪些方式?
9.watch、methods 和 computed 的区别?
10.vue 中怎么重置 data?
11.组件中写 name 选项有什么作用？
12.vue-router 有哪些钩子函数?
13.route 和 router 的区别是什么？
14.说一下 Vue 和 React 的认识，做一个简单的对比
15.Vue 的 nextTick 的原理是什么？
16.Vuex 有哪几种属性?
17.vue 首屏加载优化
18.Vue 3.0 有没有过了解？
19.vue-cli 替我们做了哪些工作？
[外链图片转存中...(img-zkYVZ2gN-1720101823341)]