Rumah > Artikel > hujung hadapan web > Ringkaskan beberapa soalan temuduga front-end biasa (dengan jawapan) untuk membantu anda menyatukan pengetahuan anda!
Tujuan utama penerbitan artikel adalah untuk memantapkan pengetahuan saya dan menjadi lebih mahir Semuanya berdasarkan pemahaman saya sendiri dan kajian dalam talian, saya harap anda boleh beri saya nasihat. Di bawah ialah ringkasan soalan temuduga biasa yang telah saya rumuskan, saya akan terus mengemas kininya untuk menggesa diri saya
Dalam bahasa js, setiap objek contoh mempunyai atribut __proto__
, yang menunjuk ke objek prototaipnya, dan pembina objek contoh ini mempunyai prototaip Atribut prototype
menunjuk ke objek yang sama dengan atribut __proto__ objek contoh Apabila objek mencari nilai atribut, jika ia tidak mempunyai satu, ia akan mencari 原型
nya berdasarkan __proto__. Jika ia tidak wujud, maka ia akan mencari objek prototaip pembina yang menghasilkan objek contoh ini. Jika ia masih tidak wujud, ia akan terus mencari objek prototaip Object be null. Proses carian rantai ini dipanggil 原型链
.
Pertama sekali, mari kita mulakan dengan pembina menunjuk ke objek prototaipnya melalui prototype
. Objek prototaip menghala kembali ke pembina ini melalui atribut constructor
nya, menunjukkan pembina mana objek prototaip itu dijana oleh. Objek prototaip ialah objek contoh yang dijana oleh kata kunci baharu Objek contoh ini boleh menunjuk ke objek prototaip pembina yang menjana objek contoh melalui atribut __proto__
, merealisasikan hubungan segi tiga.
Terdapat banyak cara untuk mewarisi, dan terdapat banyak jawapan di Internet akan meringkaskannya sendiri. Dan secara kasarnya, terdapat lima jenis ini
1) Pewarisan rantaian prototaip
Menggunakan prototaip, anda boleh mencipta objek berdasarkan objek sedia ada tanpa perlu untuk mencipta jenis anda sendiri. Di dalam fungsi object(), pembina sementara mula-mula dicipta, kemudian objek yang diluluskan digunakan sebagai prototaip pembina, dan akhirnya contoh baharu jenis sementara ini dikembalikan. Kod utama: Star.proyotype = new Person(), Star.proyotype.constructor = Star
Kelemahan: Hanya kaedah kelas induk boleh diwarisi
2) Meminjam warisan pembina
Panggil pembina jenis super di dalam fungsi pembina subkelas . Pembina boleh dilaksanakan pada objek yang baru dibuat dengan menggunakan kaedah apply()
dan call()
. Kod utama: Person.call(this,age,name)
Kelemahan: tidak boleh digunakan semula, hanya boleh mewarisi atribut kelas induk
3) Warisan gabungan
juga dipanggil warisan pseudo-klasik . Ia merujuk kepada menggabungkan teknik rantaian prototaip dan pembina peminjam untuk memanfaatkan yang terbaik daripada kedua-dua dunia. Gunakan rantai prototaip untuk mewarisi sifat dan kaedah prototaip, dan meminjam pembina untuk mewarisi sifat contoh.
Ia bukan sahaja merealisasikan penggunaan semula fungsi dengan mentakrifkan kaedah pada prototaip, tetapi juga memastikan bahawa setiap contoh mempunyai atributnya sendiri. Tetapi akan ada pepijat kecil Terdapat dua salinan umur dan nama, dan salah satu daripadanya mempunyai nilai yang tidak ditentukan, kerana kaedah apply()
dan call()
di dalamnya akan dipanggil sekali lagi secara automatik.
4) Warisan gabungan parasit
Mewarisi sifat dengan meminjam pembina, dan mewarisi kaedah melalui bentuk campuran rantai prototaip. Pada asasnya, anda menggunakan warisan parasit untuk mewarisi daripada prototaip supertype dan kemudian memberikan hasilnya kepada prototaip subjenis. Ia diiktiraf sebagai kaedah pewarisan yang komprehensif Jika anda ingin menulis semuanya, saya hanya akan membuat yang mudah?, kod utama: Star.prototype = Object.create(Person.prototype)
5. ) Kaedah pewarisan kelas ES6
Anda boleh menggunakan kata kunci kelas bersama-sama dengan kata kunci lanjutan untuk melaksanakan pewarisan. Kata kunci kelas telah diperkenalkan dalam ES6 untuk mengisytiharkan kelas, dan kelas (kelas) boleh mewarisi atribut dan kaedah kelas induk melalui extends
, super
menunjuk ke objek prototaip kelas induk, dan boleh memanggil atribut dan kaedah kelas induk, dan Kata kunci super mesti ada dalam kaedah pembina subkelas dan mesti muncul sebelum ini.
Jenis data secara amnya dibahagikan kepada dua jenis
typeof
Kesan masalah sedia ada: null atau tatasusunan dicetak sebagai objek
instanceof
(hanya boleh mengesan jenis data yang kompleks)
Nilai pulangan adalah benar atau salah
Selagi pembina yang berkaitan berada pada rantai prototaip, ia adalah benar, jika tidak ia adalah palsu Ia boleh digunakan untuk mengesan sama ada ia adalah tatasusunan
Object.prototype.toString.call
(nilai data. untuk dikesan)
Mengapa? Pinjam Object.prototype.toString, kerana toString anda telah ditulis semula oleh prototaip anda sendiri, anda tidak boleh mendapatkan sesuatu seperti [objek Objek]
var arr = [2, 3, 4] console.log(arr instanceof Array) console.log(Array.isArray(arr)) console.log(Object.prototype.toString.call(arr))
Cetek. salin: hanya salin satu lapisan, tahap objek yang lebih dalam sahaja Menyalin alamat
Salin dalam: salin lapisan demi lapisan, data pada setiap tahap akan disalin
Kaedah salin cetek:
1 Gunakan kaedah salin cetek lodash clone
untuk membenarkan mereka menunjuk ke alamat yang berbeza
2 Gunakan kaedah Object.assign
3 pengendali sintaks es6 ...
, kelemahan: apabila objek mempunyai kaedah dan sifat tidak ditentukan, ia akan hilang
2. Gunakan JSON.parse(JSON.stringify(obj))
递归
循环引用
堆栈溢出
Idea penyelesaian: Simpan objek yang diproses Semasa memproses objek baharu, anda akan melihat di tempat storan ini untuk melihat sama ada ia telah diproses dengan betul, Hanya kembalikan terus let obj = { name: "zs", age: 20, father: [2, 3, 4], }; function deepClone(target) { //这一行如果不用三元判断 如果是数组会有bug会被拷贝成伪数组对象 let tempObj = Array.isArray(target) ? [] : {}; for (let key in target) { if (typeof target[key] === "object") { tempObj[key] = deepClone(target[key]); } else { tempObj[key] = target[key]; } } return tempObj; } let obj1 = deepClone(obj); console.log(obj1);8 Perbezaan antara slice dan splice
数组删除
3.splice bukan sahaja boleh dipadam, tetapi juga diganti dan ditambah pada tatasusunan
4.splice boleh lulus dalam 3 parameter, slice Menerima 2 parameter
. 截取字符串
- Cegah senario klasik promosi berubah dalam gelung untuk声明变量
- 不污染全局变量
1 Kata kunci .var mengisytiharkan bahawa pembolehubah itu wujud,
masalah2 Pembolehubah yang diisytiharkan oleh var tidak wujud 变量提升
, jika ia adalah pembolehubah global, ia boleh dipanggil di mana-mana
3 mengisytiharkan pembolehubah jika nama Berulang kali, pengisytiharan kemudian akan menulis ganti pengisytiharan sebelumnya; tidak mempunyai promosi pembolehubah Masalah: Jika anda memanggil pembolehubah sebelum let mengisytiharkannya, ralat akan dilaporkan (mengesa bahawa pembolehubah tidak boleh diakses sebelum pemulaan.块级作用域
, mari isytiharkan pembolehubah itu mempunyai sekatan); -skop peringkat (global, fungsi, mod ketat eval) ), hanya berkuat kuasa dalam blok kod semasa Jika dipanggil di luar blok kod semasa, ralat akan dilaporkan (pembolehubah semasa tidak ditentukan
3.
4., pembolehubah yang diisytiharkan oleh let Pengisytiharan pendua tidak dibenarkan Jika nama yang sama diisytiharkan berulang kali, ralat akan dilaporkan (pengecam semasa telah diisytiharkan); >pembolehubah pengisytiharan const
不存在变量提升
1 Pembolehubah yang diisytiharkan oleh .const juga mempunyai ciri-ciri berikut:
, 块级作用域
,
2 semua 不影响作用域链的操作
(kuantiti yang tidak dibenarkan untuk berubah). akan menggunakan const untuk mengisytiharkan pembolehubah, yang boleh menghalang pengguna daripada mengubah suai pembolehubah dalam rangka kerja
4 const sebenarnya dijamin , bukan kerana nilai pembolehubah itu tidak boleh diubah, tetapi data yang disimpan dalam memori. alamat yang ditunjukkan oleh pembolehubah tidak boleh diubah. Untuk jenis data ringkas (nilai angka, rentetan, nilai Boolean), nilai disimpan dalam 不允许变量重复声明
yang ditunjuk oleh pembolehubah, jadi ia bersamaan dengan pemalar.
11. Proses
不存在变量提升
块级作用域
Buat objek kosong baharu. (iaitu objek contoh) 不允许重复声明
常量
Biar ini menunjuk ke objek baharu ini 内存地址
function debounce(func, delay) { let timer = null // 计时器 return function (...args) { clearTimeout(timer) // 清除上一次计时器 timer = setTimeout(() => { // 重新定时 func.apply(this, args) }, delay) } }
节流
function throtte(func, time) { let timer = null // 计时器 return function (...args) { if (timer) return // 无视,直接返回 timer = setTimeout(() => { func.apply(this, args) }, time) } }
这点简单介绍概念,用法后面在详细介绍
1) . 初始态pending
- pending。它的意思是 "待定的,将发生的",相当于是一个初始状态。创建[Promise]对象时,且没有调用resolve或者是reject方法,相当于是初始状态。这个初始状态会随着你调用resolve,或者是reject函数而切换到另一种状态。
2 ). 成功态resolved--
也叫fulfilled
- resolved。表示解决了,就是说这个承诺实现了。 要实现从pending到resolved的转变,需要在 创建Promise对象时,在函数体中调用了resolve方法(即第一个参数)。
3) . 失败态rejected
- rejected。拒绝,失败。表示这个承诺没有做到,失败了。要实现从pending到rejected的转换,只需要在创建Promise对象时,调用reject函数。
// 上口诀 双层for循环 外层长度-1 内层长度-1-i let arr = [4, 3, 1, 7, 8, 10] for (let i = 0; i arr[j + 1]) { let temp = arr[j] arr[j] = arr[j + 1] arr[j + 1] = temp } } } console.log(arr)
MVVM
是三个单词的缩写,model
(数据,一般来自ajax或本地存储)+view
(视图template)+viewmodel(vue实例)
好处
:降低了耦合性
)1.分别是创建阶段的beforeCreate
,created
,一般在beforeCreate写loading加载效果,使用户体验更好,一般在created中发送ajax请求获取数据
2.然后是挂载阶段的beforeMount
,mounted
,一般会在mounted中操作DOM元素
3.更新阶段的是beforeUpdate
,updated
,当数据更新时需要做统一的业务处理时,拿到最新的dom,可以使用updated 这个钩子函数
4.最后是销毁阶段的beforeDestroy
,destroyed
,可以在beforeDestroy做一些清理的工作,比如说定时器 和解绑一些addEventListener监听的事件
keep-alive
的两个钩子函数,使用场景是当组件切换时会进行销毁,因此组件中的初始化的4个钩子函数会多次执行,比较浪费资源,此时可以使用keep-alive纪行组件的缓存,可以让组件切换时不被销毁,keep-alive有两个独有的钩子函数,分别是activated
和deactivated
,是组件激活和失活时会执行的两个钩子函数)单向数据流是指父组件向子组件传递数据,子组件通过props
接收,当父组件中的值改变了,子组件中对应的数据也会改变,因为props是只读
的,所以无法直接在子组件中对父组件传递过来的值进行修改,但是如果这个数据是一个引用数据类型,是可以直接在子组件中修改数据中的某个属性的,只要不改变这个数据的内存地址
就可以
vue中普通指令都可以实现数据变了,视图会跟着变,但是有一个特殊的指令叫v-model
,它一般用于表单控件,它可以实现双向数据绑定,所谓的双向数据就是数据变了,视图就会跟着改变,反过来也是
v-model
一般配合input
框使用,实现双向数据绑定的效果,它是v-bind
和v-on
的语法糖,原理是通过v-bind将数据绑定给input框,再通过v-on:input
,在input中的值改变时,通过$event可以获取到事件源对象 再通过target.value
获取到input中更新后的值 将这个值再赋值给绑定的数据即可
在vue的组件使用自定义事件时,$event代表子组件抛出的数据,当这个自定义事件触发一个方法时, 可以不传$event而且可以在方法中进行接收,但是如果写的话就一定要写成$event的形式,这是一个固定写法, 或者这个方法既要传参又要使用事件对象,这个时候$event也是必须要写的 - @click='fn' 在回调函数直接通过参数可以拿到事件对象 - @click='fn($event)' 这个时候@event是固定写法
1.初始化阶段时,先执行父组件的beforeCreate
、created
、beforeMount
三个钩子函数,然后执行子组件的beforeCreate
、created
、beforeMount
、mounted
四个钩子函数,最后执行父组件的mounted钩子函数
2.更新阶段,先执行父组件的beforeUpdate
,然后执行子组件的beforeUpdate
,updated
,最后执行父组件的updated
3.销毁阶段,先执行父组件的beforeDestroy
,然后执行子组件的eforeDestroy
,destroyed
,最后执行父组件的destroyed
v-if
和v-show
都可以控制标签,实现组件的显示与隐藏,不同点是v-show是通过display
的block和none
属性来控制的,当元素隐藏时,页面结构依然存在
v-if是通过将元素创建和销毁来控制显示与隐藏的,当v-if的条件为否时,会直接销毁该元素,当满足时会重新创建出来,有可能会影响页面的回流或重绘
如果该元素需要频繁切换时可以使用v-show,不需要频繁切换时可以使用v-if,提高性能
template
将v-if写在循环的外部,这样当不满足v-if的判断条件时,就不会再执行v-for了,也可以将数据放在计算属性
里面计算过滤出来的数据在交给v-for循环,代替v-if的作用,即可解决。应用场景
v-imgerror
公司项目中有的用户头像可能加载报错,可以给他一张默认图片, onerror this.img=默认图片
v-focus
打开带有搜索的页面的时候,实现自动把光标定位到 input 中
自定义指令的钩子函数
1.bind
属性绑定的时候执行 只会有一次
2. inserted
当前指令所在的元素插入到页面中的时候执行一次
3. update
当前指令所在的组件中的 data 数据有更新就会执行,可以执行多次
// 指令的钩子有三个 bind inserted update // bind inserted 只会执行一次 // update 会反复执行 Vue.directive('focus', { inserted(el) { el.focus() }, }) Vue.directive('red', { bind(el) { el.style.color = 'red' }, }) Vue.directive('check', { update(el) { const reg = /^[a-zA-Z0-9]+$/ if (reg.test(el.value)) { el.style.color = 'green' } else { el.style.color = 'red' } }, })
这块部分理解不是很透彻,大家浅看一下就可以了?
expire
, cache-control
, last-modified
(dalam mesej respons) etag
2. Selepas beberapa ketika (tidak pasti) ), dan terdapat satu lagi halaman dengan img padanya, dan src juga adalah logo.png Pada masa ini, saya pergi untuk melihat sama ada terdapat sumber cache secara setempat Jika saya mendapati bahawa terdapat, lihat sekali lagi expire
(jika ada, beri keutamaan Tahap bergantung pada catch-control
Jika ia belum tamat tempoh, cuma gunakannya (sekeping ini milik cache yang kuat). Tetapi jika didapati ia telah tamat tempoh, ia akan memasuki peringkat rundingan cache dan menghantar permintaan kepada pelayan untuk menukar cache-control
(nilainya if-modified-since
)/last-modifyed
Selepas permintaan dihantar, pelayan mula membandingkan dan melihat sama ada sumber pada pelayan lebih baharu daripada sumber tempatan Jika sumber pelayan masih lama, kod status 304 akan dikembalikan statusnya ialah 304. Teruskan sahaja menggunakan sumber luar talian tempatan Jika sumber pelayan telah mengemas kini sumber, kod status ialah 200 dan pelayan perlu menghantar logo.png baharu kepada penyemak imbas dan proses itu perlu diulang <.>if-none-match(etag)
Baby-> Hubungan pergantungan satu-ke-banyak antara ibu bapa, datuk dan nenek dan datuk nenek
Bayi menangis -> 🎜> Ciri mod: Ya
Satu ialah pemerhati
dan satu lagi ialah pemerhati
Dalam vue,
二个主体
Dep
2. Mod Terbit-langgananwatcher
v-band
3. Perbezaan antara dua mod三个主体
eventBus
(Mempelajari perkongsian video: Bermula dengan bahagian hadapan web, tutorial video jQuery)
Atas ialah kandungan terperinci Ringkaskan beberapa soalan temuduga front-end biasa (dengan jawapan) untuk membantu anda menyatukan pengetahuan anda!. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!