JavaScript 對象基礎

JavaScript 對象的基本形式、對象的創建方式、構造函數、包裝類等

對象的格式

基本格式

對象使用一個{}進行包裹，內部屬性以鍵值對形式聲明

示例 var teacher = {

name: "pgjett",

age: "22",

teach: function () {

console.log("I teach javascript");

},

drink: function () {

console.log("I drink beer");

}

}

對象的的屬性

屬性的增刪改查 var teacher = {

name: "pgjett",

var teacher = {

name: "pgjett",

age: "22",

teach: function() {

console.log("I teach javascript");

},

drink: function() {

console.log("I drink beer");

}

}

// 增加

teacher.smook = function(){

console.log("I smook");

}

// 刪除

delete teacher.name;

// 改變

teacher.teach =function() {

console.log("I teach java");

}

// 查找/訪問

console.log(teacher.name);

console.log(teacher["name"]);

// 最早的 JS 引擎使用 obj["name"] 訪問

// 使用 obj.name 會自動轉換成 obj["name"]

對象方法訪問屬性

一般將普通函數稱之為函數，對象內的函數稱之為方法 var teacher = {

name: "pgjett",

age: "22",

weight: "65",

teach: function() {

console.log("I teach javascript");

},

eat: function() {

this.weight++;

console.log("I eat, my weight is " + this.weight);

}

}

teacher.eat();

帶參數的對象方法 var attendance = {

students: [],

join: function(name) {

this.students.push(name);

console.log(name + " 已到課");

},

leave: function(name) {

var idx = this.students.indexOf(name);

if (idx != -1) {

this.students.splice(idx, 1);

console.log(name + "早退");

}

}

}

attendance.join("張三");

attendance.join("李四");

attendance.join("王五");

attendance.join("趙六");

attendance.join("孫七");

attendance.leave("李四");

// 張三 已到課

// 李四 已到課

// 王五 已到課

// 趙六 已到課

// 孫七 已到課

// 李四早退

對象的創建方式

對象字面量

也叫對象直接量 var obj = {

name: "Jett",

age: 22""

}

內置構造函數

使用 new Object()，與對象直接量沒什么區別 var obj = new Object();

obj.name = "Jett";

obj.age = "22";

自定義構造函數

自定義構造函數使用大駝峰命名，通過 new 創建對象實例，且 new 出的示例是不同對象，有各自的屬性

自定義構造函數是 javascript 模塊化、插件化的重要內容 function Teacher(){

this.name = "Jett";

this.age = 22;

this.teach =function(){

console.log("I teach javascipt");

}

}

var teacher1 = new Teacher();

var teacher2 = new Teacher();

teacher2.name = "John";

console.log(teacher1);

console.log(teacher2);

// Teacher{name: "Jett", age: 22, teach: teach(){}}

// Teacher{name: "John", age: 22, teach: teach(){}}

自定義構造函數傳入參數 function Teacher(opt) {

this.name = opt.name

this.age = opt.age;

this.teach = function() {

console.log("I teach " + opt.course);

}

}

var teacher1 = new Teacher({

name: "Jett",

age: 22,

course: "javascript"

});

var teacher2 = new Teacher({

name: "John",

age: 25,

course: "java"

});

構造函數原理

this 的指向

不使用 new，直接執行，根據預編譯原理，this 默認指向 window

在全局作用域中，this 代表 window function Car() {

this.color = "red";

this.brand = "BMW";

}

Car();

console.log(window.color);

console.log(this.color);

// red

// red

使用 new 實例化對象，this 指向該實例 function Car() {

this.color = "red";

this.brand = "BMW";

}

var car = new Car();

console.log(car.color);

this 轉變的過程

當 new 一個構造函數時，就相當于該構造函數執行，它的 AO 中會有一個 this 指向一個默認的屬性

當執行 this.color = "red";

this.brand = "BMW";

相當于在 this 上添加屬性

使用 new 關鍵字后會將 this 拋出，賦值給一個引用

這就是一個實例對象，這個實例可以訪問 color、brand 屬性

構造函數中的 return

new 一個構造函數默認會隱式 return this

如果顯式 return 一個原始值，實例對象不受影響

如果顯式 retrn 一個引用值，new 出的實例將指向該引用值 function Car() {

this.color = "red";

this.brand = "BMW";

return 1;

}

var car = new Car();

console.log(car.color);

// red

包裝類

Number

通過構造函數創建數字對象，可以設置屬性

在運算中可以自動解包裝

與此類似的還有 String，Boolean var a = new Number(1);

a.name = "a";

console.log(a);

console.log(a + 1);

// 打印

// Number{1, name: "a"}

// 2

原始值自定義方法和屬性，每次訪問都會被包裝成相應類型的對象，僅僅是臨時容器，執行后則銷毀，再次訪問又重新包裝，只能訪問到 undefined var a = 1;

a.name = "a";

// js 引擎將 a 包裝成數字對象，

// 即 new Number(a).len = 3

// 臨時容器沒有變量保存，執行 delete，刪除該 len 屬性

console.log(a.name);

// 即 console.log(new Number(a).len)

// 打印 undefined

String

字符串原始值并沒有 length 屬性，實際上是包裝成字符串對象后訪問 length 屬性 // js 引擎將 "123" 包裝成字符串對象

var str = "123";

str.length = 1;

// 即 new String(str).length = 1;

console.log(str.length);

// 即 console.log(new String(str).length)

// 打印 3

對象鏈式調用

通過 return this 將對象拋出，以調用其他函數

```javascript

var sched = {

marning:function(){

console.log("marning studying");

return this;

},

noon:function(){

console.log("noon sleeping");

return this;

},

afternoon:function(){

console.log("afernoon shopping");

return this;

}

}

sched.marning().noon().afternoon();

```

對象枚舉

for in 遍歷對象屬性 var obj = {

name: "Jett",

age: 22,

address: "安徽"

}

for( var key in obj) {

console.log(key, obj[key]);

}

// name Jett

// age 22

// address 安徽

用 in 判斷對象是否有某個屬性 var obj = {

name: "Jett",

age: 22,

address: "安徽"

}

console.log("name" in obj);

// true

創作挑戰賽新人創作獎勵來咯，堅持創作打卡瓜分現金大獎

總結

以上是生活随笔為你收集整理的js 操作java对象_JavaScript 对象基础的全部內容，希望文章能夠幫你解決所遇到的問題。

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