前端框架
前端框架太多了,真的学不动了,别慌,其实对于前端的三大马车,Angular、React、Vue 只要把其中一种框架学明白,底层原理实现,其他两个学起来不会很吃力,这也取决于你以后就职的公司要求你会哪一个框架了,当然,会的越多越好,但是往往每个人的时间是有限的,对于自学的学生,或者即将面试找工作的人,当然要选择一门框架深挖原理。
以 Vue 为例,我整理了如下的面试题。
如果你觉得对你有帮助,可以戳这里获取:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
一、class和继承
1. 类
Constructor 声明属性
属性
方法
// 类
class Student {
constructor(name, number) {
this.name = name
this.number = number
// this.gender = ‘male’
}
sayHi() {
console.log(
姓名 ${this.name} ,学号 ${this.number}
// 模板字符串
)
// console.log('姓名 ’ + this.name + ’ ,学号 ’ + this.number)
}
}
}
// 通过类 new 对象/实例
const xialuo = new Student(‘夏洛’, 100)
console.log(xialuo.name)
console.log(xialuo.number)
xialuo.sayHi()
const madongmei = new Student(‘马冬梅’, 101)
console.log(madongmei.name)
console.log(madongmei.number)
madongmei.sayHi()
2. 继承
Extends
Super 继承父类属性
扩展或重写方法
// 父类
class People {
constructor(name) {
this.name = name
}
eat() {
console.log(${this.name} eat something
)
}
}
// 子类
class Student extends People {
constructor(name, number) {
super(name)
this.number = number
}
sayHi() {
console.log(姓名 ${this.name} 学号 ${this.number}
)
}
}
// 子类
class Teacher extends People {
constructor(name, major) {
super(name)
this.major = major
}
teach() {
console.log(${this.name} 教授 ${this.major}
)
}
}
// 实例
const xialuo = new Student(‘夏洛’, 100)
console.log(xialuo.name)
console.log(xialuo.number)
xialuo.sayHi()
xialuo.eat()
// 实例
const wanglaoshi = new Teacher(‘王老师’, ‘语文’)
console.log(wanglaoshi.name)
console.log(wanglaoshi.major)
wanglaoshi.teach()
wanglaoshi.eat()
二、类型判断和instanceof
-
Instanceof可以判断引用类型(父子关系)
-
Object可以认为是所有class的父类
Xialuo instanceof Student //true
Xialuo instanceof Object //true
[] instanceof Array //true
[] instanceof Object //true
{} instanceof Object //true
三、原型
// class实际上是函数
typeof People // ‘function’
typeof Student // ‘function’
// 隐式原型和显示原型
console.log( xialuo.proto ) // 隐式原型
console.log( Student.prototype ) // 显式原型
console.log( xialuo.proto === Student.prototype )
1. 原型图解:
****解释:****在定义Student时会有一个函数,包含一个显示原型指向Student.prototype,并把方法sayHi()放进去,通过new Student生成一个对象xialuo之后,xialuo的属性name和number会直接放在对象里面,而方sayhi()是通过__proto__(隐式原型)来指向显式原型获取
2. 原型关系:
-
每个class都有一个显式原型prototype
-
每个实例都有隐式原型__proto__
-
实例的__proto__指向对应class的prototype
3. 基于原型的执行规则
获取属性xialuo.name执行方法xialuo.sayHi()时
先在自身属性和方法寻找
如果找不到则自动去__proto__中去查找
四、原型链
console.log( Student.prototype.proto ) // 隐式原型
console.log( People.prototype ) // 显式原型
console.log( Student.prototype.proto === People.prototype )
1. 原型图解:
最后
正值招聘旺季,很多小伙伴都询问我有没有前端方面的面试题!
开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
rk,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1NhYnJpbmFfY2M=,size_16,color_FFFFFF,t_70)
最后
正值招聘旺季,很多小伙伴都询问我有没有前端方面的面试题!
开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
[外链图片转存中…(img-zklqiDHE-1715027396901)]