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

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

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

當(dāng)函數(shù)被保存為對象的一個(gè)屬性時(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：某個(gè)方法中的內(nèi)部函數(shù)中的this的值也是全局對象，而非外部函數(shù)的this

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

優(yōu)點(diǎn)

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

消除代碼運(yùn)行的一些不安全之處，保證代碼運(yùn)行的安全;

提高編譯器效率，增加運(yùn)行速度;

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

缺點(diǎn)

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

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

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

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

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

因?yàn)橥床呗缘脑颍覀儾荒苁褂肵MLHttpRequest與外部服務(wù)器進(jìn)行通信，但是< script >可以訪問外部資源，所以通過JSON與< script >相結(jié)合的辦法，可以繞過同源策略從外部服務(wù)器直接取得可執(zhí)行的JavaScript函數(shù)。

原理

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

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

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

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

補(bǔ)充一點(diǎn)，JSONP不使用XMLHttpRequest對象加載資源，不屬于真正意義上的AJAX。

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