JavaScript高頻面試題(1),移動web開發教程

mb613826456e444 2021-09-19 21:28:03 阅读数:228

javascript web 教程

call() 方法調用一個函數, 其具有一個指定的 this值和參數列錶

語法:函數.call(指向的對象,參數1,參數2)

call的性能要比apply好一些

2)apply:

apply()方法調用一個函數, 其具有一個指定的 this 值,以及作為一個數組

語法:語法:函數.call(指向的對象,[參數1,參數2])

3)bind:

bind() 函數會創建一個新函數,新函數與被調函數具有相同的函數體,當目標函數被調用時 this 值綁定到 bind() 的第一個參數,該參數不能被重寫。

JavaScript高頻面試題(1),移動web開發教程_前端

[](

)3、閉包

1)什麼是閉包:

閉包是指有權訪問另一個函數作用域中的變量的函數

2)閉包的作用:

  1. 在外部訪問函數內部的變量

  2. 讓函數內的局部變量可以一直保存下去,不會被垃圾回收機制回收

  3. 模塊化私有屬性和公共屬性

3)閉包的原理:

全局變量生存周期是永久,局部變量生存周期隨著函數的調用結束而銷毀,但是,閉包的情况不一樣:在另一個函數內部定義的函數會將包含外部函數的活動對象添加到它的作用域鏈中,函數執行完畢後,其活動對象也不會被銷毀,因為內部函數的作用域鏈仍然在引用這個活動對象。所以當函數執行完畢後,只是執行的作用域鏈會被銷毀,但它的活動對象仍然保留在內存中,直到內部函數被銷毀後才銷毀。

4)閉包的優缺點

優點:

保護私有上下文中的"私有變量" 和 外界互不影響

私有上下文中的“私有變量”和“值”都會被保存起來,可以供其下級上下文中使用

缺點:

如果使用閉包,會導致棧內存太大,頁面渲染變慢,性能受到影響

優化:

由於閉包會一直占用內存空間,直到頁面銷毀,我們可以主動將已使用的閉包銷毀:

將閉包函數賦值為null 可以銷毀閉包

5)閉包遇到的問題

多個子函數的[[scope]]都是同時指向父級,是完全共享的。因此當父級的變量對象被修改時,所有子函數都受到影響。

解决:

變量可以通過 函數參數的形式 傳入,避免使用默認的[[scope]]向上查找

使用setTimeout包裹,通過第三個參數傳入

使用 塊級作用域,讓變量成為自己上下文的屬性,避免共享

6)閉包的應用場景

1、數組對象進行排序


let lessons = [
{
title: "Nodejs快速入門",
click: 100,
price: 3200
},
{
title: "html+css",
click: 100,
price: 1200
},
{
title: "js入門到精通",
click: 2100,
price: 2000
}
];
function myOrder(field) {
return (a, b) => a[field] - b[field];
}
lessons.sort(myOrder("price"))

  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.
  • 15.
  • 16.
  • 17.
  • 18.
  • 19.
  • 20.
  • 21.
  • 22.
  • 23.
  • 24.
  • 25.
  • 26.
  • 27.
  • 28.
  • 29.
  • 30.
  • 31.
  • 32.
  • 33.
  • 34.
  • 35.
  • 36.
  • 37.
  • 38.
  • 39.
  • 40.
  • 41.
  • 42.
  • 43.

2、對列錶元素綁定事件


for (var i = 0; i < liList.length; i++) {
liList[i].onclick = (function (i) {
return function () {
console.log(`當前點擊按鈕的索引:${i}`)
}
})(i)
}

  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.
  • 15.

3、閉包實現模塊化 保護


var myModule = (function () {
var name = '張三'
function getName() { return name }
return {
getName
}
})()

  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.
  • 15.

4、返回值 最常見的一種形式


var fun_1 = function () {
var name = "limo";
return function () {
return name;
}
}

  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.

5、 getter和setter


var getValue, setValue;
(function () {
var num = 0
getValue = function () {
return num
}
setValue = function (v) {
if (typeof v === 'number') {
num = v
}
}
})();
console.log(getValue()); //0
setValue(10);
console.log(getValue()) //10

  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.
  • 15.
  • 16.
  • 17.
  • 18.
  • 19.
  • 20.
  • 21.
  • 22.
  • 23.
  • 24.
  • 25.
  • 26.
  • 27.
  • 28.
  • 29.
  • 30.
  • 31.

[](

)4、原型

原型:

在 js 中我們是使用構造函數來新建一個對象的,每一個構造函數的內部都有一個 prototype 屬性值,這個屬性值是一個對象,這個對象的用途是包含可以由特定類型的所有實例共享的屬性和方法,簡單來說,該函數實例化的所有對象的__proto__的屬性指向這個對象,它是該函數所有實例化對象的原型。

使用原型對象為多個對象共享屬性或方法,這樣可以解决通過構建函數創建對象時複制多個函數造成的內存占用問題

JavaScript高頻面試題(1),移動web開發教程_前端_02

以下函數沒有prototyoe:

使用Function.prototype.bind創建的函數對象


function abc(){console.log('abc')}
var binded = abc.bind(null)
binded() //abc
console.log(binded.prototype) //undefined

  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.

箭頭函數也沒有


var abc = ()=>{console.log('abc')}
abc() //abc
console.log(abc.prototype) //undefined

  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.

原型鏈:

原型鏈是由原型對象組成,每個對象都有 proto 屬性,指向了創建該對象的構造函數的原型,proto 將對象連接起來組成了原型鏈。是一個用來實現繼承和共享屬性的有限的對象鏈。

總結

  • 框架原理真的深入某一部分具體的代碼和實現方式時,要多注意到細節,不要只能寫出一個框架。

  • 算法方面很薄弱的,最好多刷一刷,不然影響你的工資和成功率??

  • 在投遞簡曆之前,最好通過各種渠道找到公司內部的人,先提前了解業務,也可以幫助後期優秀 offer 的决策。

  • 要勇於說不,對於某些 offer 待遇不滿意、業務不喜歡,應該相信自己,不要因為當下沒有更好的 offer 而投降,一份工作短則一年長則 N 年,為了幸福生活要慎重選擇!!!

     CodeChina開源項目:【大廠前端面試題解析+核心總結學習筆記+真實項目實戰+最新講解視頻】

JavaScript高頻面試題(1),移動web開發教程_Web_03

喜歡這篇文章文章的小夥伴們點贊+轉發支持,你們的支持是我最大的動力!

版权声明:本文为[mb613826456e444]所创,转载请带上原文链接,感谢。 https://gsmany.com/2021/09/20210919212802845p.html