2024年前端最新快速搞定前端JS面试 -- 第三章 JS基础-原型和原型链(1)，web前端开发专业课程

前端框架

前端框架太多了，真的学不动了，别慌，其实对于前端的三大马车，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

---

1. Instanceof可以判断引用类型（父子关系）

2. 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. 原型关系：

1. 每个class都有一个显式原型prototype

2. 每个实例都有隐式原型__proto__

3. 实例的__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)]