javascript
JavaScript高级day01-PM【对象、函数、回调函数、IIFE、this、关于语句分号问题、webstorm代码模板、复习】
筆記、視頻、源碼：JavaScript(基礎、高級)筆記匯總表【尚硅谷JavaScript全套教程完整版】
目? ?錄
P7?07.尚硅谷_JS高級_對象?23:30
1. 什么是對象？
2. 為什么要用對象？
3. 對象的組成
4. 如何訪問對象內部數據？
5. 什么時候必須使用['屬性名']的方式？
P8?08.尚硅谷_JS高級_函數?15:59
1. 什么是函數？
2. 為什么要用函數？
3. 如何定義函數？
4. 如何調用(執行)函數？
P9?09.尚硅谷_JS高級_回調函數?09:54
1. 什么函數才是回調函數？
2. 常見的回調函數？
P10?10.尚硅谷_JS高級_IIFE?14:49
P11?11.尚硅谷_JS高級_函數中的this?10:50
1. this是什么？
2. 如何確定this的值？
P12?12.尚硅谷_JS高級_關于語句分號問題?18:38
P13?13.尚硅谷_JS高級_webstorm設置?23:02
WebStorm 導入\導出 設置（Import Settings ...\Export Settings ...）
WebStrom 快捷鍵
WebStrom 代碼模板
P14?14.尚硅谷_JS高級_復習?55:51
1：數據類型
2：數據、變量與內存
3：對象
4：函數
基礎總結深入
數據類型的分類和判斷
數據,變量, 內存的理解
對象的理解和使用
函數的理解和使用
P7?07.尚硅谷_JS高級_對象?23:30
1. 什么是對象？
1. 什么是對象？
- 多個數據的封裝體（集合體）。
- 用于保存多個數據的容器。
- 一個對象代表現實中的一個事物（代表現實中的某個事物，是該事物在編程中的抽象）。
2. 為什么要用對象？
2. 為什么要用對象？
- 便于對多個數據進行統一管理。
3. 對象的組成
3. 對象的組成? ?對象中的函數是方法；對象中的字符串、數字等等叫屬性。
- 屬性：屬性名(字符串)和屬性值(任意)組成。（代表現實事物的狀態數據；屬性名都是字符串類型，屬性值是任意類型）
- 方法：一種特別的屬性(屬性值是函數)。（代表現實事物的行為數據）
4. 如何訪問對象內部數據？
4. 如何訪問對象內部數據？
- .屬性名：編碼簡單，但有時不能用
- ['屬性名']：編碼麻煩，但通用
5. 什么時候必須使用['屬性名']的方式？
問題：什么時候必須使用['屬性名']的方式？
- 屬性名包含特殊字符：-、空格（屬性名不是合法的標識名）。
- 屬性名不確定。
P8?08.尚硅谷_JS高級_函數?15:59
1. 什么是函數？
1. 什么是函數？
- 實現特定功能的n條語句的封裝體；
- 只有函數是可執行的，其它類型的數據是不能執行；
- 函數也是對象。
2. 為什么要用函數？
2. 為什么要用函數？
- 提高代碼復用；
- 便于閱讀和交流。
3. 如何定義函數？
3. 如何定義函數？
- 函數聲明：整體會被提升到當前作用域頂部。
- 表達式：也會提升到頂部，但是只有變量名提升。
?
4. 如何調用(執行)函數？
4. 如何調用(執行)函數？
- test()：直接調用
- obj.test()：通過對象調用
- new test()：new 調用
- test.call/apply(obj)：臨時讓test成為obj的方法進行調用
P9?09.尚硅谷_JS高級_回調函數?09:54
1. 什么函數才是回調函數？
1. 什么函數才是回調函數？
2. 常見的回調函數？
2. 常見的回調函數？
- dom事件回調函數 ==> 發生事件的dom元素
- 定時器回調函數 ==> window
- 超時定時器
- 循環定時器
- 后面學：ajax請求回調函數、生命周期回調函數
??
P10?10.尚硅谷_JS高級_IIFE?14:49
1. 理解
- 全稱：Immediately-Invoked Function Expression，立即調用函數表達式
- 別名：匿名函數自調用
2. 作用
- 隱藏內部實現
- 不會污染外部(全局)命名空間
- 用它來編碼js模塊
?
就是一個匿名函數 ?然后去調用它，它會立即執行，并且只能執行一次。
得是一個表達式，不能是函數聲明。
56集李立超老師講過，只不過沒有提IIFE，內容是一樣的。
P11?11.尚硅谷_JS高級_函數中的this?10:50
1. this是什么？
1. this是什么？
- 任何函數本質上都是通過某個對象來調用的，如果沒有直接指定就是window。
- 所有函數內部都有一個變量this。
- 它的值是調用函數的當前對象。
- 一個關鍵字，一個內置的引用變量；
- 在函數中都可以直接使用this；
- this代表調用函數的當前對象；
- 在定義函數時，this還沒有確定，只有在執行時才動態確定(綁定)的。
根據 ?調用函數的方式 ?不同，this會指向不同的對象：
2. 如何確定this的值？
- test()：window
- p.test()：p
- new test()：新創建的對象
- p.call(obj)：obj
前置知識：本質上任何函數在執行時都是通過某個對象調用的。
??
<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8"><title>07_函數中的this</title></head><body><script type="text/javascript">function Person(color) {console.log(this);this.color = color;this.getColor = function() {console.log(this);return this.color;};this.setColor = function(color) {console.log(this);this.color = color;};}Person("red"); //this是誰? Windowvar p = new Person("yello"); //this是誰? pp.getColor(); //this是誰? pvar obj = {};p.setColor.call(obj, "black"); //this是誰? obj 讓setColor方法成為obj對象的方法進行調用var test = p.setColor;test(); //this是誰? windowfunction fun1() {function fun2() {console.log(this);}fun2(); //this是誰? window}fun1();</script></body> </html>P12?12.尚硅谷_JS高級_關于語句分號問題?18:38
??
??
<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8"><title>01_分號問題</title></head><body><script type="text/javascript">// 情形一: 小括號開頭的前一條語句var a = 3;(function() {})/*錯誤理解: 將3看成是函數調用var a = 3(function () {})*/// 情形二: 中方括號開頭的前一條語句var b = a;[1, 3, 5].forEach(function(item) {console.log(item)})/*錯誤理解:a = b[5].forEach(function(e){console.log(e)})*/</script></body> </html>P13?13.尚硅谷_JS高級_webstorm設置?23:02
WebStorm 導入\導出 設置（Import Settings ...\Export Settings ...）
??
?
WebStrom 快捷鍵
* 向下復制一行(Duplicate Lines) Ctrl+Down * 修改變量名與方法名 Alt+Shift+R * 向下移動行 Alt+Down * 顯示設置窗口 Ctrl+Alt+S * 向上開始新的一行(Start New Line before current) Ctrl+Alt+Enter * 查看文檔說明 F2 * 光標移動到行首(Line Start) Ctrl+Shift+S * 光標移動到行尾(Line End) Ctrl+Shift+D * 顯示設置窗口 Ctrl+Alt+S * 向上開始新的一行(Start New Line before current) Ctrl+Alt+Enter * 向下開始新的一行 Shift+Enter * 提示補全 Alt+/ * 查看文件結構 Ctrl+O * 萬能解錯/生成返回值變量 Alt + Enter * 單選注釋 Ctrl + / * 多行注釋 Ctrl+Shift+/ * 格式化代碼 Ctrl+shift+F * 大寫轉小寫 Ctrl+shift+Y * 小寫轉大寫 Ctrl+shift+X * 查找/替換(當前) Ctrl+F * 查找/替換(全局) Ctrl+H * 最近打開過的文件 Ctrl+E * 刪除一行或選中行 Ctrl+D * 查找文件 Double Shift * 查找某個類 Ctrl+Shift+T * 提示方法參數類型(Parameter Info) Ctrl+Alt+/ * 抽取方法(Extract Method) Alt+Shift+Q * 補全當前語句 Ctrl+Shift +Enter * 打開指定文件夾(Show in Explorer) Ctrl+Shift+V * 局部變量抽取為成員變量(Introduce Field) Alt+Shift+F * 查找方法在哪有被調用(Call Hierarchy) Ctrl+Shift+H * 展開當前代碼(Expand) Alt+Shift+A * 展開所有代碼(Expand All) Alt+A * 收縮當前代碼(Collapse) Alt+Shift+C * 收縮所有代碼(Collapse All) Alt+C * 打開默認瀏覽器(Open In Browser) Ctrl+B* 提示忽略大小寫 : Settings -->Code Completion-->case sensitive Completion-->選擇none * 設置文件編碼 : Settings-->File Encodings-->都選擇為utf-8WebStrom 代碼模板
---------------------------HTML模板------------------------------* scr1script結構<script type='text/javascript'></script>* scr2script結構(引入js)<script type="text/javascript" src="$src$"></script>---------------------------JS模板------------------------------* cons日志輸出console.log($content$);* for1一般for循環for (var $INDEX$ = 0; $INDEX$ < $ARRAY$.length; $INDEX$++) {var $VAR$ = $ARRAY$[$INDEX$];$END$}* for2for in 循環for (var $VAR$ in $ARRAY$) {$END$}* funnfunction $fun$($PARAM$) {$END$}* if1一重條件if($condition$){$statement$}* if2二重條件if($condition$){$statement$} else {$statement2$}* use應用嚴格模式"use strict";---------------------------AngularJs模板------------------------------* $v為作用域添加屬性$scope.name = xxxx; * $f為作用域添加方法$scope.fun = function(){} * $on綁定事件監聽$scope.$on('click', function (event) { }); * $w監聽Angular Model數據$scope.$watch('$watchExpr$',function(newValue, oldValue){ }); * ngmo創建模塊angular.module('name', []); * ngmc定義控制器controller('$cname$', function($scope){$statement$}) * ngmfa通過factory定義服務factory('$factoryName$', function($dependencies$){$END$}) * ngms通過service定義服務service('$serviceName$', function($injectables$) {$END$}) * ngmfi定義過濾器filter('$filterName$', function($injectables$) {return function(input, $args$) {$END$};})------------------------------------------------------------------------P14?14.尚硅谷_JS高級_復習?55:51
1：數據類型
1. undefined與null的區別?
? * undefined代表變量沒有賦值
? * null: 代表變量賦值了, 只是值為null
2. 什么時候將變量賦值為null?
? * 初始化賦值: 將要作為引用變量使用, 但對象還沒有確定
? * 結束時: 將變量指向的對象成為垃圾對象
3. 理解變量類型與數據類型?
? * js的變量本身是沒有類型的, 變量的類型實際上是變量內存中數據的類型
? * 變量類型:
? ? * 基本類型: 保存基本類型數據的變量
? ? * 引用類型: 保存對象地址值的變量
? * 數據對象
? ? * 基本類型
? ? * 對象類型
2：數據、變量與內存
1. 什么是數據?
? * 存儲于內存中代表特定信息的'東東', 本質就是0101二進制
? * 具有可讀和可傳遞的基本特性
? * 萬物(一切)皆數據, 函數也是數據
? * 程序中所有操作的目標: 數據
? ? * 算術運算
? ? * 邏輯運算
? ? * 賦值
? ? * 調用函數傳參
? ? ...
2. 什么是內存?
? * 內存條通電后產生的存儲空間(臨時的)
? * 產生和死亡: 內存條(集成電路板)==>通電==>產生一定容量的存儲空間==>存儲各種數據==>斷電==>內存全部消失
? * 內存的空間是臨時的, 而硬盤的空間是持久的
? * 分配內存: 聲明變量和函數或創建對象時, JS引擎會自動為此分配一定大小的內存來存放對應的數據
? * 釋放內存: 清空內存中的數據, 標識內存可以再分配使用(內存不釋放就不能復用)
? ? * 自動釋放: 棧空間的局部變量
? ? * 垃圾回調器回調: 堆空間的垃圾對象
? * 一塊內存包含2個數據
? ? * 內部存儲的數據(一般數據/地址數據)
? ? * 內存地址值數據
? * 內存分類
? ? * 棧: 全局變量, 局部變量 (空間較小)
? ? * 堆: 對象 (空間較大)
3. 什么是變量?
? * 值可以變化的量, 由變量名與變量值組成
? * 一個變量對應一塊小內存, 變量名用來查找到內存, 變量值就是內存中保存的內容
4. 內存,數據, 變量三者之間的關系
? * 內存是一個容器, 用來存儲程序運行需要操作的數據
? * 變量是內存的標識, 我們通過變量找到對應的內存, 進而操作(讀/寫)內存中的數據
1. 問題1: var a = xxx, a內存中到底保存的是什么?
? * xxx是一個基本數據
? * xxx是一個對象
? * xxx是一個變量
2. 關于引用變量賦值問題
? * 2個引用變量指向同一個對象, 通過一個引用變量修改對象內部數據, 另一個引用變量也看得見
? * 2個引用變量指向同一個對象,讓一個引用變量指向另一個對象, 另一個引用變量還是指向原來的對象
3. 問題: 在js調用函數時傳遞變量參數時, 是值傳遞還是引用傳遞?
? * 只有值傳遞, 沒有引用傳遞, 傳遞的都是變量的值, 只是這個值可能是基本數據, 也可能是地址(引用)數據
? * ?如果后一種看成是引用傳遞, 那就值傳遞和引用傳遞都可以有
4. 問題: JS引擎如何管理內存?
? 1. 內存生命周期
? ? 1). 分配需要的內存
? ? 2). 使用分配到的內存
? ? 3). 不需要時將其釋放/歸還
? 2. 釋放內存
? ? * 為執行函數分配的棧空間內存: 函數執行完自動釋放
? ? * 存儲對象的堆空間內存: 當內存沒有引用指向時, 對象成為垃圾對象, 垃圾回收器后面就會回收釋放此內存
3：對象
1. 什么是對象?
? * 代表現實中的某個事物, 是該事物在編程中的抽象
? * 多個數據的集合體(封裝體)
? * 用于保存多個數據的容器
2. 為什么要用對象?
? * 便于對多個數據進行統一管理
3. 對象的組成
? * 屬性
? ? * 代表現實事物的狀態數據
? ? * 由屬性名和屬性值組成
? ? * 屬性名都是字符串類型, 屬性值是任意類型
? * 方法
? ? * 代表現實事物的行為數據
? ? * 是特別的屬性==>屬性值是函數
4. 如何訪問對象內部數據?
? * .屬性名: 編碼簡單, 但有時不能用
? * ['屬性名']: 編碼麻煩, 但通用
1. 問題1: var a = xxx, a內存中到底保存的是什么?
? * xxx是一個基本數據
? * xxx是一個對象
? * xxx是一個變量
2. 關于引用變量賦值問題
? * 2個引用變量指向同一個對象, 通過一個引用變量修改對象內部數據, 另一個引用變量也看得見
? * 2個引用變量指向同一個對象,讓一個引用變量指向另一個對象, 另一個引用變量還是指向原來的對象
3. 問題: 在js調用函數時傳遞變量參數時, 是值傳遞還是引用傳遞?
? * 只有值傳遞, 沒有引用傳遞, 傳遞的都是變量的值, 只是這個值可能是基本數據, 也可能是地址(引用)數據
? * ?如果后一種看成是引用傳遞, 那就值傳遞和引用傳遞都可以有
4. 問題: JS引擎如何管理內存?
? 1. 內存生命周期
? ? 1). 分配需要的內存
? ? 2). 使用分配到的內存
? ? 3). 不需要時將其釋放/歸還
? 2. 釋放內存
? ? * 為執行函數分配的棧空間內存: 函數執行完自動釋放
? ? * 存儲對象的堆空間內存: 當內存沒有引用指向時, 對象成為垃圾對象, 垃圾回收器后面就會回收釋放此內存
4：函數
1. 什么是函數?
? * 具有特定功能的n條語句的封裝體
? * 只有函數是可執行的, 其它類型的數據是不可執行的
? * 函數也是對象
2. 為什么要用函數?
? * 提高代碼復用
? * 便于閱讀和交流
3. 如何定義函數?
? * 函數聲明
? * 表達式
4. 調用(執行)函數
? * test()
? * new test()
? * obj.test()
? * test.call/apply(obj)
1. 什么函數才是回調函數?
? * 你定義的
? * 你沒有直接調用
? * 但最終它執行了(在特定條件或時刻)
2. 常見的回調函數?
? * DOM事件函數
? * 定時器函數
? * ajax回調函數(后面學)
? * 生命周期回調函數(后面學)
1. 理解
? * 全稱: Immediately-Invoked Function Expression 立即調用函數表達式
? * 別名: 匿名函數自調用
2. 作用
? * 隱藏內部實現
? * 不污染外部命名空間
function Person(color) {
?? ?console.log(this);
?? ?this.color = color;
?? ?this.getColor = function() {
?? ??? ?console.log(this);
?? ??? ?return this.color;
?? ?};
?? ?this.setColor = function(color) {
?? ??? ?console.log(this);
?? ??? ?this.color = color;
?? ?};
}
Person("red"); //this是誰? Window
var p = new Person("yello"); //this是誰? p
p.getColor(); //this是誰? p
var obj = {};
p.setColor.call(obj, "black"); //this是誰? obj 讓setColor方法成為obj對象的方法進行調用
var test = p.setColor;
test(); //this是誰? window
function fun1() {
?? ?function fun2() {
?? ??? ?console.log(this);
?? ?}
?? ?fun2(); //this是誰? window
}
fun1();
基礎總結深入
數據類型的分類和判斷
-
基本(值)類型
-
Number ----- 任意數值 -------- typeof
-
String ----- 任意字符串 ------ typeof
-
Boolean ---- true/false ----- typeof
-
undefined --- undefined ----- typeof/===
-
null -------- null ---------- ===
-
-
對象(引用)類型
-
Object ----- typeof/instanceof
-
Array ------ instanceof
-
Function ---- typeof
-
數據,變量, 內存的理解
-
什么是數據?
-
在內存中可讀的, 可傳遞的保存了特定信息的'東東'
-
一切皆數據, 函數也是數據
-
在內存中的所有操作的目標: 數據
-
-
什么是變量?
-
在程序運行過程中它的值是允許改變的量
-
一個變量對應一塊小內存, 它的值保存在此內存中
-
-
什么是內存?
-
內存條通電后產生的存儲空間(臨時的)
-
一塊內存包含2個方面的數據
-
內部存儲的數據
-
地址值數據
-
-
內存空間的分類
-
棧空間: 全局變量和局部變量
-
堆空間: 對象
-
-
-
內存,數據, 變量三者之間的關系
-
內存是容器, 用來存儲不同數據
-
變量是內存的標識, 通過變量我們可以操作(讀/寫)內存中的數據
-
對象的理解和使用
-
什么是對象?
-
多個數據(屬性)的集合
-
用來保存多個數據(屬性)的容器
-
-
屬性組成:
-
屬性名 : 字符串(標識)
-
屬性值 : 任意類型
-
-
屬性的分類:
-
一般 : 屬性值不是function 描述對象的狀態
-
方法 : 屬性值為function的屬性 描述對象的行為
-
-
特別的對象
-
數組: 屬性名是0,1,2,3之類的索引
-
函數: 可以執行的
-
-
如何操作內部屬性(方法)
-
.屬性名
-
['屬性名'] ?屬性名有特殊字符/屬性名是一個變量?
-
函數的理解和使用
-
什么是函數?
-
用來實現特定功能的, n條語句的封裝體
-
只有函數類型的數據是可以執行的, 其它的都不可以
-
-
為什么要用函數?
-
提高復用性
-
便于閱讀交流
-
-
函數也是對象
-
instanceof Object===true
-
函數有屬性: prototype
-
函數有方法: call()/apply()
-
可以添加新的屬性/方法
-
-
函數的3種不同角色
-
一般函數 : 直接調用
-
構造函數 : 通過new調用
-
對象 : 通過.調用內部的屬性/方法
-
-
函數中的this
-
顯式指定誰: obj.xxx()
-
通過call/apply指定誰調用: xxx.call(obj)
-
不指定誰調用: xxx() : window
-
回調函數: 看背后是通過誰來調用的: window/其它
-
-
匿名函數自調用:
?(function(w, obj){//實現代碼})(window, obj)-
專業術語為: IIFE (Immediately Invoked Function Expression) 立即調用函數表達式
-
-
回調函數的理解
-
什么函數才是回調函數?
-
你定義的
-
你沒有調用
-
但它最終執行了(在一定條件下或某個時刻)
-
-
常用的回調函數
-
dom事件回調函數
-
定時器回調函數
-
ajax請求回調函數(后面講解)
-
生命周期回調函數(后面講解)
-
-
總結
以上是生活随笔為你收集整理的JavaScript高级day01-PM【对象、函数、回调函数、IIFE、this、关于语句分号问题、webstorm代码模板、复习】的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： JavaScript高级day01-AM
- 下一篇： JavaScript高级day02-AM