JS面试题|[2024-12-26]

1.事件委托是什么

又叫事件代理,原理就是直接利用了事件冒泡的机制来实现,也就是说把子元素的事件绑定到了父元素的身上,如果子元素阻止了事件冒泡,那么委托也就不成立了。

阻止事件冒泡:event.stopPropagation()

addEventListener('click',函数名,true/false) 默认是false(事件冒泡),true(事件捕获)

事件冒泡的好处:提高性能,减少事件的绑定,也就是减少了内存的占用。

2.基本数据类型和引用数据类型的区别

基本数据类型:String、Number、Boolean、undefined、null

        基本数据类型保存在栈内存中,保存的就是一个具体的值

引用数据类型:Object、Function、Array

        保存在堆内存当中,声明一个引用类型的变量,它保存的是引用数据的地址

        假如声明两个引用类型同时指向了一个地址的时候,修改其中一个那么另外一个也会改变

var obj = {name:'张三',age:18
}
var obj1 = obj;
obj1.name = '李四';
console.log(obj);
console.log(obj1);------------------
{name:'李四',age:18}
{name:'李四',age:18}

3.说一下原型链

原型就是一个普通对象,它是为构造函数的实例共享属性和方法;所有实例中引用的原型都是同一个对象

使用prototype可以把方法挂在原型上,内存只保存一份

function Person(){this.say = function(){console.log('唱歌');}
}
Person.prototype.look = function(){console.log('红楼梦');
}
var p1 = new Person();
var p2 = new Person();
p1.say();
p2.say();// 调用几次,内存中就保存几次
p1.look();
p2.look();// 内存中只保存一次

__proto__可以理解为指针,实例对象中的属性,指向了构造函数的原型(prototype)

        p1.__proto__ === Person.prototype  ----  true

一个实例对象在调用属性和方法的时候,会依次从实例本身、构造函数原型、原型的原型上去查找

4.new操作符具体做了什么

1.先创建一个空对象

2.把空对象和构造函数通过原型链进行链接

3.把构造函数的this绑定到新的空对象身上

4.根据构造函数返回的类型判断,如果是值类型,则返回对象,如果是引用类型,就要返回这个引用类型

function newFun(Fun,...args){// 1.先创建一个空对象let newObj = {};// 2.把空对象和构造函数通过原型链链接newObj.__proto__ = Fun.prototype;// 3.把构造函数的this绑定到新的空对象身上const result = Fun.apply(newObj,args);// 4.根据构造函数返回的类型判断,如果是值类型,则返回对象,如果是引用类型,就要返回这个引用类型return result instanceof Object ? result : newObj;
}function Person(name){this.name = name;
}
Person.prototype.say = function(){consoel.log('123456');
}
const p1 = newFun(Person,'张三');
p1.say(); // 123456
console.log(p1); // Person {name:'张三'}

 5.JS是如何实现继承的?

1.原型链继承

        让一个构造函数的原型是另一个类型的实例,那么这个构造函数new出来的实例就具有该实例的属性。

function Parent(){this.isShow = true;this.info = {name:'abc',age:18};
}
Parent.prototype.getInfo = function(){console.log(this.info);console.log(this.isShow);
}
function Child(){}
Child.prototype = new Parent();let child1 = new Child();
child1.info.gender = '男';
child1.getInfo(); //{name:'abc',age:18,gender:'男'} truelet child2 = new Child();
child2.isShow = false;
conosle.log(child2.info.gender); // 男
child2.getInfo(); //{name:'abc',age:18,gender:'男'} false

        优点:写法方便简单,容易理解

        缺点:对象实例共享所有继承的属性和方法。无法向父类构造函数传参

2.借用构造函数继承

        在子类型构造函数的内部调用父类型构造函数;使用apply() 或 call() 方法将父对象的构造函数绑定在子对象上。

function Parent(gender){this.info = {name:'yyy',age:18,gender:gender}
}function Child(gender){Parent.call(this,gender);
}let child1 = new Child('男');
child1.info.nickname = 'zzzz';
console.log(child1.info); // {name:'yyy',age:18,gender:'男',nickname:'zzzz'}let child2 = new Child('女');
console.log(child2.info); // {name:'yyy',age:18,gender:'女'}

        优点:解决了原型链实现继承的不能传参的问题和父类的原型共享的问题

        缺点:方法都在构造函数中定义,因此无法实现函数复用

                   在父类的原型中定义的方法,对于子类型而言是不可见的,结果所有类型都是

                   只能使用构造函数模式     

3.组合式继承

        将 原型链 和 借用构造函数 的组合到一起。使用原型链实现对原型属性和方法的继承,而通过借用构造函数来实现对实例属性的继承。这样,既通过在原型上定义方法实现了函数复用,又能够保证每一个实例都有自己的属性。

