JS基礎細節知識

Rocky1發表於2019-02-25
JS

JS亦難亦簡，基礎就像給水修渠，基礎打好，自然而然so ......！

JS基礎細節知識

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賦值2、為假給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 catch

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：宣告的變數不進行變數提升

程式碼執行之前進行變數宣告，但是不進行提升

變數名不能重名

39.jQuery的事件不需要on，把方法直接傳給事件的回撥函式;

40.document.getElementById(“id名”) 在IE6、7中會把表單元素的name當做ID值獲取到

41.變數提升IE10及以下，function宣告的函式，即宣告又定義

42.在touchend的事件中，不存在e.touches這個屬性；會把觸控資訊儲存到changedTouches中

JS基礎細節知識

{key:value,key1:value1…}以一個花括號包裹，多個鍵值對之間用","隔開，沒有順序

獲取物件屬性：

1、obj.屬性名

2、obj[“屬性名”]

替換物件屬性

1、obj.已有屬性名=值

2、obj[“已有屬性名”]=值

新增物件屬性

1、obj.新增屬性名=值

2、obj[“新增屬性名”]=值

刪除物件屬性

1、delete obj.屬性名

2、delete obj[“屬性名”]

1.正則

var reg=/abc/g; //字面量建立正則

//建構函式建立正則  （"正則的主題","修飾符"）
var reg1=new RegExp("abc","g");

var str="abcDABCD"

str.replace(/cd/ig, "-");

//正則修飾符可以疊加到一塊寫
複製程式碼

undefined：

1、如果變數只宣告，沒有賦值，那麼預設儲存的值就是undefined

var c;

console.log(c);


2、如果獲取物件的屬性名對應的屬性值，如果屬性值名不存在，獲取的值是undefined

3、如果函式的形參沒有對應的實參，那麼形參預設儲存值是undefined

4、如果函式沒有return，那麼預設值的返回值也是undefined
複製程式碼

4、null空值（現在沒有，以後可能會有）

返回值為null的情況：

1、通過Id獲取元素的時候，獲取不到返回null

2、銷燬物件時，給他賦值為null

3、正則捕獲物件時(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中有特定意義的關鍵字

1、全域性作用域下的this指向window、和window是同一個空間地址

console.log(this);
console.log(window);
this.a=1
複製程式碼

2、如果給元素的事件行為繫結函式、那麼函式中的this指向當前被繫結的那個元素

oBox.onclick=function(){
    console.log(this);//this---oBox}
複製程式碼

3、函式中的this、要看函式執行前有沒有“.”、有的情況下this就指向誰、沒有就指向window

4、自執行函式中的this永遠指向window

5、定時器中函式的this指向window

6、建構函式中的this指向當前的例項

7、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

分享一波專屬表情包戳我！

JS基礎細節知識

相關文章