JS從看懂到看開（前端面試題整合）
解釋一下為何[ ] == ![ ] // ---> true
首先看一張圖
！[ ] 是 false
原式：[ ] == false
根據第八條，false通過tonumber（）轉換為0
原式：[ ] == 0
根據第十條，[ ]通過ToPrimitive()轉換為' '
原式：' ' == 0
根據第六條
原式：0 == 0
嘗試實現new
function ObjectClass() {//物件
console.log(arguments[0])
}
ObjectClass.prototype.constructor = ObjectClass
function create() {
// 建立一個空的物件
var obj = {}
// 獲得建構函式
var _constructor = this
// 連結到原型
obj.__proto__ = _constructor.prototype
// 繫結 this，執行建構函式
var result = _constructor.apply(obj, arguments)
// 確保 new 出來的是個物件
return typeof result === 'object' ? result : obj
}
create.call(ObjectClass, 'hello world')//範例化拓展typeof功能使其支援更多型別（array，object，null區分），並解釋一下typeof null為何是object
function myTypeOf(target) {
var _type = typeof (target)
var temp = {
"[object Object]": 'object',
"[object Array]": 'array',
"[object Number]": 'number',
"[object String]": 'string',
"[object Boolean]": 'boolean'
}
if (target === null) {
return 'null'
} else if (_type == 'object') {
var str = Object.prototype.toString.call(target)//根據toString區分
return temp[str]
} else {
return _type
}
}
console.log(myTypeOf('hello')) //string
console.log(myTypeOf(111)) // number
console.log(myTypeOf(true)) // boolean
console.log(myTypeOf({})) // object
console.log(myTypeOf([])) // array
console.log(myTypeOf(null)) // null
console.log(myTypeOf(undefined)) // undefined
console.log(myTypeOf(Symbol())) // symboltypeof null為何是object
因為在早期js初版本中，作業系統使用的是32位元，出於效能考慮，使用低位儲存變數型別，object的型別前三位是000，而null是全0，從而系統將null誤判為object
instanceof是什麼？嘗試實現一下
用官話來講：instanceof用於檢測建構函式的prototype屬性是否出現在某個範例物件的原型鏈上
通俗來講，a instanceof b也就是判斷a是否是由b範例化得來的
實現：
function ObjectClass() {}
ObjectClass.prototype.constructor = ObjectClass
var _objectClass = new ObjectClass()
function myInstanceof(orgProto, tag) { //org前者，範例化物件, tag後者，類
var tagProto = tag.prototype
orgProto = orgProto.__proto__
for (;;) { //死迴圈查詢原型鏈上是否有類的原型
if (orgProto === null) {
return false
}
if (orgProto === tagProto) {
return true
}
orgProto = orgProto.__proto__
}
}
console.log(myInstanceof(Object, Function)) // true
console.log(myInstanceof(Object, Object)) // true
console.log(myInstanceof(String, Object)) // true
console.log(myInstanceof(_objectClass, Object)) // true
console.log(myInstanceof(String, String)) // false
console.log(myInstanceof(Boolean, Boolean)) // false解釋以下程式碼分別在控制檯顯示什麼，並簡單說明
有一個物件Car，分別對以下四種情況進行作答
Car.prototype.name = 'BMW'
function Car() {}1.範例化物件時列印BMW，因為Car.prototype.name = 'BMW'，範例化的car本身沒有name屬性，於是會在Car的原型上找。此時將Car.prototype.name = 'Benz'，範例化後的car.name也會等於Benz，因為name是基本資料型別（原始值），當值傳送變化，範例化後的物件也會改變
var car = new Car()
console.log(car.name) //BMW
Car.prototype.name = 'Benz'
console.log(car.name) //Benz2.範例化物件時列印Benz，因為在範例化之前就已經改變建構函式原型上的name值
Car.prototype.name = 'Benz'
var car = new Car()
console.log(car.name) //Benz3.第一個log的BMW與上述一樣，第二個log依然列印BMW的原因是，這裡將Car.prototype直接改變成另一個物件，由於物件是參照資料型別（參照值），指向的是記憶體地址而不是值，new之前和new之後的範例物件參照的name地址不同
var car = new Car()
console.log(car.name) //BMW
Car.prototype = {
name: 'Benz'
}
console.log(car.name) //BMW4.和上述相同，原因是修改了prototype，改變的是參照地址，new之前和new之後的範例物件參照的name地址不同
Car.prototype = {
name: 'Benz'
}
var car = new Car()
console.log(car.name) //Benz寫一個函數，計算字串Unicode總長度（例如：abcd，列印4，qwerdf，列印6）
需要注意的是，英文字元佔1個位元組，中文字元佔兩個位元組
function unicodeLength(str) {
for (var i = 0, count = 0; i < str.length; i++) {
console.log(str.charCodeAt(i))
if (str.charCodeAt(i) > 255) { //中文字元
count += 2
} else { //英文字元
count++
}
}
return count
}
console.log(unicodeLength('hello，1024，你好')) //17實現一下js中window自帶的isNaN()函數
注意點：如果直接使用NaN==NaN來判斷，會返回false，需要將NaN轉換成字串，再來判斷
isNaN('asda') //window下的原函數
console.log(isNaN(13)) //false
console.log(isNaN('aaa')) //true
function myIsNaN(number) {
return "" + Number(number) == "NaN" ? true : false
}
console.log(myIsNaN(32323)) //false
console.log(myIsNaN('aaa')) //true實現陣列push()方法
function myPush() {
for (var i = 0; i < arguments.length; i++) {
this[this.length] = arguments[i]
}
return this.length
}
Array.prototype.myPush = myPush
var list = [1, 2, 3, 4, 5]
var item = 6
console.log(list.myPush(item)) //6
console.log(list) //[1, 2, 3, 4, 5, 6]實現陣列亂序（提示：使用Array.sort）
Array.sort((a,b)=>{})中a-b升序，b-a降序
Array.prototype.random = random
function random() {
this.sort(function () {
return Math.random() - 0.5
})
return this
}
var list = [1, 2, 3, 4, 5, 6, 7, 8, 9]
console.log(list.random())//[3, 2, 6, 4, 9, 8, 1, 5, 7] 結果每次都不同以下程式碼在控制檯顯示什麼？說明原因
var obj = {
"0": 'a',
"1": 'b',
"2": 'c',
"length": 3,
"push": Array.prototype.push
}
obj.push(1, 2, 3)
console.log(obj)列印結果是
{
0: "a"
1: "b"
2: "c"
3: 1
4: 2
5: 3
length: 6
}原因：說明原因之前先看一段Array.prototype.push的原始碼：
function ArrayPush () {
var n = TO_UNIT32(this.length);
var m = %_ArgumentsLength();
for (var i = 0; i < m; i++) {
this[i + n ] = %_Arguments(i);
} this.length = n + m;
return this.length;
}
push的原理是在原物件後面將push的內容遍歷進去，獲取this.length並且在此基礎上加上push的個數，這就不難解釋為何push了三個數後length為6
解釋以下程式碼列印為undefined的原因
var num = 123;
num.item = 'abc'
console.log(num.item) //undefined第一步：var num = 123
第二步：num.item = 'abc'//隱式轉換，相當於new Number(num).item = 'abc'（包裝類生成參照型別資料），此時底層會判定此時的num是原始值，不存在屬性值，所以執行delete（num.item）
第三步：列印undefined
使用JS原生實現function中的call，apply，bind函數
call:
Function.prototype.myCall = function () {
var _this = arguments[0] || window; //第一項是需要this指向的物件
_this._function = this //this是要執行的函數，改變指向為_this
var args = [] //把除this之外的所有引數放在args中
for (var i = 1; i < arguments.length; i++) { //i = 1，第二項到最後一項是引數
args[i - 1] = arguments[i]
}
return eval("_this._function(" + args + ")") //eval能將陣列隱式拆分，效果與join相似，但二者區別很大，return將函數執行結果返回
delete _this._function //執行完成後刪除當前_function,這個_function用來放this
}
var a = 'window'
var obj1 = {
a: 'obj1',
fn: function () {
console.log(this.a)
console.log(arguments)
}
}
var obj2 = {
a: 'obj2'
}
obj1.fn.myCall(obj2, 1, 2, 3, 4) //obj2 arguments[1, 2, 3, 4]
obj1.fn.myCall(this, 3, 2, 1) //window arguments[3, 2, 1]apply（呼叫上面的myCall實現即可）:
Function.prototype.myApply = function () {
var _this = arguments[0] || window; //第一項是需要this指向的物件
_this._function = this //this是要執行的函數，改變指向為_this
return eval("_this._function.myCall(_this, " + arguments[1] + ")") //eval能將陣列隱式拆分，效果與join相似，但二者區別很大，return將函數執行結果返回
delete _this._function //執行完成後刪除當前_function,這個_function用來放this
}
var a = 'window'
var obj1 = {
a: 'obj1',
fn: function () {
console.log(this.a)
console.log(arguments)
}
}
var obj2 = {
a: 'obj2'
}
obj1.fn.myApply(obj2, [1, 2, 3, 4]) //obj2 arguments[1, 2, 3, 4]
obj1.fn.myApply(this, [3, 2, 1]) //window arguments[3, 2, 1]bind（繼續呼叫上面myApply）:
Function.prototype.myBind = function () {
var t = this;
var _this = arguments[0] || window; //第一項是需要this指向的物件
var args = Array.prototype.slice.myApply(arguments, [
1], ) //這項的目的是為了去除第一項arguments[0]，就與上面的myCall中的遍歷作用相同，Array.prototype.slice傳一個引數，slice(start,end)表示刪除第start到end項並返回刪除後的陣列，這裡我們只用擷取，不用刪除，這裡是刪除第一項（由於用的是myApply，第二個引數是陣列所以用[1]）並返回刪除後的陣列
return function () {
return t.myApply(_this, args)
}
}
var a = 'window'
var obj1 = {
a: 'obj1',
fn: function () {
console.log(this.a)
console.log(arguments)
}
}
var obj2 = {
a: 'obj2'
}
obj1.fn.myBind(obj2, 1, 2, 3, 4)() //obj2 arguments[1, 2, 3, 4]
obj1.fn.myBind(this, 3, 2, 1)() //window arguments[3, 2, 1]對mvvm，mvp和mvc的理解
Model–View–ViewModel(MVVM)，Model-View-Presenter（MVP）和Model–View-Controller（MVC） 都是軟體架構設計模式
相同的地方
- Model 是指任何一個領域模型(domain model)，一般做資料處理，可以理解為資料庫，用來存放應用的所有資料物件。模型不必知曉檢視和控制器的細節，模型只需包含資料及直接和這些資料相關的邏輯。任何事件處理程式碼、檢視模版，以及那些和模型無關的邏輯都應當隔離在模型之外，它代表了真實情況的內容（一個物件導向的方法），或表示內容（以資料為中心的方法）的資料存取層
- View就是使用者介面（UI），檢視層是呈現給使用者的，使用者與之產生互動。在javaScript應用中，檢視大都是由html、css和JavaScript模版組成的。除了模版中簡單的條件語句之外，檢視不應當包含任何其他邏輯。事實上和模型類似，檢視也應該從應用的其他部分中解耦出來
不同的地方
- MVC的Controller控制器是模型和檢視的紐帶。控制器從檢視獲得事件和輸入，對它們進行處理，並相應地更新檢視。當頁面載入時，控制器會給檢視新增事件監聽，比如監聽表單提交和按鈕單擊。然後當使用者和應用產生互動時，控制器中的事件觸發器就開始工作。
- MVVM的ViewModel是一個公開公共屬性和命令的抽象的view。取代了 MVC 模式的 controller，或 MVP 模式的任命者(presenter)，MVVM 有一個驅動。 在 viewmodel 中，這種驅動傳達檢視和資料繫結的通訊。此 viewmodel 已被描述為該 model 中的資料的狀態。
- MVP的Presenter負責邏輯的處理，在MVP中View並不直接使用Model，它們之間的通訊是通過Presenter來進行的，所有的互動都發生在Presenter內部，而 在MVC中View會直接從Model中讀取資料而不是通過Controller。
談談對前端頁面渲染的理解（過程，原理，效能，重繪和迴流）
頁面渲染分為以下步驟
1. 處理HTML語句標籤並構建 DOM 樹
2. 處理CSS語句並構建CSSOM樹
3. 將處理好的DOM與CSSOM合併成一個渲染樹
4. 根據渲染樹來佈局，計算每個節點的位置樣式等等
5. 調 GPU（顯示卡）繪製頁面，合成圖層，最後顯示在瀏覽器
在處理CSSOM時，會暫時堵塞DOM渲染，並且扁平層級關係有利於渲染速度，越詳細的樣式選擇器，會導致頁面渲染越慢
CSS載入會影響JS檔案或語句載入，JS需要等待CSS解析完畢後執行
document中的DOMContentLoaded和Load的區別：前者只需HTML載入完成後，就會觸發，後者需要等HTML，CSS，JS都載入完成才會觸發
圖層概念：普通檔案流就是一個圖層，特定的屬性可以生成一個新的圖層。 不同的圖層渲染互不影響，所以對於某些頻繁需要渲染的建議單獨生成一個新圖層，提高效能。但也不能生成過多的圖層，會引起反作用
以下CSS屬性可以生成新圖層：
- 3D 變換：translate3d、translateZ
- will-change
- video、iframe 標籤
- 通過動畫實現的 opacity 動畫轉換
- position: fixed
重繪（Repaint）和迴流（Reflow）
重繪是當節點需要更改外觀而不會影響佈局的，比如改變color就叫稱為重繪迴流是佈局或者幾何屬性需要改變就稱為迴流。
迴流必定會發生重繪，重繪不一定會引發迴流。
迴流所需的成本比重繪高的多，改變深層次的節點很可能導致父節點的一系列迴流。
所以以下幾個動作可能會導致效能問題：
- 改變 window 大小
- 改變字型
- 新增或刪除樣式
- 文字改變
- 定位或者浮動
- 盒模型
如何減少重繪和迴流
- 使用 translate 替代 top
- 使用 visibility 替換 display: none ，因為前者只會引起重繪，後者會引發 迴流（改變了佈局）
- 把DOM離線後修改，比如：先把DOM給display:none（迴流），然後你修改100次，然後再把它顯示出來
- 不要把 DOM 結點的屬性值放在一個迴圈裡當成迴圈裡的變數
- 不要使用 table 佈局，可能很小的一個小改動會造成整個 table 的重新佈局
- 動畫實現的速度的選擇，動畫速度越快，迴流次數越多，也可以選擇使用requestAnimationFrame
- CSS 選擇符從右往左匹配查詢，避免 DOM 深度過深
- 將頻繁執行的動畫變為圖層，圖層能夠阻止該節點回流影響別的元素。比如對 於 video 標籤，瀏覽器會自動將該節點變為圖層。
談談對前端繼承的理解
原型鏈繼承，子類範例繼承的屬性有，子類建構函式的屬性，父類別建構函式的屬性，父類別原型上的屬性
缺點：無法向父類別傳參，當父類別原型上的屬性改變時，所以子類範例相對應的屬性都會對應改變
function Father() {
this.name = "father";
this.sex = "man"
}
Father.prototype.hobby = 'fish'
function Son() {
this.name = "son";
}
// 原型鏈繼承
Son.prototype = new Father()
var son1 = new Son()
var son2 = new Son()
Father.prototype.hobby = 'dog' //缺點，修改父類別prototype上的屬性時，所有子類都會隨之修改
console.log(son1.hobby) // dog
console.log(son2.hobby) // dog
console.log(son1 instanceof Father) // true建構函式繼承（通過call，apply），子類可繼承多個父類別，可傳參給父類別
缺點：每個範例都有父類別的建構函式，父類別prototype上的屬性無法繼承
// 建構函式繼承（通過call，apply）
function Father() {
this.name = "father";
this.sex = "man"
}
Father.prototype.hobby = 'fish'
function Son(sex) {
Father.call(this, sex) //可繼承多個父類別,但是每個範例都有父類別的建構函式
this.name = "son";
}
var son = new Son('woman')
console.log(son.sex) //woman,可傳參給父類別
console.log(son.hobby) //undefined，缺點，父類別prototype上的屬性無法繼承
console.log(son instanceof Father) // false組合繼承，上述兩者的結合，解決了上面的缺點和問題（常用）
缺點：Father.call()和new Father()執行了兩次父類別建構函式，增加了效能損耗，父類別的原型上的constructor指向了子類，此時需要在範例化父類別（new Father）後在範例化子類（new Son）之前新增一句話：Father.prototype.constructor = Father
// 組合繼承
function Father(sex) {
this.name = "father";
this.sex = sex
}
Father.prototype.hobby = 'fish'
function Son(sex) {
Father.call(this, sex) //可繼承多個父類別
this.name = "son";
}
Son.prototype = new Father()
Father.prototype.constructor = Father //解決父類別的原型上的constructor指向了子類
var son = new Son('woman')
console.log(son.sex) //woman,可傳參給父類別
console.log(son.hobby) //fish
console.log(son instanceof Father) // true原型式繼承，和Object.create相似，通過函數進行繼承，會繼承父類別所有屬性
缺點：父類別原型上的屬性發生變化時，所有子類對應屬性都會改變，子類無法直接修改屬性，複用性較差
// 原型式繼承
function Father() {
this.name = "father";
this.sex = 'man'
}
Father.prototype.hobby = 'fish'
function Son() {
this.name = "son";
}
function inherit(father) {
function Fn() {}
Fn.prototype = father;
return new Fn() //類似於複製了father這個物件
}
var father = new Father()
var son1 = inherit(father)
Father.prototype.hobby = 'dog' //缺點，修改父類別prototype上的屬性時，所有子類都會隨之修改
var son2 = inherit(father)
console.log(son1.sex) //man
console.log(son1.hobby) //dog
console.log(son2.hobby) //dog
console.log(son1 instanceof Father) // true寄生式繼承，繼承父類別所有屬性，並且可以新增子類自己的屬性方法
缺點：程式碼複用率低
function Father(sex) {
this.name = "father";
this.sex = sex //範例傳參
}
Father.prototype.hobby = 'fish'
function Son() {
this.name = "son";
}
Object.prototype.myCreate = function (obj) {//實現Object.create
function Fn() {}
Fn.prototype = obj;
return new Fn()
}
function inherit(father) {
var _father = Object.myCreate(father)//克隆物件
_father.getInfo = function () {//增強子類，修改屬性，產生子類獨有的方法和屬性，但是耦合高，複用性差，不同子類的寫法各不同
console.log(_father.name)
console.log(_father.hobby)
console.log(_father.sex)
}
return _father;
}
var father = new Father('woman')
var son = inherit(father)
son.getInfo() //father，fish，woman寄生式組合繼承，繼承父類別所有屬性，解決呼叫兩次父類別建構函式問題：一次是在建立子型別原型，一次在子類內部（理論上是最理想的繼承）
// 寄生式組合繼承
function Father(sex) {
this.name = "father";
this.sex = sex //範例傳參
}
Father.prototype.hobby = 'fish'
Father.prototype.getName = function () {
console.log(this.name)
}
function Son(sex) {
console.log(this.superClass) //Father
Father.call(this, sex); //建構函式繼承傳遞引數
this.name = "son";
this.hobby = "dog";
}
Son.prototype.getName = function () {
console.log(this.name)
}
function Grandson(sex) {
console.log(this.superClass) //Son
Son.call(this, sex); //建構函式繼承傳遞引數
this.name = "grandson";
this.hobby = "cat";
}
var inherit = (function () {
function F() {} //使用閉包產生私有函數，使每個子類繼承的父類別屬性無參照關係
return function (father, son) {
F.prototype = father.prototype; //私有函數取出父類別的原型
son.prototype = new F();
son.prototype.superClass = father; //子類的超類指向父類別，子類通過this.superClass呼叫Father
son.prototype.constructor = son;
}
}())
inherit(Father, Son)
inherit(Son, Grandson)
var father = new Father('fatherMan')
var son = new Son('sonMan')
var grandson = new Grandson('grandsonMan')
console.log(son instanceof Father) //true
console.log(grandson instanceof Son) //true
console.log(grandson instanceof Father) //true
console.log(father.sex) //fatherMan
console.log(son.sex) //sonMan
console.log(grandson.sex) //grandsonMan
console.log(father.hobby) //fish
console.log(son.hobby) //dog
console.log(grandson.hobby) //cat
father.getName() //father
son.getName() //son
grandson.getName() //grandson