前端面试准备-7

1.定义class的实现

javascript 复制代码

//定义class
class Person{
  //公有属性
  name
  age = 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：访问对象字面量或类的原型上的属性，或调用父类的构造函数

javascript 复制代码

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

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

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

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

javascript 复制代码

/**
 * 静态属性
 * 定义时：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的使用

javascript 复制代码

// ------------------------------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.寄生组合式继承

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

javascript 复制代码

//寄生组合式继承
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.如何处理异常？

javascript 复制代码

<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地址，返回的Promise
  const res = await fetch('http://hmajax.itheima.net/api/area?'+p.toString())

  if(res.status >=200 && res.status< 300){
    //如何处理响应（JSON）？.json方法解析json.返回Promise
    const data = await res.json()
    console.log(data)
  }else{
    console.log('请求异常',res.status)
  }
})
})
</script>

7.fetch - 提交FormData

·如何设置请求方法

·如何提交数据

javascript 复制代码

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

8.fetch提交JSON

·如何设置请求头

javascript 复制代码

async function func(){
  const headers = new Headers()
  headers.append('key','value')
  const res = await fetch('请求地址',{
    method: '请求方法',
    body: '提交数据',
    headers:headers
  })
}

javascript 复制代码

  document.getElementById('bt').addEventListener('click',async()=>{
    //实例化Headers对象
    const headers = new Headers()
    //append添加key-value
    headers.append('content-type','application/json')

    fetch('http://hmajax.itheima.net/api/register',{
      method:'post',
      headers,
      //JSON.stringify 对象 -> JSON
      body: JSON.stringify({
        username:'山里灵活6666',
        password:'1234565'
      })
    })
  })

9.跨域问题

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

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

①：CORS

由服务器设置响应头

javascript 复制代码

Access-Control-Allow-Origin: https://example.com

//或

Access-Control-Allow-Origin: *

示例**（Node.js Express）**：

javascript 复制代码

app.use((req, res, next) => {
  res.setHeader('Access-Control-Allow-Origin', '*');
  next();
});

②JSONP（只能用于 GET 请求）

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

javascript 复制代码

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

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

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

在 Vite 中配置代理：

javascript 复制代码

// vite.config.js
export default {
  server: {
    proxy: {
      '/api': {
        target: 'http://backend-server.com',
        changeOrigin: true,
        rewrite: path => path.replace(/^\/api/, '')
      }
    }
  }
}

在 Webpack 中配置 devServer：

javascript 复制代码

// webpack.config.js
devServer: {
  proxy: {
    '/api': {
      target: 'http://backend-server.com',
      changeOrigin: true
    }
  }
}

④：Nginx 反向代理

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

javascript 复制代码

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

⑤：PostMessage 通信（iframe 跨域）

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

javascript 复制代码

// 页面A 发送消息
iframe.contentWindow.postMessage('Hello', 'https://b.com');

// 页面B 接收消息
window.addEventListener('message', (event) => {
  console.log(event.data);
});