function Parent(gender){console.log('执行次数');this.info = {name:'yyy',age:18,gender:gender}
}Parent.prototype.getInfo = function(){ // 使用原型链继承原型上的属性和方法console.log(this.info.name,this.info.age);
}function Child(gender){Parent.call(this,gender); // 使用构造函数法传递参数
}Child.prototype = new Parent();let child1 = new Child('男');
child1.info.nickname = 'zzzz';
child1.getInfo(); // 'yyy' 18
console.log(child1.info); // {name:'yyy',age:18,gender:'男',nickname:'zzzz'} let child2 = new Child('女');
console.log(child2.info); // {name:'yyy',age:18,gender:'女'}

        优点:解决了原型链继承和借用构造函数继承造成的影响

        缺点:无论在什么情况下,都会调用两次父类构造函数,一次是在创建子类原型的时候,另一次是在子类构造函数内部

4.ES6的class类继承

        Class通过extends关键字实现继承,其实质就是先创造出父类的this对象,然后用子类的构造函数修改this

        子类的构造方法中必须调用super方法,且只有在调用了super()之后才能使用this,因为子类的this对象是继承父类的this对象,然后对其进行加工,而super方法表示的是父类的构造函数,用来新建父类的this对象

class Animal{constructor(kind){this.kind = kind;}getKind(){return this.kind;}
}// 继承Animal
class Cat extends Animal{constructor(name){// 子类的构造方法中必须先调用super方法super('cat');this.name = name;}getCatInfo(){console.log(this.name + ':' + super.getKind())}
}
const cat1 = new Cat('buding'); 
cats.getCatInfo(); // buding:cat

        优点:语法简单易懂,操作更方便

