当前位置： 首页 > ds >正文

前端面试准备-7

ds 2025/7/27 2:38:02

1.定义class的实现

//定义class
class Person{//公有属性nameage = 18//构造函数constructor(name){//构造函数内部的this实例化对象this.name = name//动态添加属性（不推荐）this.food = ['🐂','🐎','🐏']}//公有方法sayHi(){console.log('你好: '+this.name)}
}
const p = new Person('山里灵活')
p.sayHi()
console.log(p)

2.class实现继承

extends：用于类声明或类表达式中，创建一个类，该类是另一个类的子类

super：访问对象字面量或类的原型上的属性，或调用父类的构造函数

class Student extends Person{sexconstructor(name,sex){super(name)this.sex = sex}
}

3.class静态属性和私有属性

静态：类通过static关键字定义静态方法。不能再类的实例上调用静态方法，而必须类本身调用。

私有：类属性默认是公有，但可以使用增加哈希前缀#的方法来定义私有类字段，声明和访问时也需要加上。

/*** 静态属性* 定义时：static开头* 访问时：通过类来访问* 私有属性* 定义时： #开头* 使用时： #开头，和定义的名字相同，只能在类的内部使用*/
class Test{static stInfo = '静态'static stMethod(){console.log('我是静态方法')}#prInfo = '私有'#prMethod(){console.log('我是私有方法')}testPr(){console.log(this.#prInfo)this.#prMethod()}
}//访问静态属性和方法
Test.stMethod()
console.log(Test.stInfo)const t = new Test()
t.testPr()

4.Object.create的使用

// ——————————Object.create测试——————————const foods ={name:'泥吧',eat(){console.log(`他们朝我扔${this.name}`)}
}//Object.create 静态方法
//将一个对象作为原型，创建一个新的对象
//参数1 ： 源对象
//参数2 ： 可以用来覆盖源对象中的特定属性/方法
const nFood1 = Object.create(foods)
console.log(nFood1)
nFood1.eat()  // 打印他们朝我扔泥吧
const nFood2 = Object.create(foods,{eat:{value(){console.log('我拿泥吧做蛋挞~')}}
})
console.log(nFood2)
nFood2.eat()  //打印我拿泥吧做蛋挞~

5.寄生组合式继承

所谓寄生组合式继承，即通过借用构造函数来继承属性，通过原型链的混成形式来继承方法。

//寄生组合式继承
function Persons(name){this.name = name
}
Persons.prototype.sayHello = function () {console.log(`hello,my name is ${this.name}`)
}// —————————— 寄生组合式继承 核心代码 ——————————
//通过构造函数继承属性
// 组合式继承：借用构造函数，原型链
// 寄生：父类的原型中，有子类的构造函数
function Students(name){Persons.call(this,name)
}
//通过原型链继承方法
const prototype = Object.create(Persons.prototype,{constructor:{value: Students}
})
// 将创建的原型。赋值给子类的原型
Students.prototype = prototype
const ss = new Students('vw50')
console.log(ss)
console.log(ss.sayHello())

6.fetch核心语法

fetch是浏览器内置的api，用于发送网络请求

能进行发送网络请求的工具：

AJAX   vs   axios  vs  fetch

  • AJAX：基于XMLHttpRequest收发请求，使用较为繁琐
  • axios：基于Promise的请求客户端，在浏览器和node中均可使用，使用简便，功能强大
  • fetch：内置api，基于Promise，用法和axios类似，功能更为简单

 * fetch核心语法
 * 1.如何发送请求
 * 2.如何处理响应（JSON）？
 * 3.如何处理异常？

<template><h3>fetch核心语法</h3><button class="btn">测试</button>
</template>
<script setup>
import { onMounted } from 'vue'/*** fetch核心语法* 1.如何发送请求* 2.如何处理响应（JSON）？* 3.如何处理异常？*/
onMounted(()=>{document.querySelector('.btn').addEventListener('click',async()=>{const p = new URLSearchParams({pname:'广东省',cname:'深圳市'})//1.如何发送请求？默认是get方法，参数1，url地址，返回的Promiseconst res = await fetch('http://hmajax.itheima.net/api/area?'+p.toString())if(res.status >=200 && res.status< 300){//如何处理响应（JSON）？.json方法解析json.返回Promiseconst data = await res.json()console.log(data)}else{console.log('请求异常',res.status)}
})
})
</script>

