2024年前端最新快速搞定前端JS面试 -- 第三章 JS基础-原型和原型链，2024年最新Web前端基础面试题2024

结尾

学习html5、css、javascript这些基础知识，学习的渠道很多，就不多说了，例如，一些其他的优秀博客。但是本人觉得看书也很必要，可以节省很多时间，常见的javascript的书，例如：javascript的高级程序设计，是每位前端工程师必不可少的一本书，边看边用，了解js的一些基本知识，基本上很全面了，如果有时间可以读一些，js性能相关的书籍，以及设计者模式，在实践中都会用的到。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

// 子类

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. 原型图解：

2. 通过这个图再看instanceof

顺着隐式原型向上找，看是否能找到显式原型，如果能对应到，则instanceof成立

五、重要提示

---

1. Class是ES6语法规范，由ECMA委员会发布

2. ECMA只规定语法规则，即我们代码的书写规范，不规定如何实现

3. 以上实现方式都是V８引擎的实现方式，也是主流的

六、题目解答

---

1. 如何判断一个变量是不是数组？

使用a instanceof Array

2. 手写一个简易的jQuery，考虑插件和扩展性？

class jQuery {

constructor(selector) {

const result = document.querySelectorAll(selector)

const length = result.length

for (let i = 0; i < length; i++) {

this[i] = result[i]

}

this.length = length

this.selector = selector

}

get(index) {

return this[index]

}

each(fn) {

for (let i = 0; i < this.length; i++) {

const elem = this[i]

fn(elem)

}

}

on(type, fn) {

return this.each(elem => {

elem.addEventListener(type, fn, false)

})

}

// 扩展很多 DOM API

}

// 插件

jQuery.prototype.dialog = function (info) {

alert(info)

}

// 扩展 “造轮子”

class myJQuery extends jQuery {

constructor(selector) {

super(selector)

}

// 扩展自己的方法

addClass(className) {

}

style(data) {

}

}

3. Class的原型本质，怎么理解？

最后

一个好的心态和一个坚持的心很重要，很多冲着高薪的人想学习前端，但是能学到最后的没有几个，遇到困难就放弃了，这种人到处都是，就是因为有的东西难，所以他的回报才很大，我们评判一个前端开发者是什么水平，就是他解决问题的能力有多强。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

分享一些前端面试题以及学习路线给大家

最后

一个好的心态和一个坚持的心很重要，很多冲着高薪的人想学习前端，但是能学到最后的没有几个，遇到困难就放弃了，这种人到处都是，就是因为有的东西难，所以他的回报才很大，我们评判一个前端开发者是什么水平，就是他解决问题的能力有多强。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

分享一些前端面试题以及学习路线给大家

[外链图片转存中…(img-WAF30iv7-1715617951704)]

[外链图片转存中…(img-urq9gZpa-1715617951704)]