js 學習筆記 js基礎知識

2022-06-22 04:18:15 字數 4707 閱讀 2163

值型別:字串,數字,bool,symbol

引用型別:object,array,function,null

typeof能識別所有值型別,識別函式,判斷是否是引用型別(不可再細分)

淺拷貝 -- 改變拷貝物件的值,原值改變

深拷貝 -- 改變拷貝物件的值,原值不改變

如何實現深拷貝:

運算子:

當加號運算子時,string和其他型別時,其他型別都會轉為 string;其他情況,都轉化為number型別 , 注: undefined 轉化為number是 為』nan『, 任何number與nan相加都為nan。

其他運算子時, 基本型別都轉換為 number,string型別的帶有字元的比如: '1a' ,'a1' 轉化為 nan 與undefined 一樣。

當object與基本型別,number型別會先呼叫valueof(), string型別會先呼叫tostring(), 如果結果是原始值,則返回原始值,否則繼續用tostring 或 valueof(),繼續計算,如果結果還不是原始值,則丟擲乙個型別錯誤

布林轉化:

!!完全等同於boolean()

除了 == null之外,其他都一律用 ===

型別比較:

如圖所示:

物件和布林值進行比較時,物件先轉換為字串,然後再轉換為數字,布林值直接轉換為數字

物件和字串進行比較時,物件轉換為字串,然後兩者進行比較。

物件和數字進行比較時,物件先轉換為字串,然後轉換為數字,再和數字進行比較。

字串和數字進行比較時,字串轉換成數字,二者再比較。

字串和布林值進行比較時,二者全部轉換成數值再比較。

布林值和數字進行比較時,布林轉換為數字,二者比較。

class people 

say()

}class student extends people

say()

}let a = new student("chuck",10)

a.say()

console.log(a.name)

console.log(a.__proto__.name)

每個 class 都有顯式原型 prototype

每個例項都有隱式原型proto

例項的proto指向對應 class 的 prototype

物件的成員查詢機制依靠原型鏈:當訪問乙個物件的屬性(或方法)時,首先查詢這個物件自身有沒有該屬性;如果沒有就找它的原型;如果還沒有就找原型物件的原型;以此類推一直找到null為止,此時返回undefined。__proto__屬性為查詢機制提供了一條路線,乙個方向。

new在執行時做了什麼:

1.在記憶體中建立乙個新的空物件例項;

2.將物件例項的__proto__屬性指向建構函式的原型物件例項;

3.讓建構函式裡的this指向這個新的物件例項;

4.執行建構函式裡的**,給這個新物件新增成員,最後返回這個新物件。

a instanceof b成立的條件為

左邊a的隱式__proto__鏈上能找到乙個等於右邊b的顯式prototype則為true,否則為false

es6之前常用

原型物件+建構函式組合

function person(uname, age) 

person.prototype.say = function() ;

function student(uname, age, grade)

student.prototype = object.create(person.prototype); // 原型類物件指向父類

student.prototype.constructor = student; //別忘了把constructor指回來

student.prototype.exam = function() ;

student.prototype.say = function() ;

var stu = new student('張三', 16, '高一');

console.log(stu.say()); //輸出:我叫張三,今年16歲。高一學生。

1.首先在子建構函式中用call方法呼叫父建構函式,修改this指向,實現繼承父類的例項屬性;

2.然後修改子建構函式的prototype的指向,無論是寄生組合式繼承,還是組合式繼承,還是我們自己探索時的修改方式,本質都是把子類的原型鏈掛到父建構函式的原型物件上,從而實現子類繼承父類的例項方法;

3.如果需要給子類新增例項方法,掛到子建構函式的prototype上;

4.如果子類的例項方法需要呼叫父類的例項方法,通過父建構函式的原型呼叫,但是要更改this指向。

核心就是原型物件+建構函式組合使用。只使用原型物件,子類無法繼承父類的例項屬性;只使用建構函式,又無法繼承原型物件上的方法。

