前端开发工程师-前端基础-JavaScript_对象和原型.docx

PAGE1

PAGE1

JavaScript对象基础

1对象的创建与属性操作

1.1对象的创建

在JavaScript中，对象是属性和方法的集合，是面向对象编程的基础。创建对象有多种方式，包括使用对象字面量、构造函数、类以及工厂函数等。

1.1.1使用对象字面量

对象字面量是一种快速创建对象的简便方式，它使用大括号{}来定义对象的属性和方法。

//创建一个对象

constperson={

name:张三,

age:25,

sayHello:function(){

console.log(`Hello,mynameis${this.name}`);

}

};

//访问对象属性

console.log(person.name);//输出:张三

//调用对象方法

person.sayHello();//输出:Hello,mynameis张三

1.1.2使用构造函数

构造函数是一种用于创建对象的函数，通常首字母大写。通过new关键字调用构造函数可以创建对象实例。

functionPerson(name,age){

this.name=name;

this.age=age;

}

Person.prototype.sayHello=function(){

console.log(`Hello,mynameis${this.name}`);

};

constperson1=newPerson(李四,30);

console.log(person1.name);//输出:李四

person1.sayHello();//输出:Hello,mynameis李四

1.1.3使用类

ES6引入了类的概念，使得对象的创建更加面向对象。

classPerson{

constructor(name,age){

this.name=name;

this.age=age;

}

sayHello(){

console.log(`Hello,mynameis${this.name}`);

}

}

constperson2=newPerson(王五,35);

console.log(person2.name);//输出:王五

person2.sayHello();//输出:Hello,mynameis王五

1.2属性操作

对象的属性可以通过点符号.或方括号[]进行访问和修改。方括号方式允许使用变量作为属性名。

constperson={

name:张三,

age:25

};

//访问属性

console.log(person.name);//输出:张三

//修改属性

person.age=26;

console.log(person.age);//输出:26

//添加属性

person.gender=male;

console.log(person.gender);//输出:male

//删除属性

deleteperson.gender;

console.log(person.gender);//输出:undefined

//使用方括号访问和修改属性

constkey=name;

console.log(person[key]);//输出:张三

person[key]=李四;

console.log(person.name);//输出:李四

2对象的遍历与方法使用

2.1对象的遍历

遍历对象的属性通常使用for...in循环或Object.keys()、Object.values()和Object.entries()方法。

constperson={

name:张三,

age:25,

gender:male

};

//使用for...in循环遍历对象属性

for(letkeyinperson){

if(person.hasOwnProperty(key)){

console.log(`${key}:${person[key]}`);

}

}

//使用Object.keys()遍历对象属性

constkeys=Object.keys(person);

for(letkeyofkeys){

console.log(`${key}:${person[key]}`);

}

//使用Object.values()遍历对