        缺点:并不是所有的浏览器都是支持class关键字

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/496057.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

upload-labs关卡记录12

直接上传一句话木马,发现提示: 很明显这是一个白名单,而且不是前端的js检查,而是服务端的检查,因此我们使用bp抓包,改一下文件类型试试: 找到包之后,我们对content-type进行一个更改…

ArkTs组件(2)

一.下拉列表组件&#xff1a;Select 1.接口 Select(options: Array<SelectOption>) 参数名类型必填说明optionsArray<SelectOption>是设置下拉选项。 SelectOption对象说明 名称类型必填说明valueResourceStr是 下拉选项内容。 iconResourceStr否 下拉选项图片…

J9学习打卡笔记

&#x1f368; 本文为&#x1f517;365天深度学习训练营 中的学习记录博客&#x1f356; 原作者&#xff1a;K同学啊 IInception v3算法实战 网络结构InceptionAInceptionBInceptionCReductionAReductionB辅助分支个人总结 import os, PIL, random, pathlib import torch impor…

软考和 PMP 哪个含金量更高点?

软考高项比较适用于计算机 IT 行业&#xff0c;而 PMP 不受行业限制&#xff0c;各行各业都适用&#xff0c;没有哪个含金量更高的说法 至于哪个更合适&#xff0c;看你想去国企还是民企&#xff0c;国企软考吃香&#xff0c;外企PMP 吃香 下面说下两者具体有什么区别&#x…

面向微服务的Spring Cloud Gateway的集成解决方案:用户登录认证与访问控制

&#x1f3af;导读&#xff1a;本文档详细描述了一个基于Spring Cloud Gateway的微服务网关及Admin服务的实现。网关通过定义路由规则&#xff0c;利用负载均衡将请求转发至不同的后端服务&#xff0c;并集成了Token验证过滤器以确保API的安全访问&#xff0c;同时支持白名单路…

NLP 中文拼写检测纠正论文 C-LLM Learn to CSC Errors Character by Character

拼写纠正系列 NLP 中文拼写检测实现思路 NLP 中文拼写检测纠正算法整理 NLP 英文拼写算法&#xff0c;如果提升 100W 倍的性能&#xff1f; NLP 中文拼写检测纠正 Paper java 实现中英文拼写检查和错误纠正&#xff1f;可我只会写 CRUD 啊&#xff01; 一个提升英文单词拼…

kong网关使用pre-function插件,改写接口的返回数据

一、背景 kong作为api网关&#xff0c;除了反向代理后端服务外&#xff0c;还可对接口进行预处理。 比如本文提及的一个小功能&#xff0c;根据http header某个字段的值&#xff0c;等于多少的时候&#xff0c;返回一个固定的报文。 使用到的kong插件是pre-function。 除了上…

Linux:进程概念

1.冯诺依曼体系结构 结论&#xff1a; --- CPU不和外设直接打交道&#xff0c;和内存直接打交道。 --- 所有的外设&#xff0c;有数据需要收入&#xff0c;只能载入到内存中&#xff1b;内存写出&#xff0c;也一定是写道外设中。 --- 为什么程序要运行必须加载到内存&#xf…

结构体(初阶)

结构体&#xff1a; 结构体类型的声明 结构体初始化 结构成员访问 结构体传参 1.结构体的声明 1.1结构的基础知识 结构是一些值的集合&#xff0c;这些值称为成员变量。结构的每个成员可以是不同类型的变量。 1.2结构的声明 struct tag { member - list; }variable-lis…

设计模式的主要分类是什么?请简要介绍每个分类的特点。

大家好&#xff0c;我是锋哥。今天分享关于【设计模式的主要分类是什么&#xff1f;请简要介绍每个分类的特点。】面试题。希望对大家有帮助&#xff1b; 设计模式的主要分类是什么&#xff1f;请简要介绍每个分类的特点。 1000道 互联网大厂Java工程师 精选面试题-Java资源分…

显示 Windows 任务栏

显示 Windows 任务栏 1. 取消勾选自动隐藏任务栏2. 重启 Windows 资源管理器References 1. 取消勾选自动隐藏任务栏 Windows 任务栏具有自动隐藏功能&#xff0c;不使用时自动隐藏&#xff0c;使用时显示。 鼠标右键单击桌面上的空白区域&#xff0c;个性化 -> 任务栏。不…

c# RSA加解密工具,.netRSA加解密工具

软件介绍 名称: c# RSA加解密工具,.netRSA加解密工具依赖.net版本: .net 8.0工具类型: WinForm源码下载 c# RSA加解密工具,.netRSA加解密工具 依赖项 WinFormsRSA.csproj <Project

STM32-笔记17-PWM波型

一、介绍 PWM波形&#xff08;Pulse Width Modulation&#xff0c;脉冲宽度调制波形&#xff09;是一种占空比可变的脉冲波形。这种调制方式通过改变脉冲的宽度来控制电路中的信号强度和频率。具体来说&#xff0c;PWM波形中的高电平持续时间和低电平持续时间可以根据需要进行调…

【java面向对象编程】第九弹----抽象类、接口、内部类

笔上得来终觉浅,绝知此事要躬行 &#x1f525; 个人主页&#xff1a;星云爱编程 &#x1f525; 所属专栏&#xff1a;javase &#x1f337;追光的人&#xff0c;终会万丈光芒 &#x1f389;欢迎大家点赞&#x1f44d;评论&#x1f4dd;收藏⭐文章 一、抽象类 1.1基本介绍 &…

重温设计模式--迭代器模式

文章目录 迭代器模式&#xff08;Iterator Pattern&#xff09;概述迭代器模式的结构迭代器模式UML图C 代码示例应用场景 迭代器模式&#xff08;Iterator Pattern&#xff09;概述 定义&#xff1a; 迭代器模式是一种行为型设计模式&#xff0c;它提供了一种方法来顺序访问一个…

普通人怎么入门学习并使用AI?

前言 作为普通人看着AI一天一天变革&#xff0c;心急如焚&#xff0c;未来但是就是不知道怎么才算真正进入了AI&#xff0c;使用AI....作为从头至尾追随AI脚步的码农有几点小建议~ 一、&#x1f4bb;使用 AI 网站或软件&#xff0c;解决实际问题 不管用哪种AI&#xff0c;先用…

【Compose multiplatform教程08】【组件】Text组件

查看全部组件https://blog.csdn.net/b275518834/article/details/144751353 Text 功能说明&#xff1a;用于在界面上显示文本内容&#xff0c;支持设置字体、大小、颜色、样式&#xff08;如加粗、斜体、下划线&#xff09;等属性&#xff0c;满足不同的文本展示需求&#xf…

贪心算法(常见贪心模型)

常见贪心模型 简单排序模型 最小化战斗力差距 题目分析&#xff1a; #include <bits/stdc.h> using namespace std;const int N 1e5 10;int n; int a[N];int main() {// 请在此输入您的代码cin >> n;for (int i 1;i < n;i) cin >> a[i];sort(a1,a1n);…

如何通过 360 驱动大师检查自己电脑上的显卡信息

在深入探讨如何查看显卡信息之前&#xff0c;首先需要了解显卡的基本概念。显卡&#xff08;Graphics Processing Unit, GPU&#xff09;&#xff0c;是计算机中负责处理图形输出到显示器的重要硬件。根据其集成度和性能&#xff0c;显卡通常被分为两类&#xff1a; 集成显卡&…

解线性方程组

直接三角分解&#xff08;LU分解&#xff0c;Doolittle分解&#xff09; ATM分解&#xff08;追赶法&#xff0c;Crout分解&#xff0c;克劳特分解&#xff09; 平方根法&#xff08;Cholesky分解&#xff0c;乔列斯基分解&#xff09; 矩阵的范数