【面试题】原型和原型链

1. 如何用class实现继承

// 父类
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 ll = new Student('李雷', 1234)
console.log(ll.name)
console.log(ll.number)
ll.sayHi()
ll.eat()

// 实例
const wanglaoshi = new Teacher('王老师', '语文')
console.log(wanglaoshi.name)
console.log(wanglaoshi.major)
wanglaoshi.teach()
wanglaoshi.eat()
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44

效果
在这里插入图片描述

2. 类型判断 - instanceof

instanceof 是 JavaScript 中的一个操作符，用于检测一个对象是否是某个类(class)的实例。Object类是所有类的父类。

console.log(ll instanceof Student)    // true
console.log(ll instanceof People)     // true
console.log(ll instanceof Object)     // true

console.log([] instanceof Array)   // true
console.log([] instanceof Object)  // true

console.log({} instanceof Object)   // true
1
2
3
4
5
6
7
8

3. 原型

实例的隐式原型(__proto__)指向构造函数的显示原型(prototype)。

// class 实际上是函数，可见是语法糖
console.log(typeof People)
console.log(typeof Student)

// 隐式原型
console.log(ll.__proto__)
// 显示原型
console.log(Student.prototype)

console.log(ll.__proto__ === Student.prototype)
1
2
3
4
5
6
7
8
9
10

在这里插入图片描述
获取属性ll.name或执行方法ll.sayHi()、ll.eat()时，先在自身属性和方法中寻找，如ll.name和ll.sayhi()都在自身属性和方法。如果找不到，则自动去__proto__中查找，如ll.eat()。

4. 原型链

// 原型链
console.log(Student.prototype.__proto__)
console.log(People.prototype)
console.log(People.prototype === Student.prototype.__proto__)
1
2
3
4

在这里插入图片描述

5. 手写简易的jQuery

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>手写简易jQuerytitle>
head>
<body>
    <div>一段文字 1div>
    <div>一段文字 2div>
    <div>一段文字 3div>
    <script>
        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)
                })
            }
        }

		// 插件
        jQuery.prototype.dialog = function(info){
            alert(info)
        }

        // 造轮子
        class myJQuery extends jQuery{
            constructor(selector){
                super(selector)
            }
            // 扩展自己的方法
            addClass(className){

            }
            style(data){
                
            }
        }
    script>
body>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60

在这里插入图片描述

相关阅读:
金融新应用潮涌，银行如何加强数据安全韧性？
学生个人网页设计作品：旅游网页设计与实现——成都旅游网站4个页HTML+CSS web前端网页设计期末课程大作业学生DW静态网页设计学生个人网页设计作品
 谷歌“坟墓”又添新成员，停止对 OnHub 路由器支持
 【C++学习笔记】1.1 命名空间
 Java开发过程中常用Linux命令总结
 网络流问题详解
 nginx 配置~~~本身就是一个静态资源的服务器
 egg框架使用(二)
NOIP 2012 普及组初赛第28题排列数
 一千题，No.0077（计算谱半径）
原文地址：https://blog.csdn.net/zx1041561837/article/details/127977236