1.6 對象

英文名稱：Object 一切皆對象
由key:value對構成

• value可以是變量、數組、對象、函數等
• 函數定義中的this用來引用該函數的“擁有者”

let person = {name: "yxc",age: 18,money: 0,add_money: function (x) {this.money += x;} }

對象屬性與函數的調用方式：

• person.name、person.add_money()
• person[“name”]、person"add_money"

1.7 數組

數組是一種特殊的對象。

類似于C++中的數組，但是數組中的元素類型可以不同

• 數組中的元素可以是變量、數組、對象、函數

let a = [1, 2, "a", "yxc"];let b = [1, // 變量"yxc", // 變量['a', 'b', 3], // 數組function () { // 函數console.log("Hello World");},{ name: "yxc", age: 18 } // 對象 ];

訪問數組中的元素

通過下標

a[0] = 1; // 訪問數組a[]的第0個元素 console.log(a[0]);

數組的常用屬性和函數

• 屬性length：返回數組長度。注意length是屬性，不是函數，因此調用的時候不要加()
• 函數push()：向數組末尾添加元素
• 函數pop()：刪除數組末尾的元素
• 函數splice(a, b)：刪除從a開始的b個元素
• 函數sort()：將整個數組從小到大排序
  • 自定義比較函數：array.sort(cmp)，函數cmp輸入兩個需要比較的元素，返回一個實數，負數表示第一個參數小于第二個參數，0表示相等，正數表示大于。

1.8 函數

• 定義方式

function add(a, b) {return a + b; }let add = function (a, b) {return a + b; }let add = (a, b) => {return a + b; } let add = a=> {//一個變量可以不加括號return a + b; }

• 返回值
  如果未定義返回值，則返回undefined。

1.9 類

與C++中的Class類似。但是不存在私有成員。

• this指向類的實例

定義

class Point {constructor(x, y) { // 構造函數this.x = x; // 成員變量this.y = y;this.init();}init() {this.sum = this.x + this.y; // 成員變量可以在任意的成員函數中定義}toString() { // 成員函數return '(' + this.x + ', ' + this.y + ')';} }let p = new Point(3, 4); console.log(p.toString());

繼承

class ColorPoint extends Point {constructor(x, y, color) {super(x, y); // 這里的super表示父類的構造函數this.color = color;}toString() {return this.color + ' ' + super.toString(); // 調用父類的toString()} }

• super這個關鍵字，既可以當作函數使用，也可以當作對象使用。
  • 作為函數調用時，代表父類的構造函數，且只能用在子類的構造函數之中。
  • super作為對象時，指向父類的原型對象。
• 在子類的構造函數中，只有調用super之后，才可以使用this關鍵字。
• 成員重名時，子類的成員會覆蓋父類的成員。類似于C++中的多態。

靜態方法

在成員函數前添加static關鍵字即可。靜態方法不會被類的實例繼承，只能通過類來調用。例如：

class Point {constructor(x, y) {this.x = x;this.y = y;}toString() {return '(' + this.x + ', ' + this.y + ')';}static print_class_name() {console.log("Point");} }let p = new Point(1, 2); Point.print_class_name(); p.print_class_name(); // 會報錯

靜態變量

在ES6中，只能通過class.propname定義和訪問。例如：

class Point {constructor(x, y) {this.x = x;this.y = y;Point.cnt++;}toString() {return '(' + this.x + ', ' + this.y + ')';} }Point.cnt = 0;let p = new Point(1, 2); let q = new Point(3, 4);console.log(Point.cnt);

1.10 事件

JavaScript的代碼一般通過事件觸發。

可以通過addEventListener函數為元素綁定事件的觸發函數。

常見的觸發函數有：

鼠標

• click：鼠標左鍵點擊
• dblclick：鼠標左鍵雙擊
• contextmenu：鼠標右鍵點擊
• mousedown：鼠標按下，包括左鍵、滾輪、右鍵
  • event.button：0表示左鍵，1表示中鍵，2表示右鍵
• mouseup：鼠標彈起，包括左鍵、滾輪、右鍵
  • event.button：0表示左鍵，1表示中鍵，2表示右鍵

鍵盤

• keydown：某個鍵是否被按住，事件會連續觸發
  • event.code：返回按的是哪個鍵
  • event.altKey、event.ctrlKey、event.shiftKey分別表示是否同時按下了alt、ctrl、shift鍵。
• keyup：某個按鍵是否被釋放
  • event常用屬性同上
• keypress：緊跟在keydown事件后觸發，只有按下字符鍵時觸發。適用于判定用戶輸入的字符。
  • event常用屬性同上
    keydown、keyup、keypress的關系類似于鼠標的mousedown、mouseup、click

表單

• focus：聚焦某個元素
• blur：取消聚焦某個元素
• change：某個元素的內容發生了改變

窗口

需要作用到window元素上。

• resize：當窗口大小放生變化
• scroll：滾動指定的元素
• load：當元素被加載完成

總結

以上是生活随笔為你收集整理的JavaScript 2 基本语法的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。