對象是一種數據類型,它由屬性和方法組成。對象的方法是讓對象完成某些操作的函數,這些函數可以訪問和操作對象的數據。
一、創建對象
對象有很多創建方式,其中最常見的是使用字面量或構造函數。
1. 使用字面量創建對象
字面量是一種簡單的對象創建方式,可以直接使用花括號{}來創建對象,定義對象的屬性和方法:
const person = {
name: '小明',
age: 18,
sayHi() {
console.log('你好,我叫' + this.name + ',今年' + this.age + '歲!');
}
};
person.sayHi(); //輸出:你好,我叫小明,今年18歲!
2. 使用構造函數創建對象
構造函數是一種類似於模板的方式創建對象,通過使用new關鍵字來創建新的對象實例:
function Person(name, age) {
this.name = name;
this.age = age;
this.sayHi = function() {
console.log('你好,我叫' + this.name + ',今年' + this.age + '歲!');
}
}
const person = new Person('小明', 18);
person.sayHi(); //輸出:你好,我叫小明,今年18歲!
二、對象方法的定義和調用
對象的方法可以在對象上定義,然後通過對象來調用。
1. 對象方法的定義
對象方法的定義與屬性的定義非常相似,只需要將屬性值設置為一個函數即可:
const person = {
name: '小明',
age: 18,
sayHi() {
console.log('你好,我叫' + this.name + ',今年' + this.age + '歲!');
}
};
person.sayHi(); //輸出:你好,我叫小明,今年18歲!
2. 對象方法的調用
對象方法的調用需要使用對象名和方法名,並且方法名要加上括號:
const person = {
name: '小明',
age: 18,
sayHi() {
console.log('你好,我叫' + this.name + ',今年' + this.age + '歲!');
}
};
person.sayHi(); //輸出:你好,我叫小明,今年18歲!
三、對象方法中的this關鍵字
this指向的是當前對象,使用this關鍵字可以訪問和操作當前對象的屬性和方法。
1. 使用this訪問對象屬性
在對象方法中使用this關鍵字可以訪問對象的屬性:
const person = {
name: '小明',
age: 18,
sayName() {
console.log('我叫' + this.name);
}
};
person.sayName(); //輸出:我叫小明
2. 使用this調用其他方法
在對象方法中使用this關鍵字可以調用其他方法:
const person = {
name: '小明',
age: 18,
sayName() {
console.log('我叫' + this.name);
},
sayHi() {
this.sayName();
console.log('今年' + this.age + '歲!');
}
};
person.sayHi(); //輸出:我叫小明 今年18歲!
四、使用call和apply調用對象方法
call和apply是JavaScript中的兩個方法,它們可以調用函數或方法並修改函數或方法內部this的指向。
1. 使用call方法調用對象方法
使用call方法可以調用對象方法,並將另一個對象作為this傳入對象方法:
const person1 = {
name: '小明',
age: 18,
sayHi() {
console.log('你好,我叫' + this.name + ',今年' + this.age + '歲!');
}
};
const person2 = {
name: '小紅',
age: 20,
};
person1.sayHi.call(person2); //輸出:你好,我叫小紅,今年20歲!
2. 使用apply方法調用對象方法
使用apply方法可以調用對象方法,並將另一個對象作為this傳入對象方法,並且傳入參數數組:
const person1 = {
name: '小明',
age: 18,
sayHi(city) {
console.log('你好,我叫' + this.name + ',今年' + this.age + '歲!我來自' + city + '。');
}
};
const person2 = {
name: '小紅',
age: 20,
};
person1.sayHi.apply(person2, ['北京']); //輸出:你好,我叫小紅,今年20歲!我來自北京。
五、對象方法的繼承
對象的方法可以被繼承到其他對象中,從而達到代碼復用的效果。
1. 使用Object.create方法進行繼承
使用Object.create方法可以創建一個新的對象,並將原對象作為新對象的原型,從而實現方法的繼承:
const person = {
name: '小明',
age: 18,
sayHi() {
console.log('你好,我叫' + this.name + ',今年' + this.age + '歲!');
}
};
const student = Object.create(person);
student.name = '小紅';
student.grade = 3;
student.sayHi(); //輸出:你好,我叫小紅,今年18歲!
2. 使用class進行繼承
使用class可以創建一個新的對象,並將原對象作為新對象的原型,從而實現方法的繼承:
class Person {
constructor(name, age) {
this.name = name;
this.age = age;
}
sayHi() {
console.log('你好,我叫' + this.name + ',今年' + this.age + '歲!');
}
}
class Student extends Person {
constructor(name, age, grade) {
super(name, age);
this.grade = grade;
}
}
const student = new Student('小紅', 18, 3);
student.sayHi(); //輸出:你好,我叫小紅,今年18歲!
原創文章,作者:小藍,如若轉載,請註明出處:https://www.506064.com/zh-hk/n/245209.html
微信掃一掃
支付寶掃一掃