前端面試知識點1

W3C標準盒模型和IE盒模型的區別

W3C標準盒模型的高寬的內容區是僅僅由width，height決定的，不包含邊框，內外邊距

IE盒子模型的盒子包括了邊框和內邊距，意思就是說，如果你設置了width:500px;但是如果你還設置了border: 5px; padding: 100px;那麼你的內容區的寬度只有290px;

QuerySelectorAll和getElementsBy系列的區別

• w3c標準
• 瀏覽器兼容
• querySelectorAll：IE8+
• getElements系列：IE9+（getElementsByClassName只被IE9+支持）
• 接收參數
• 返回值
• querySelectorAll返回的是靜態節點列表-NodeList，對文檔的任何操作都不會對其產生影響
• getElement系列的返回四一 動態節點列表-HTMLCollection，每一次調用這個列表都會重新對文檔進行查詢

NodeList 與 HTMLCollection 區別

1. HTMLCollection 是元素集合而 NodeList 是節點集合(即可以包含元素，文本節點，以及注釋等等)。
2. node.childNodes，querySelectorAll(雖然是靜態的) 返回的是 NodeList，而 node.children 和 node.getElementsByXXX 返回 HTMLCollection。

動態作用域和靜態作用域的區別

當函數中遇到既不是形參也不是函數內部定義的局部變數的變數時

• 靜態作用域會根據函數定義的環境中去查詢，js的變數是遵循靜態作用域的，

• 動態作用域會根據函數調用的環境中去，關於this的執行是基於動態域查詢的

var foo = 1;function static() { console.log(foo);}(function() { var foo = 2; static();}());//列印1

var foo = 1;var obj = { foo: 2, bar: function() { console.log(this.foo); }};obj.bar();//列印2

數據類型的檢測方式

• typeof
• 返回值為number，string，boolean，undefined，function，object

• typeof NaN //numbertypeof abc //Stringtypeof abc++// abc++ 是NaN,而typeof NaN是number

• instanceof
• 只要在當前實例的原型鏈上，用instanceof檢測出來的結果都是true，所以在類的原型繼承中，最後檢測出來的結果未必都是正確

• 123 instanceof String; //falsenew String(123) instanceof String //true

• 使用instanceof檢測基本類型
• 不合適，還是用typeof吧
• 判斷實例

• function Foo(){};var foo = new Foo();console.log(foo instanceof Foo)

• 判斷繼承關係

• function Parent() {}function Child() {}Child.prototype = new Parent();Child.prototype.constructor = Child;var child = new Child();console.log(child instanceof Child); //trueconsole.log(child instanceof Parent); //trueconsole.log(child instanceof Object); //trueconsole.log(Child instanceof Function); //trueconsole.log(Function instanceof Object); //true console.log(Child instanceof Child); //false

• constructor：檢測數據類型

• console.log((1).constructor === Number); //trueconsole.log("a".constructor === String); //trueconsole.log([].constructor === Array); //trueconsole.log({}.constructor === Object); //true

• 功能還是挺全面的，不過也有它的局限性：
• 如果我們把類的原型進行重寫了，在重寫的過程中，很有可能把之前 constructor 給覆蓋掉，這樣檢測出的結果就不準確了
• 並且 constructor 檢測不出 null，undefined 的類型，所以判斷類型用 constructor 也不太好用
• Object.prototype.toStrong.call【是檢測數據類型最準確最常用的方式】

• function toString(obj){return Object.prototype.toString.call(obj).slice(8,-1);}console.log(toString(abc) === String); console.log(toString(1) === Number);console.log(toString(false) === Boolean);console.log(toString(null) === Null);console.log(toString(undefined) === Undefined);console.log(toString([]) === Array);console.log(toString({}) === Object);console.log(toString(function(){}) === Function)

函數和對象的關係

• 首先函數是一種對象

• 對象都是通過函數創建的

• 對象字面量的創建方式其實是一種語法糖

JS 如何判斷函數是 new 調用還是普通調用

• 通過instanceof判斷

• function fn(){if(this instanceof arguments.callee){console.log("通過new調用");}else{console.log("普通調用");}}

• 通過constructor判斷

• function fn(){if(this.constructor === arguments.callee){console.log("通過函數調用");}else{console.log("普通調用");}}

推薦閱讀：