JS測試文章

csnotes發表於2024-05-19
JS

目錄
  • 1. HOOK
    • 1.1. 直接替換函式
    • 1.2. 為物件的屬性賦值的方式
  • 2. chrome控制檯
  • 3. 函式
    • 3.1. 箭頭函式
    • 3.2. arguments 物件
  • 4. 物件
    • 4.1. 原型繼承
    • 4.2. 訪問物件內的方法：
    • 4.3. 物件構造器函式
    • 4.4. 內建構造器
    • 4.5. 內建構造器的省略寫法
    • 4.6. JSON物件
    • 4.7. JSON VS XML

1. HOOK


原理： JS是一種弱型別語言，同一個變數可以多次定義。

  • 不同JS檔案，中類，中的函式hook

1.1. 直接替換函式


簡單、粗暴易被檢測

// 替換原有函式
var originalFunction = window.functionName;
window.functionName = function() {
  // 自定義操作和行為
  originalFunction.apply(this, arguments);
};

1.2. 為物件的屬性賦值的方式


Object.defineProperty 透過


2. chrome控制檯



3. 函式



3.1. 箭頭函式


(單一引數) => {函式宣告}
單一引數 => {函式宣告}
() => {函式宣告} //沒有引數


(引數1) => 表示式(單一)
// 相當於：(引數1) =>{ return 表示式; }
//如果函式部分只是一個語句，則可以省略 return 關鍵字和大括號 {}
// ES5
var x = function(x, y) {
     return x * y;
}
// ES6
const x = (x, y) => x * y;
// const比使用 var 更安全，因為函式表示式始終是一個常量。

3.2. arguments 物件


函式有個內建的物件 arguments 物件，包含了函式呼叫的引數陣列。

函式呼叫的引數太多（超過宣告）時可使用。

x = findMax(1, 123, 500, 115, 44, 88);

function findMax() {
    var i;
    var max = -Infinity;
    for (i = 0; i < arguments.length; i++) {
        if (arguments[i] > max) {
            max = arguments[i];
        }
    }
    return max;
}

定義時，不規定引數型別，不檢查傳引數量。


4. 物件

物件： 擁有屬性和方法，的特殊資料型別。


4.1. 原型繼承

物件都從原型繼承屬性和方法。
比如： 陣列物件繼承自 Array.prototype。Person 物件繼承自 Person.prototype。

向物件新增屬性和方法

function Person(first, last) {
    this.firstName = first;
    this.lastName = last;
}
Person.prototype.nationality = "English";
//新增nationality屬性

function Person(first, last) {
    this.firstName = first;
    this.lastName = last;
}
Person.prototype.name = function() {
    return this.firstName + " " + this.lastName;
};
//新增name()方法

4.2. 訪問物件內的方法：

name = person.fullName();  //呼叫函式
name = person.fullName;  
//返回函式定義的字串
//function() { return this.firstName + " " + this.lastName; }

幾乎所有的物件都是 Object 型別的例項，它們都會從 Object.prototype 繼承屬性和方法。


4.3. 物件構造器函式

function Person(first, last) {
  this.firstName = first;
  this.lastName = last;
}

var x1 = new Person("Bill", "Gates");

函式名，首字母大寫
是個函式，不用new，this關鍵字將指向全域性window物件。


4.4. 內建構造器

var x1 = new Object();    // 一個新的 Object 物件
var x2 = new String();    // 一個新的 String 物件
var x3 = new Number();    // 一個新的 Number 物件

4.5. 內建構造器的省略寫法

var x1 = {};            // 新物件
var x2 = "";            // 新的原始字串
var x3 = 0;             // 新的原始數值
var x4 = false;         // 新的原始邏輯值
var x5 = [];            // 新的陣列物件
var x6 = /()/           // 新的正規表示式物件
var x7 = function(){};  // 新的函式物件

4.6. JSON物件

瀏覽器與伺服器之間進行交換時，這些資料只能是文字。
JSON 屬於文字。

物件轉換為JSON

var myObj = { name:"Bill Gates",  age:62, city:"Seattle" };
var myJSON =  JSON.stringify(myObj);
window.location = "demo_json.php?x=" + myJSON;

JSON 轉換為物件

var myJSON = '{ "name":"Bill Gates",  "age":62, "city":"Seattle" }';
var myObj =  JSON.parse(myJSON);
document.getElementById("demo").innerHTML = myObj.name;

4.7. JSON VS XML

XML也是純文字。
XML需要解析器
JSON 和 XML 都能被 XMLHttpRequest 讀取

JSON 例項

{"employees":[
    { "firstName":"Bill", "lastName":"Gates" },
    { "firstName":"Steve", "lastName":"Jobs" },
    { "firstName":"Elon", "lastName":"Musk" }
]}

XML例項

<employees>
    <employee>
         <firstName>Bill</firstName>
         <lastName>Gates</lastName>
     </employee>
     <employee>
         <firstName>Steve</firstName>
         <lastName>Jobs</lastName>
     </employee>
</employees>

事件
冒泡：
捕獲：

JS資料型別

  • 值型別：
    字串String
    數字Number
    布林Boolean
    空Null
    未定義Undefined
    Symbol：ES6引入，表獨一無二的值。

  • 物件型別：
    物件Object
    陣列Array
    函式Function
    正則RegExp
    日期Date


相關文章