es6 之後 使用 extends 關鍵字來繼承。

class中,所有的屬性,無論是否在contructor中指定,都會繫結到class的例項物件上

class a 

class b extends a

let b = new b()

console.log(b.__proto__ === b.prototype)

console.log(b.prototype.__proto__ == a.prototype)

閉包是作用域應用的特殊情況,有兩種表現:

1.函式作為引數被傳遞

2.函式作為返回值被傳遞

簡單理解:當乙個巢狀的內部(子)函式引用了巢狀的外部(父)函式的變數(函式)時, 就產生了閉包

js是單執行緒語言,只能同時做一件事,dom渲染時,js執行必須停止,js執行時,dom渲染也必須停止

promise三種狀態:pending、fulfilled、rejected

狀態變化:

1.pending-->fulfilled(成功了)

2.pending-->rejected(失敗了)

狀態變化是不可逆的

執行async函式,返回的是promise物件

await相當於promise的then

try...catch可捕獲異常,代替了promise的catch

巨集任務:settimeout、setinterval、ajax、i/o、ui互動事件(比如dom事件)

微任務:promise**、async/await、process.nexttick(node獨有,註冊函式的優先順序比promise**函式要高)、mutaionobserver

微任務執行時機比巨集任務要早(記住)

注意:script全部**、(這個是執行棧的**,屬於同步**),包括new promise(function())裡面的**,只有then、catch**才是微任務

實現 promise.all

我們可以設定乙個陣列,用它來存放每個 promise 返回的資料,當該陣列的長度等於 promise 任務的個數時,說明拿到了所有的資料,此時就可以把該陣列返回出去了。

然後又因為原生 promise.all 返回的是乙個 promise,所以我們也需要返回乙個 promise,然後把結果資料放入 resolve 中返回出去。

promise.all = promises => )

.catch(err => ) })

} function adddata(data, index)

})}

筆試題:

async function async1() 

async function async2()

console.log('script start');

settimeout(function (), 0)

async1();

new promise(function (resolve) ).then(function() )

console.log('script end');

從上到下,先是2個函式定義

再列印乙個script start

看到settimeout,裡面**函式放入巨集任務佇列等待執行

接著執行async1(),列印async1 start,看到await async2(),執行後列印async2,await後面的語句相當於promise的then**函式,所以是微任務,console.log('async1 end')放入微任務佇列

執行new promise,new promise裡面傳的函式是同步**,列印promise1,執行resolve(),後續觸發的then**是微任務,放入微任務佇列,然後執行同步**列印 ???

列印script end,同步**執行完了

檢查微任務佇列,依次列印async1 end和promise2(這裡指的是chrome/73+瀏覽器,後面會說不同)

嘗試dom渲染(如果dom結構有變化)

檢查巨集任務佇列,列印settimeout

檢查微任務隊列為空,嘗試dom渲染,檢查巨集任務隊列為空,執行結束

JS筆記(一) 基礎知識

一 識別符號 識別符號就是乙個名字,在js中,識別符號用來對變數和函式命名,或者用做js 中某些迴圈語句中的跳轉位置的標記。js的識別符號必須以字母 或 符號開始,後續字元可以是字母 數字 或 符號。二 變數宣告 使用關鍵字var宣告變數。1 varfile 2var book 3var boy 4...

JS基礎知識

本週抽空學習了一些js新手需要知道的知識 1 js中用 來賦值,例如var a 1.2 迴圈結構和c 基本相同。3 簡單 基本 資料型別 number string boolean undefined null。4 複雜 引用 資料型別 object array date function。還有一些...

js基礎知識

1.ecmascript 直譯器 0,1 幾乎沒有相容性問題 2.dom 文件,物件,模型 document object model 相容性一般 3.bom 瀏覽器 物件,模型 browser object model 完全不相容 number string boolean function ob...