JS基礎細節知識
JS亦難亦簡，基礎就像給水修渠，基礎打好，天然而然so ......！
1.全部的js代碼都要寫在script標籤中
2.一個頁面中能夠放多個script標籤
3.在js中把標籤叫作元素
4.若是script使用src屬性引入其餘文件 那麼script中寫的代碼將失效
5.script標籤不能夠嵌套
6.js的引入方式：內嵌式 外鏈式 行內式
7.js的引入方式不分優先級，後面的會把前面的覆蓋
8.在賦值操做中邏輯或
var a=1||2；//先驗證1真假、爲真給a賦值1
複製代碼
9.在賦值操做中邏輯與
var a=1&&2; //先驗證1真假、爲真給a賦值二、爲假給a
賦值1
複製代碼
10.瀏覽器會實時監聽集合，當集合數量發生改變時，獲取的集合數量也會變化
<ul id="list">
<li>88</li>
<li>90</li>
<li>78</li>
<li>86</li>
<li>92</li>
</ul>
<button id="btn">排序</button>
<script>
var oLis = document.getElementsByTagName("li");
btn.onclick= function () {
var li = document.createElement("li");
li.innerHTML=100;
ul.appendChild(li);
console.log(oLis);
}
// 輸出6個li;瀏覽器會對li集合進行實時監聽
//當頁面中li個數發生變化那麼此集合也會隨着發生改變
</script>
複製代碼
11.函數能夠在聲明以前調用：
myFunction(5);
function myFunction(y) {
return y * y;
}
複製代碼
12.函數可做爲一個值使用：
function myFunction(a, b) {
return a * b;
}
var x = myFunction(4, 3);
//x就等於函數運算的結果
//x=12；
複製代碼
13.在 JavaScript 中使用 typeof 操做符判斷函數類型將返回 "function"
14.JavaScript 函數描述爲一個對象更加準確
15.JavaScript 函數有 屬性 和 方法
16.arguments.length 屬性返回函數調用過程接收到的參數個數
function myFunction(a, b) {
return arguments.length;
}
document.getElementById("demo").innerHTML = myFunction(4, 3) //2
複製代碼
17.toString() 方法將函數做爲一個字符串返回:
function myFunction(a, b) {
return a * b;
}
var txt = myFunction.toString()
複製代碼
18. 函數定義做爲對象的屬性，稱之爲對象方法函數若是用於建立新的對象，稱之爲對象的構造函數
19.經過arguments找到函數實參最大的值
x = findMax(1, 123, 500, 115, 44, 88);
function findMax() {
var i, max = arguments[0];
if(arguments.length < 2) return max;
for (i = 0; i < arguments.length; i++) {
if (arguments[i] > max) {
max = arguments[i];
}
}
return max;
}
複製代碼
20.在JavaScript中，能夠引用對象的值
21.所以咱們在函數內部修改對象的屬性就會修改其初始的值
22.修改對象屬性可做用於函數外部（全局變量）
23.修改對象屬性在函數外是可見的
24.函數做爲全局對象調用，會使 this 的值成爲全局對象。使用 window 對象做爲一個變量容易形成程序崩潰
25. 函數做爲對象方法調用，會使得 this 的值成爲對象自己
26.若是函數調用前使用了 new 關鍵字, 則是調用了構造函數
27.構造函數的調用會建立一個新的對象。新對象會繼承構造函數的屬性和方法
28.構造函數中 this 關鍵字沒有任何的值。this 的值在函數調用實例化對象(new object)時建立
29.做爲函數方法調用函數時，此函數執行了至關於 java 中靜態函數的功能
<script>
var myObject, myArray;
myObject={
name: "hahaha ",
hsk: "en"
};
function myFunction(a, b) {
alert(this);
return this.name +this.hsk;
}
myArray = [10, 2]
myObject = myFunction.apply(myObject, myArray)
複製代碼
30. 變量聲明時若是不使用 var 關鍵字，那麼它就是一個全局變量，即使它在函數內定義
31. 閉包是可訪問上一層函數做用域裏變量的函數，即使上一層函數已經關閉
32.類數組轉數組
//類數組轉數組
function sum(){
var ary=[].slice.call(arguments);
}
sum(1,2,33,88,56,88,92)
console.log(ary);
複製代碼
33.js異常捕獲
try catchhtml
try{
console.log(a);
}catch(w){
w是一個對象
console.log(w.message);//w是錯誤信息
throw new Error(w.message);//拋出異常信息；此行代碼下面都不運行
console.log(200);
console.log(100);
}
複製代碼
34.字符串不能經過索引來改變字符中的某一項，要改變只能從新賦值
var myStr = "Bob";
myStr[0]="j"
var myStr = "Bob";
myStr = "Job";
複製代碼
35.獲取字符串的最後一項
var sTr="wdaefaegg";
var s=sTr[sTr.length-1]
複製代碼
36.typeof/instanceof/constructor/Object.prototype.toString.call(實例)
typeof只能監測基本數據類型和function
instanceof 檢測某個實例是否屬於這個類，是返回true/不是返回false
用字面量建立的基本數據類型的值檢測不了
只要類在實例的原型鏈上都返回true
constructor 原型上的一個屬性，指向原型上所屬的類
實例.constructor===類
Object.prototype.toString.call
全部數據類型均可以檢測
複製代碼
37.用行間屬性存儲當前img標籤的真實圖片的路徑
38.let：聲明的變量不進行變量提高
代碼執行以前進行變量聲明，可是不進行提高java
變量名不能重名數組
39.jQuery的事件不須要on，把方法直接傳給事件的回調函數;
40.document.getElementById(「id名」) 在IE六、7中會把表單元素的name當作ID值獲取到
41.變量提高IE10及如下，function聲明的函數，即聲明又定義
42.在touchend的事件中，不存在e.touches這個屬性；會把觸摸信息存儲到changedTouches中
{key:value,key1:value1…}以一個花括號包裹，多個鍵值對之間用","隔開，沒有順序
獲取對象屬性：
一、obj.屬性名瀏覽器
二、obj[「屬性名」]bash
替換對象屬性
一、obj.已有屬性名=值閉包
二、obj[「已有屬性名」]=值app
新增對象屬性
一、obj.新增屬性名=值函數
二、obj[「新增屬性名」]=值ui
刪除對象屬性
一、delete obj.屬性名this
二、delete obj[「屬性名」]
1.正則
var reg=/abc/g; //字面量建立正則
//構造函數建立正則 （"正則的主題","修飾符"）
var reg1=new RegExp("abc","g");
var str="abcDABCD"
str.replace(/cd/ig, "-");
//正則修飾符能夠疊加到一塊寫
複製代碼
undefined：
一、若是變量只聲明，沒有賦值，那麼默認存儲的值就是undefined
var c;
console.log(c);
二、若是獲取對象的屬性名對應的屬性值，若是屬性值名不存在，獲取的值是undefined
三、若是函數的形參沒有對應的實參，那麼形參默認儲存值是undefined
四、若是函數沒有return，那麼默認值的返回值也是undefined
複製代碼
四、null空值（如今沒有，之後可能會有）
返回值爲null的狀況：
一、經過Id獲取元素的時候，獲取不到返回null
二、銷燬對象時，給他賦值爲null
三、正則捕獲對象時(reg.exec())，沒有捕獲到內容，返回null
若是想把字符串變成數字直接後面加上0
若是想把數字變成字符串直接後面加上空字符串
比較規律
NaN 和本身都不相等
對象 == 布爾
對象先轉字符串，再轉數字，布爾轉數字
對象 == 對象
比較的是空間地址
對象 == 數字
對象先轉字符串，再轉數字
對象 == 字符串
對象轉字符串，字符串比較
布爾 == 字符串
布爾轉數字，字符串轉數字
布爾 == 數字
布爾轉數字
字符串 == 數字
字符串轉數字
變量提高
造成全局做用域---> 變量提高（var、function）--> 代碼從上到下執行
無論條件是否成立，都要進行變量提高
在最新版本的瀏覽器中，對function函數，只聲明不定義
在舊版本瀏覽器中，帶function的不只聲明，還要定義
in : 檢測屬性名是否屬於這個對象；若是屬於返回true，不屬於返回false
變量提高只發生等號的左邊
return下面的代碼須要進行變量提高；可是return後面的代碼不進行變量提高
return : 1. 返回值 2. 停止代碼再也不向下運行
若是變量重複，不須要從新聲明，可是要從新定義
匿名函數不須要進行變量提高
做用域鏈
當獲取變量對應值時，若是當前做用域不存在，須要向上一級做用域查找
函數的上一級做用域跟函數在哪執行沒有關係==跟函數在哪定義有關，函數在哪一個做用域下定義，上一級做用域就是誰 全部做爲值類型的都是數據類型中的一種
在JS中只要遇到報錯，代碼當即中止，再也不向下執行
私有做用域中帶war的是私有變量、不帶war的不是私有變量它會向上級做用域查找
在做用域鏈查找的過程當中、若是找到win也沒有這個變量、至關於給win設置屬性
function fn(){
b=13;
console.log(b);
}
fn();
console.log(b);
複製代碼
在js變量提高代碼運行時、當條件成立、進入判斷體中（在ES6中、它是一個塊級做用域）、先把fn聲明和定義了、也就是判斷體中代碼執行以前、fn就賦值了、
在塊級做用域下、帶war的和function的不能夠重名
函數有形參沒實參始終是undefined
this
指js中有特定意義的關鍵字
一、全局做用域下的this指向window、和window是同一個空間地址
console.log(this);
console.log(window);
this.a=1
複製代碼
二、若是給元素的事件行爲綁定函數、那麼函數中的this指向當前被綁定的那個元素
oBox.onclick=function(){
console.log(this);//this---oBox}
複製代碼
三、函數中的this、要看函數執行前有沒有「.」、有的狀況下this就指向誰、沒有就指向window
四、自執行函數中的this永遠指向window
五、定時器中函數的this指向window
六、構造函數中的this指向當前的實例
七、call、apply、bind能夠改變函數中this的指向
let
在js中let不存在變量提高、let執行時會造成私有做用域
let在相同做用域中、let不能聲明相同名字變量、有重名直接報錯
無論什麼方式在當前做用域下聲明瞭變量==、再次==使用let建立都會報錯
暫時性死區
在原有瀏覽器渲染機制下、基於typeof等邏輯運算符檢測一個未被聲明的變量、不會報錯、返回undefined
若是當前變量是基於ES6語法處理、在沒有聲明這個變量時、使用typeof檢測則直接報錯、不是undefined、這樣解決了暫時性死區
new：操做符：在函數執行前加new
1.函數執行前造成一個私有做用域、代碼執行以前默認建立空的對象
2.而且改變了當前做用域下的this指向、讓其指向那個空對象
3.當代碼運行完、把這個對象返回
普通函數和構造函數
"."的優先級大於new這個操做符
括號的優先級高於"."
經過new這種方式建立一個數組
var f=new Array(12,12)
console.log(f);
//若是隻有一個參數，表明數組的長度
// 不是一個參數就表明數組成員的每一項
複製代碼
嚴格模式
在嚴格模式下arguments和形參沒有映射機制
在嚴格模式下不容許給一個對象設置重複屬性名的
obj={n:10,n:20}
複製代碼
在嚴格模式下、函數執行、若是沒有明確指定執行的主體（函數前面沒有點）再也不像非嚴格模式下、統一交給window、而是讓this指向undefined、表明沒有執行主體
嚴格模式下、有執行主體this就指向誰、沒有執行主體、this就是undefined
詳見高程三 嚴格模式和非嚴格模式的彙總
構造函數
構造函數中的this永遠指向當前的實例
經過this給實例新增的屬性都是私有屬性
2.若是沒有參數，能夠省略小括號；
3.若是return一個基本數據類型的值，不會覆蓋默認返回的那個對象，若是return引用的類型，會將默認的那個覆蓋掉；
4.instanceof ：檢測實例是否屬於某個類；
實例必定是一個對象
5.hasOwnProperty:檢測當前屬性是不是私有屬性，若是是返回true，不是返回false
console.log(d.hasOwnProperty("a"));//true
console.log(d.hasOwnProperty("toString"));//false
console.log(d.hasOwnProperty("c"));// false
複製代碼
封裝檢測是否數據類型屬於私有屬性仍是公有屬性
function hasPublicProperty(obj,attr) {
return attr in obj && !obj.hasOwnProperty(attr)?true:false;}
複製代碼
原型
原型指向能夠被改變的
實例對象的原型__proto__指向的是該對象所在的構造函數的原型對象
構造函數的原型對象(prototype)指向若是改變了，實例對象的原型(proto)指向也會發生改變
實例對象和原型對象之間的關係是經過__proto__ 原型來聯繫起來的，這個關係就是原型鏈
若是原型指向改變了，那麼就應該再原型改變指向以後添加原型方法
原型擴展
若是擴展的屬性名和內置的屬性名相同時，會把原有的會覆蓋
原型繼承
prototype 實現繼承
利用prototype，將Student 的prototype 指向 Person 來達到繼承效果
優勢：繼承了父級原型上的方法
缺點:實例化多個Student 都必須共用相同的name 和 age
Student.prototype.constructor=Student
注意:使用原型繼承時，須要將構造器的指向更改回正確的指向
function Person(name,age){
this.name=name;
this.age=age;
}
Person.prototype.eat=function(){
console.log("Person 吃飯")
}
function Student(num,score){
this.num=num
this.score=score
}
//繼承
Student.prototype=new Person("小紅",10)
Student.prototype.constructor=Student
var stu =new Student(2016002288,80)
stu.eat()//Person 吃飯
複製代碼
組合繼承
function Person(name,age,sex){
this.name=name;
this.age=age;
this.sex=sex;
}
Person.prototype.sayHi=function(){
console.log("你好")
}
function Student(name,age,sex,score){
//借用構造函數
Person.call(this,name,age,sex)
this.score=score
}
// 改變了原型指向
Student.prototype=new Person();//不傳值
Student.prototype.eat=function(){
console.log("吃東西");
}
var stu=new Student("小黑",20,"男","100分")
console.log(stu.name,stu.age,stu.sex,stu.score);
stu.sayHi()//你好
stu.eat()//吃東西
複製代碼
call
在嚴格模式下，若是不傳或傳undefined，那麼this就是undefined 傳null 就是null
apply
只能接收最多兩個參數 和call不一樣的是傳參不一樣
bind
bind 方法的返回值就是改變this以後的fn
call apply bind
都是改變this的指向
call apply 當即執行函數
bind 不當即執行函數 預處理函數中的this
分享一波專屬表情包戳我！
- 1. js基礎知識——節點操做
- 2. JS基礎知識點（15）——Dom節點
- 3. JS基礎知識
- 4. js基礎知識
- 5. Js基礎知識
- 6. js — 基礎知識
- 7. JS基礎知識整合
- 8. js基礎知識積累
- 9. js基礎知識點
- 10. js基礎知識筆記
- 更多相關文章...
- • Kotlin 基礎語法 - Kotlin 教程
- • Scala 基礎語法 - Scala教程
- • 爲了進字節跳動，我精選了29道Java經典算法題，帶詳細講解
- • Kotlin學習（二）基本類型
-
每一个你不满意的现在，都有一个你没有努力的曾经。
- 1. js基礎知識——節點操做
- 2. JS基礎知識點（15）——Dom節點
- 3. JS基礎知識
- 4. js基礎知識
- 5. Js基礎知識
- 6. js — 基礎知識
- 7. JS基礎知識整合
- 8. js基礎知識積累
- 9. js基礎知識點
- 10. js基礎知識筆記