简述 JavaScript 对象的使用
一、面向对象编程(oop)相信大家都不陌生,它有两个基本概念:
1.类:类是对象的类型模板,它是一种泛指,如学生、明星、女朋友;
2.实例:实例是根据类创建的对象,根据类创建对一系类具体的实例,如学生student类可以创建出xiaoming,xiaobai,明星star类创建出liudehua、Michael Jackson 等
不过,JavaScript不区分类和实例的概念,而是通过原型(prototype)来实现面向对象编程。具体我们可以去看廖雪峰老师的官方网站:https://www.liaoxuefeng.com/wiki/1022910821149312/1023022126220448,今天只是简单讲下JavaScript对象的使用。
二、什么是对象?
现实生活中,万物皆对象,对象就是一种具体的事物,看得见摸得着的事物。
对象在我们JavaScript中是一组无序的属性+方法的组合,所有事物都是对象,如:数组、字符串、数值、函数等
属性:事物的特征(常为名词)
方法:事物的行为(常为动词)
举例:小米5X手机(对象)
属性:大小、外观、内存......
方法:打电话、玩游戏......
三、对象的使用方式
1.利用字面量创建对象——{ }
<script> //创建一个空对象:var obj={}
var obj={
name:"蒙奇·D· 鲁夫",
age:28,
say:function(){
console.log('我是要成为海贼王的男人');
}
}
//使用对象 :第一种采取对象名.属性;对象名.方法名()
console.log(obj.name);
obj.say();
//第二种:对象名['属性名']
console.log(obj['age']);
</script>
注意:a..里面的属性或方法采用键值对的形式:键 (属性) : 值(属性值);
b.多个属性或方法用 逗号(,)隔开;
c..方法后面跟一个匿名函数(function(){ })
2.利用 new Object创建对象
<script>
var star=new Object();//创建一个空对象
star.name='胡歌';
star.age=38;
star.job=['演员','歌手'];
star.sayHi=function(){
console.log('你好,我叫'+this.name);
}
//使用对象
console.log(star.name);
console.log(star['age']);
star.sayHi();
</script>
注意:a.采用 等号(=)赋值的方式添加对象属性和方法
b.多个属性和方法用分号(;)隔开
3.工厂模式创建对象
<script>
function createPerson(uname,age,job){
var obj=new Object();
obj.name=uname;
obj.age=age;
obj.job=job;
obj.skill=function(e){
console.log(e)
};
return obj;
}
var person1=createPerson("莫凡",29,"全职法师");
console.log(person1.name);
person1.skill(person1.age);
var person2=createPerson("叶修",25,"全职高手");
person2.skill(person2.name);
console.log(person2['job']);
</script>
4.构造函数创建对象
<script>
function Person(uname,age,job){
this.name=uname;
this.age=age;
this.job=job;
this.skill=function(a){
console.log(a)
};
}
var person1=new Person("莫凡",29,"法师");
console.log(person1.name);
person1.skill(person1.name+'是'+"全职法师");
var person2=new Person("叶修",25,"散人");
console.log(person2['age']);
person2.skill(person2.name+'的年龄是'+person2.age+"岁,被称为"+"荣耀教科书");
</script>
注意:a.构造函数首字母大写;
b.不需要return;
c.调用构造函数需要使用 new
d.属性和方法必须前面加this
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步