一、請解釋 JavaScript 中 this 是如何工作的。

首先：this 永遠指向函數(shù)運行時所在的對象，而不是函數(shù)被創(chuàng)建時所在的對象。匿名函數(shù)或不處于任何對象中的函數(shù)指向 window 。

1、 方法調(diào)用模式

當(dāng)函數(shù)被保存為對象的一個屬性時，成該函數(shù)為該對象的方法。函數(shù)中this的值為該對象。

var?foo?=?{
????name:?'fooname',
????getName:?function?(){
????????return?this.name??
????}
}
foo.getName();??//?this?=>?foo

2、 函數(shù)調(diào)用模式

當(dāng)函數(shù)并不是對象的屬性。函數(shù)中this的值為全局對象

note：某個方法中的內(nèi)部函數(shù)中的this的值也是全局對象，而非外部函數(shù)的this

function?foo(){
????this.name?=?'fooname';??
}
foo();??//?this?=>?window

3、構(gòu)造器調(diào)用模式

即使用new調(diào)用的函數(shù)，則其中this將會被綁定到那個新構(gòu)造的對象。

function?Foo(){
????this.name?=?'fooname';
}
var?foo?=?new?Foo();??//?this?=>?foo

4、使用apply或call調(diào)用模式

該模式調(diào)用時，函數(shù)中this被綁定到apply或call方法調(diào)用時接受的第一個參數(shù)

function?getName(name){
????this.name?=?name;
}
var?foo?=?{};
getName.call(foo,?name);??//?this?=>foo

改變this的值主要方法(目前想到的，歡迎評論添加)：

apply或call方法調(diào)用時強制修改，使this指向第一個參數(shù)。

使用Function.bind方法創(chuàng)造新的函數(shù)，該新函數(shù)的中this指向所提供的第一個參數(shù)。

二、請解釋原型繼承 (prototypal inheritance) 的原理。

JavaScript沒有“子類”和“父類”的概念，也沒有“類”(class)和“實例”(instance)的區(qū)分，全靠“原型鏈”(prototype chain)模式，來實現(xiàn)繼承。

每個函數(shù)Sub都有一個屬性prototype，prototype指向一個原型對象，原型對象中也有一個指向函數(shù)的屬性constructor，通過new一個函數(shù)Sub可以產(chǎn)生實例instance，調(diào)用這個instance的某個屬性或方法時，instance會先查找自身是否有這個方法或者屬性，沒有的話就會去實例的構(gòu)造函數(shù)Sub的原型prototype中查找，即Sub.prototype，如果給原型對象Sub.prototype賦予另一個類型的實例superInstance，則是在superInstance中查找的，這個superInstance中也有屬性prototype指向某個原型對象，以此一級級往上最終到Object.prototype，這樣就形成了原型繼承。

利用此原理可以自己實現(xiàn)一個inherits函數(shù)：

function?inherits(subType,?superType){
????var?_prototype?=?Object.create(superType.prototype);
????_prototype.constructor?=?subType;
????subType.prototype?=?_prototype;
}

三、請描述事件冒泡機制 (event bubbling)。

事件冒泡(event bubbling)，事件最開始時由觸發(fā)的那個元素身上發(fā)生，然后沿著DOM樹向上傳播，直到document對象。如果想阻止事件起泡，可以使用e.stopPropagation()。

四、什么是 “use strict”; ? 使用它的好處和壞處分別是什么?

優(yōu)點

消除Javascript語法的一些不嚴(yán)謹之處，減少一些怪異行為;

消除代碼運行的一些不安全之處，保證代碼運行的安全;

提高編譯器效率，增加運行速度;

為未來新版本的Javascript做好鋪墊。

缺點

嚴(yán)格模式改變了語義。依賴這些改變可能會導(dǎo)致沒有實現(xiàn)嚴(yán)格模式的瀏覽器中出現(xiàn)問題或者錯誤。

五、請解釋 JavaScript 的同源策略 (same-origin policy)。

同源策略限制了一個源(origin)中加載文本或腳本與來自其它源(origin)中資源的交互方式。同源指的是協(xié)議、域名、端口相同，同源策略是一種安全協(xié)議。

六、請解釋 JSONP 的工作原理，以及它為什么不是真正的 Ajax。

JSONP(JSON with Padding)是一種非官方跨域數(shù)據(jù)交互協(xié)議，它允許在服務(wù)器端集成< script >標(biāo)簽返回至客戶端，通過javascript回調(diào)的形式實現(xiàn)跨域訪問。

因為同源策略的原因，我們不能使用XMLHttpRequest與外部服務(wù)器進行通信，但是< script >可以訪問外部資源，所以通過JSON與< script >相結(jié)合的辦法，可以繞過同源策略從外部服務(wù)器直接取得可執(zhí)行的JavaScript函數(shù)。

原理

客戶端定義一個函數(shù)，比如jsonpCallback，然后創(chuàng)建< script >，src為url + ?jsonp=jsonpCallback這樣的形式，之后服務(wù)器會生成一個和傳遞過來jsonpCallback一樣名字的參數(shù)，并把需要傳遞的數(shù)據(jù)當(dāng)做參數(shù)傳入，比如jsonpCallback(json)，然后返回給客戶端，此時客戶端就執(zhí)行了這個服務(wù)器端返回的jsonpCallback(json)回調(diào)。

通俗的說，就是客戶端定義一個函數(shù)然后請求，服務(wù)器端返回的javascript內(nèi)容就是調(diào)用這個函數(shù)，需要的數(shù)據(jù)都當(dāng)做參數(shù)傳入這個函數(shù)了。

優(yōu)點 - 兼容性好，簡單易用，支持瀏覽器與服務(wù)器雙向通信

缺點 - 只支持GET請求;存在腳本注入以及跨站請求偽造等安全問題

補充一點，JSONP不使用XMLHttpRequest對象加載資源，不屬于真正意義上的AJAX。

以上就是“2023年常見的Js基礎(chǔ)面試題，大家可進行參考”，你能回答上來嗎?如果想要了解更多的Java面試題相關(guān)內(nèi)容，可以關(guān)注動力節(jié)點Java官網(wǎng)。