7.fetch - 提交FormData

·如何设置请求方法

·如何提交数据

async function fuc(){const res = await fetch('请求地址',{method:'请求方法',body:'提交数据'})
}

8.fetch提交JSON

·如何设置请求头

async function func(){const headers = new Headers()headers.append('key','value')const res = await fetch('请求地址',{method: '请求方法',body: '提交数据',headers:headers})
}
  document.getElementById('bt').addEventListener('click',async()=>{//实例化Headers对象const headers = new Headers()//append添加key-valueheaders.append('content-type','application/json')fetch('http://hmajax.itheima.net/api/register',{method:'post',headers,//JSON.stringify 对象 -> JSONbody: JSON.stringify({username:'山里灵活6666',password:'1234565'})})})

9.跨域问题

前端的跨域问题是指浏览器基于同源策略阻止网页发起不同源的请求，防止恶意访问用户信息。

同源指的是：协议、域名、端口号必须完全相同。

①：CORS

  • 由服务器设置响应头

Access-Control-Allow-Origin: https://example.com//或Access-Control-Allow-Origin: *
  • 示例（Node.js Express）：
app.use((req, res, next) => {res.setHeader('Access-Control-Allow-Origin', '*');next();
});

②JSONP（只能用于 GET 请求）

利用 <script> 标签不受同源限制的特性。

<script src="http://example.com/api?callback=handleData"></script>
<script>function handleData(data) {console.log(data);}
</script>

③：代理转发（开发环境常用）

通过本地开发服务器代理接口，绕过跨域。

  • 在 Vite 中配置代理：
// vite.config.js
export default {server: {proxy: {'/api': {target: 'http://backend-server.com',changeOrigin: true,rewrite: path => path.replace(/^\/api/, '')}}}
}
  • 在 Webpack 中配置 devServer：
// webpack.config.js
devServer: {proxy: {'/api': {target: 'http://backend-server.com',changeOrigin: true}}
}

④：Nginx 反向代理

生产环境跨域推荐做法，配置示例：

location /api/ {proxy_pass http://backend-server.com/;add_header Access-Control-Allow-Origin *;
}

⑤：PostMessage 通信（iframe 跨域）

用于两个不同源页面之间通信。

// 页面A 发送消息
iframe.contentWindow.postMessage('Hello', 'https://b.com');// 页面B 接收消息
window.addEventListener('message', (event) => {console.log(event.data);
});

http://www.xdnf.cn/news/12414.html

相关文章：

  • 从 Stdio 到 HTTP SSE，在 APIPark 托管 MCP Server
  • PasteForm(ABP)框架之实现更加灵活的类似多租户的归属过滤功能，比如只能查看自己的相关数据
  • Abaqus分析步与输出：
  • 【leetcode】347. 前k个高频元素
  • 利率的计量
  • VIN码车辆识别码解析接口如何用C#进行调用？
  • 如何利用Elastic Stack（ELK）进行安全日志分析
  • 常见串口种类介绍
  • 一、ES6-let声明变量【解刨分析最详细】
  • 右值引用和移动语义
  • 酷黑NBA足球赛事直播源码体育直播M39模板赛事源码
  • redis数据过期策略、淘汰策略
  • RADIUS-管理员获取共享密钥
  • 【CPU】英特尔酷睿Ultra 5 225H与Ultra7 258V（Lunar Lake架构）PK
  • [蓝桥杯]航班时间
  • 【.net core】天地图坐标转换为高德地图坐标（WGS84 坐标转 GCJ02 坐标）
  • 六、数据库的安全性
  • C++11 中 final 和 override 从入门到精通
  • 在 Spring Boot 中使用 JSP
  • 【实施指南】Android客户端HTTPS双向认证实施指南
  • 如何排查和解决PHP连接数据库MYSQL失败写锁的问题
  • Hive中ORC存储格式的优化方法
  • GC1809：高性能24bit/192kHz音频接收芯片解析
  • ubuntu2404 gpu 没接显示器,如何保证远程显示的分辨率
  • 在Coze平台中 API是什么？插件是什么？它们是一类吗？
  • Java-IO流之转换流详解
  • w381银行管理系统
  • Prime Day前后计划提报BD
  • 应用app的服务器如何增加高并发
  • 【Linux】为 Git 设置 Commit 提交模板方法，可统一个人或者项目的提交风格