摘要:值類型是將變量的值存在內存中。說明幾種不同的使用場景作為構造函數對象屬性普通函數執行,創建個標簽,點擊時彈出對應序號如何理解作用域自由變量作用域鏈,即自由變量的尋找閉包的兩個場景。
變量類型和計算知識點: 值類型、引用類型
//值類型 var a=100 var b=a a=200 console.log(b) //100 //引用類型 var a={age:20} var b=a b.age=21 console.log(a.age) //21typeof
// Numbers typeof 37 === "number"; typeof 3.14 === "number"; typeof Math.LN2 === "number"; typeof Infinity === "number"; typeof NaN === "number"; // 盡管NaN是"Not-A-Number"的縮寫 typeof Number(1) === "number"; // 但不要使用這種形式! // Strings typeof "" === "string"; typeof "bla" === "string"; typeof (typeof 1) === "string"; // typeof總是返回一個字符串 typeof String("abc") === "string"; // 但不要使用這種形式! // Booleans typeof true === "boolean"; typeof false === "boolean"; typeof Boolean(true) === "boolean"; // 但不要使用這種形式! // Symbols typeof Symbol() === "symbol"; typeof Symbol("foo") === "symbol"; typeof Symbol.iterator === "symbol"; // Undefined typeof undefined === "undefined"; typeof declaredButUndefinedVariable === "undefined"; typeof undeclaredVariable === "undefined"; // Objects typeof {a:1} === "object"; // 使用Array.isArray 或者 Object.prototype.toString.call // 區分數組,普通對象 typeof [1, 2, 4] === "object"; typeof new Date() === "object"; // 下面的容易令人迷惑,不要使用! typeof new Boolean(true) === "object"; typeof new Number(1) ==== "object"; typeof new String("abc") === "object"; // 函數 typeof function(){} === "function"; typeof Math.sin === "function"; //NaN typeof 1/0 === "NaN"; //null typeof null === "object";強制類型轉換
//邏輯運算符 console.log(10 & 0) //0 轉換為true&&0 console.log(""||"abc") //abc 轉換為false||"abc" console.log(!window.abc) //true !undefined為true //if語句 false情況 null "" false 0 NaN undefined //判斷一個變量是否當作true或者false var a = 100 console.log(!!a)面試題:
1.JS中使用typeof能得到哪些類型
undefined null string number object function boolean symbol
2.何時使用"===",何時使用"=="
參考jQuery源碼 只有這種情況下使用"==":
if(obj.a == null) { } //這句相當于obj.a === null || obj.a === undefined
3.JS有哪些內置函數
Object Array String Number Function Boolean Date RegExp Error
4.JS變量按照存儲方式分為哪些類型,并描述其特點
值類型、引用類型。
值類型是將變量的值存在內存中。
引用類型的變量是真實變量的指針(對象、數組、函數)。可以無限擴張屬性。
5.如何理解JSON
是JavaScript的對象,內置兩個方法 JSON.stringify JSON.parse
function Foo(name, age) { this.name = name this.age = age this.class = "class-1" //return this 默認有這行 } var f = new Foo("zs", 20) //執行過程:1.new函數執行時this會變成空對象 2.this. 的時候賦值 3.return this 4.給f賦值 //var a = {} ===> var a = new Object() //var a =[] ===> var a = new Array() //function Foo(){} ===> var Foo = new Function() //instanceof 用于判斷一個函數是否是一個變量的構造函數原型規則
//所有的引用類型(數組、對象、函數)都具有對象特性,除了null之外,都可以自由擴展屬性 //所有的引用類型 都有__proto__ 隱式原型 //所有的函數都有 prototype 顯式原型 屬性值也是一個普通對象 //所有的引用類型(數組、對象、函數),__proto__屬性值指向它的構造函數的prototype屬性值 var obj = {}; obj.a = 100 var arr = []; arr.a = 100 function fn () {} fn.a = 100 console.log(obj.__proto__) console.log(arr.__proto__) console.log(fn.__proto__) console.log(fn.prototype) console.log(obj.__proto__ === Object.prototype) //試圖得到一個對象的某個屬性時,如果這個對象本身沒有這個屬性,那么會去它的__proto__(構造函數的prototype)中尋找 function Foo(name, age) { this.name = name } Foo.prototype.alertName = function () { alert(this.name) } var f = new Foo("zs") f.printName = function () { console.log(this.name) } f.printName() f.alertName()原型鏈 instanceof
//instanceof 是用于判斷引用類型屬于哪個構造函數的方法 //構造函數 function Foo(name, age) { this.name = name } Foo.prototype.alertName = function () { alert(this.name) } //創建實例 var f = new Foo("zs") f.printName = function () { console.log(this.name) } f.printName() f.alertName() f.toString() // f instanceof Foo 判斷過程: // f 的 __proto__一層層往上找到是否對應Foo.prototype // 再判斷f instanceof Object
直角矩形是構造函數 圓角矩形是對象
var obj={ x:100, y:200, z:300 } var key for(key in obj){ //hasOwnProperty會返回一個布爾值,判斷是否是原生的屬性,以此來排除原型鏈上的屬性 if(obj.hasOwnProperty(key)){ console.log(key,obj[key]); } } //x 100 //y 200 //z 300面試題
6.如何準確判斷一個變量是數組函數
var arr = [] arr instanceof Array typeof arr //object, typeof 是無法判斷是否是數組的
7.寫一個原型鏈繼承的例子
function Elem(id) { this.elem = document.getElementById(id) } Elem.prototype.html = function (val) { var elem = this.elem if (val) { elem.innerHTML = val return this } else { return elem.innerHTML } } Elem.prototype.on = function (type, fn) { var elem = this.elem elem.addEventListener(type, fn) return this } var div1 = new Elem("wrapper") div1.html("hello
").on("click", function () { alert("clicked") }).html("javascript
")
8.描述new一個對象的過程
//創建一個對象 //this指向這個對象 //執行代碼 即對this賦值 //返回this function Foo(name, age) { this.name = name this.age = age this.class = "class-1" //return this 構造函數最好不要寫return } var f = new Foo("zs", 20)作用域和閉包知識點: 執行上下文
//執行上下文:當前被執行代碼的環境/作用域 console.log(a) var a = 100 fn("zs") //函數聲明 function fn(name) { console.log(this) console.log(arguments) age = 20 console.log(name, age) var age bar(100) function bar(num) { console.log(num) } } //函數表達式: var fn = function () {} //在全局代碼執行前,會將變量定義和函數聲明先提出來 //在函數代碼執行前,會將變量定義,函數聲明,this,arguments(所有參數的集合)先提出來this
//this的值執行時才能確定 var a = { name: "A", fn: function () { console.log(this.name) //這個階段的this無法確定值 } } a.fn() //this === a a.fn.call({name: "B"}) //this === {name: "B"} var fn1 = a.fn fn1() //this === window //作為構造函數執行 function Foo(name) { // this = {} this.name = name // return this } var f = new Foo("zs") //作為對象屬性執行 var obj = { name: "A", printName: function () { console.log(this.name) //這里this就是obj } } obj.printName //作為普通函數執行 function fn() { console.log(this) //這里的this就是window } fn //call apply bind function fn1(name, age) { console.log(name) console.log(this) //這里的this是{x:100} } fn1.call({x:100}, "zs", 20) var fn2h = function fn2(name, age) { console.log(name) console.log(this) //這里的this是{y:200} }.bind({y:200}) fn2("zs", 20)作用域 作用域鏈
//不斷向父級作用域尋找變量的過程形成了作用域鏈 //沒有塊級作用域概念 if (true) { var name = "zs" } console.log(name) //函數、全局作用域 var a = 10 function fn() { var a = 200 console.log("fn", a) } console.log("global", a) fn() var b = 100 function fn() { var c = 200 console.log(b) //當前作用域沒有定義的變量叫做自由變量 console.log(c) } fn() var a = 100 function f1() { var b = 200 function f2() { var c = 300 console.log(a) console.log(b) console.log(c) } f2() } f1() //哪個作用域定義了f1這個函數,f1的父級作用域就是誰閉包
//閉包應用:1.函數作為返回值 function F1() { var a = 100 //返回一個函數 return function () { console.log(a) //100 } } //f1得到一個函數 var f1 = F1() var a = 200 f1() //2.函數作為參數傳遞 function F1() { var a = 100 return function() { console.log(a) //100 } } var f1 = F1() function F2(fn) { var a = 200 fn() } F2(f1)面試題
9.說一下對變量提升的理解
變量定義、函數聲明會提前。
10.說明this幾種不同的使用場景
作為構造函數、對象屬性、普通函數執行,call apply bind
11.創建10個標簽,點擊時彈出對應序號
var i for (i = 0; i < 10; i++) { (function (i) { var a = document.createElement("a") a.innerHTML = i + "
" a.addEventListener("click", function (e) { e.preventDefault() alert(i) }) document.body.appendChild(a) })(i) }
12.如何理解作用域
自由變量、作用域鏈,即自由變量的尋找、閉包的兩個場景。
13.實際開發中閉包的應用
封裝變量,收斂權限 案例:
function isFirstLoad() { var _list = [] return function (id) { if (_list.indexOf(id) >=0) { return false } else { _list.push(id) return true } } } var firstLoad = isFirstLoad() console.log(firstLoad(10)) console.log(firstLoad(10)) console.log(firstLoad(20)) console.log(firstLoad(20))
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/88928.html
摘要:線程的劃分尺度小于進程,使得多線程程序的并發性高。線程在執行過程中與進程還是有區別的。每個獨立的線程有一個程序運行的入口順序執行序列和程序的出口。從邏輯角度來看,多線程的意義在于一個應用程序中,有多個執行部分可以同時執行。 showImg(https://segmentfault.com/img/bVbv2GE?w=900&h=400); 前言 本文講解 56 道 JavaScript...
摘要:最近面試幾家前端職位,想知道目前的前端面試題是偏向哪一塊,都主要問到的是語法,閉包,原型鏈,繼承那一塊。并且將面試題的知識點匯總一下。參考網站面試題圖片過多的時候如何優化圖標很多的時候可以用雪碧圖圖片過大時候可以壓縮一下。 最近面試幾家前端職位,想知道目前的前端面試題是偏向哪一塊,都主要問到的是ES6語法,閉包,原型鏈,繼承那一塊。并且將面試題的知識點匯總一下。有助于下次面試。 1.H...
摘要:插件開發前端掘金作者原文地址譯者插件是為應用添加全局功能的一種強大而且簡單的方式。提供了與使用掌控異步前端掘金教你使用在行代碼內優雅的實現文件分片斷點續傳。 Vue.js 插件開發 - 前端 - 掘金作者:Joshua Bemenderfer原文地址: creating-custom-plugins譯者:jeneser Vue.js插件是為應用添加全局功能的一種強大而且簡單的方式。插....
閱讀 3280·2021-09-30 09:47
閱讀 2296·2021-09-10 10:51
閱讀 1897·2021-09-08 09:36
閱讀 2931·2019-08-30 12:56
閱讀 3034·2019-08-30 11:16
閱讀 2627·2019-08-29 16:40
閱讀 2999·2019-08-29 15:25
閱讀 1637·2019-08-29 11:02